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 :

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.