Thème 1 : découvrons processing !

Afin de créer votre œuvre numérique, nous allons utiliser un outil s'appelant Processing qui facilite la création d’œuvres statiques ou animées. Processing est utilisé par de nombreux artistes : https://www.processing.org/exhibition

Pour prendre en main Processing, nous commençons par l'aire de dessin, ou la toile de votre tableau virtuel, et la manière de se repérer au sein de ce tableau. En effet, lorsque vous peignez sur une toile la coordination entre votre vue et votre main vous permet de poser le pinceau où vous le souhaitez. Sur une toile virtuelle, sans yeux ni mains, il faut procéder autrement :) Du coup, un peu comme dans un jeu de bataille navale ou d'échec, on utilise un système de coordonnées pour se repérer sur la toile. Le schéma ci-dessous l'illustre, un écran d'ordinateur utilise un repère un peu différent de celui que vous avez vu en mathématiques : Source: https://www.processing.org/tutorials/drawing

Lorsque l'on souhaite dessiner une figure sur la toile, on utilise ce système de coordonnées pour indiquer précisément à la machine l'endroit où l'on souhaite placer la figure. Voyons les figures de base dont on dispose pour réaliser des dessins avec Processing:

On retrouve les objets classiques de la géométrie : un point, une ligne, un rectangle et une ellipse. Il existe d'autres figures, mais l'on peut déjà bien s'amuser avec ces 4 primitives :) Afin de dessiner ces figures, il faut s'interroger sur les informations nécessaires pour les caractériser. Ainsi, dessiner un point est un peu plus simple qu'un rectangle. En effet, un point n'est décrit que par la coordonnée où l'on souhaite le placer. Pour un rectangle, il faut définir un point de base (le coin supérieur gauche), la largeur (l) et la hauteur (h) du rectangle. Résumons : point = 1 coordonnée, rectangle = 1 coordonnée, l et h.

Appuyez sur le bouton Run avec la souris pour exécuter le programme et visualiser le résultat de l'usage de ces 4 primitives :

Examinons ce programme :

  • ce qui s'affiche en vert, c'est-à-dire ce qui se trouve derrière un dièse (#), est un commentaire : du texte s'adressant aux humains pour donner des explications… que la machine ignore royalement ;)
  • ligne 3 : from processing … indique que l'on souhaite utiliser Processing, tous nos programmes commenceront par cette ligne !
  • ligne 5: def setup(): est le début de la définition de la fonction setup(). Cette fonction sera exécutée au lancement du programme. Nous allons donc y mettre la description de notre toile.
  • les lignes 6 à 16 sont les instructions qui définissent la fonction setup(). Elles sont repérées comme telles parce que précédées de deux caractères espaces.
ATTENTION: soyez attentifs à ces deux espaces, ils sont très importants !
  • la ligne 18: run indique de démarrer le programme
ne jamais oublier de mettre cette instruction à la dernière ligne de votre programme, sinon … rien ne se passera !

Voyons maintenant ligne par ligne les instructions de dessin de notre toile :

  • ligne 6: size(200, 300) indique que l'on souhaite avoir une toile de 200 pixels de largeur et 300 de hauteur. Vous pouvez changez ces valeurs pour voir ce que cela donne.
  • ligne 7: background(0) définit la couleur de fond de la toile et 0 correspond au noir.
  • ligne 8: stroke(255) définit la couleur du pinceau et 255 correspond à blanc.
  • ligne 9: strokeWeight(2) définit l'épaisseur de notre pinceau en nombre de pixels.

Pour l'instant, l'ensemble de ces instructions n'ont permis que de définir le contexte de travail: la taille de la toile, sa couleur de fond, la couleur et l'épaisseur du pinceau. Mais à part remplir le fond de la toile avec la couleur noire, nous n'avons encore rien dessiné.

  • ligne 10: un petit commentaire qui ne sert qu'à expliquer des choses à celui qui lit ce code source :)
  • ligne 11: point(10, 10) dessine un point à la coordonnée (x=10, y=10)… en blanc et de deux pixels de large à cause des réglages que nous avons fait précédemment
  • ligne 12: line(15, 10, 10, 255) dessine une ligne depuis la coordonnée (x1=15, y1=10) jusqu'à la coordonnée (x2=10, y2=255)
  • ligne 13: rect(20, 10, 40, 50) dessine un rectangle dont le coin supérieur gauche se trouve à la coordonnée (x=20, y=10), de 40 pixels de large et de 50 pixels de hauteur
  • ligne 14: ellipse(100, 50, 50, 25) dessine une ellipse (un ovale) dont le centre se trouve à la coordonnée (x=100, y=50) avec un premier rayon de 50 pixels (qui représente la largeur de l'ovale) et un second rayon de 25 pixels (qui représente la hauteur de l'ovale)
  • ligne 15: ellipse(100, 100, 50, 50) une ellipse dont les deux rayons sont égaux, c'est un cercle !

Amusez-vous à modifier les instructions, exécutez à nouveau le programme pour observer les effets de vos modifications.

Œ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 :)

Nous arrivons maintenant à la fin de cette première séance qui vous a permis de 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 !