Dessinons des formes géométriques

Œuvre 1 : dessinons une face d'un dé

Attaquons-nous à la réalisation de notre première œuvre, chef d’œuvre de minimalisme : la face 1 d'un dé de 6 :)

Objectif Rendu étape 1 Rendu étape 2
- toile de 300×300 pixels de fond noir,
- un carré blanc de 200×200 pixels centré dans la toile,
- un cercle noir de 50 pixels de diamètre placé au centre du carré.
Oeuvre1 Oeuvre1-v2

Comme vous le remarquez, la première étape n'est pas exactement comme un vrai dé car le cercle n'est pas rempli (n'est pas un disque) et du coup, cela n'est pas aussi réaliste que ce que l'on pourrait souhaiter. Cela s'explique car en fait l'instruction stroke définit juste la couleur du contour d'une figure, pas de sa surface. Pour cela il faut utiliser l'instruction fill en précisant la couleur souhaitée. Par exemple, fill(0) remplira l'intérieur des figures avec du noir. Modifiez votre programme afin d'avoir un dé plus réaliste !

Du noir et blanc aux couleurs

Il est bien sûr possible d'utiliser de nombreuses autres couleurs que le noir et blanc :) En effet, si l'on ne donne qu'un seul nombre aux instructions stroke (contour) et fill (intérieur), il doit être compris entre 0 (noir) et 255 (blanc) et permet de balayer 256 nuances de gris. C'est déjà pas mal, mais un peu tristounet ! Comme en peinture, nous pouvons en fait créer de nombreuses couleurs en mélangeant les trois couleurs primaires de l'informatique : le rouge, le vert et le bleu. Ces couleurs ne sont pas les mêmes que les couleurs primaires utilisées en peinture. En informatique, on appelle cela des couleurs RVB, c'est-à-dire définies à partir de différentes proportions de chacune des composantes rouge, verte et bleue.

On peut illustrer cela à l'aide du petit schéma ci-contre qui illustre les mélanges de base :
* rouge + vert = jaune
* rouge + bleu = violet
* vert + bleu = cyan
* rouge + vert + bleu = blanc !
* et l'absence de couleurs = noir :)
Ainsi, lorsque l'on souhaitera colorer nos œuvres, nous pourrons procéder comme les peintres en fabriquant des mélanges de couleurs primaires afin d'obtenir toutes les nuances de couleurs souhaitées. Vous trouverez dans la page wikipedia Couleurs du web un tableau avec les codes décimaux RVB des couleurs définies par les navigateurs.
Couleurs RGB

Expérimentons tout cela en changeant les couleurs du court programme donné ci-dessous en faisant varier les proportions de rouge, vert et bleu (toujours entre 0 et 255 car les couleurs sont représentées sur 8 bits (1 octet), soit 28=256 possibilités ;)).

Comme vous le remarquez, il semble manquer une figure puisque nous avons dessiné deux ellipses normalement… que faudrait-il changer dans le programme ci-dessus afin de voir apparaître une ellipse au sein du disque ?

Finalement, nous disposons d'une autre possibilité pour apporter encore un peu plus de nuances à nos couleurs : la transparence. Ainsi, il est possible pour chaque couleur de définir un degré de transparence plus ou moins important pouvant varier de la transparence totale (0) à l'opacité la plus complète (255). Nous pouvons donc utiliser nos instructions stroke et fill liées aux couleurs en ajoutant une quatrième information portant sur la transparence : fill(x,x,x,0) pour une transparence totale (pas très utile sauf en cas d'animation) à fill(x,x,x,255) pour une opacité complète (c'est le réglage par défaut qui explique que dans le programme précédent le disque masquait complètement l'ellipse).

Expérimentez le petit programme ci-dessous afin de faire apparaître l'ellipse masquée par le disque… mais en ne jouant cette fois que sur la transparence :

Œuvre 2 : quadrillage coloré

On souhaite maintenant réaliser une seconde œuvre en jouant sur les couleurs et représentant un quadrillage 2×2. Pour cela, on se propose de dessiner 4 carrés de tailles identiques et de couleurs différentes comme l'illustre la figure ci-contre.

Pour réaliser cela, il faut penser aux coordonnées des différents coins supérieurs et inférieurs de chaque carré : un petit schéma peut grandement vous faciliter la tâche ;)

Ensuite, il faut s'attaquer aux couleurs. Les trois premières correspondent aux couleurs primaires, cela signifie que seule une des composantes RVB est au maximum et les autres au minimum. Pour la dernière couleur, il peut être utile de revenir au petit schéma qui expliquait le principe des couleurs RVB ;)

Petite synthèse :)

Les deux premiers points nous ont permis découvrir déjà énormément de choses :

  1. un programme est une suite d'instructions. Elles seront exécutées les unes à la suite des autres
  2. il est possible de créer des dessins simples en connaissant quelques primitives graphiques
  3. on se repère sur l'écran de grâce à un système de coordonnées dont l'origine se trouve dans le coin supérieur gauche
  4. les couleurs sont constituées d'un mélange de trois couleurs primaires : le rouge, le vert et le bleu
  5. il est possible de jouer facilement sur la transparence des couleurs pour obtenir encore plus de nuances
  6. et peut-être aussi, il faut être attentif aux espaces (aussi appelé l'indentation) lorsque l'on programme en python ;)

Mettez maintenant en pratique toutes ces nouvelles choses en réalisant ce que vous souhaitez ci-dessous !

ATTENTION: si vous souhaitez conserver votre création, n'oubliez pas de copier votre programme et de le sauvegarder dans un fichier texte sur votre ordinateur !