Empilement

Parlons maintenant de l’importance de l’ordre dans la stratification, de l’idée qu’il y a des instructions que l’on va donner à l’ordinateur suivi par d’autres instructions. L’ordre de ces opérations sera important pour déterminer la logique de la stratification: la logique de ce qui a été posé d’abord, ce qui a été posé par la suite, etc.

Liste d’instructions

Nous allons commencer très simple. Au début nous allons créer une liste d’instructions linéaires, simples: on va créer un canevas de dessin; on va colorer son fond; et ensuite on va mettre une forme dessus. Par exemple, on pourrait mettre un cercle au centre de ce canevas qu’on aurait défini. On aurait défini la largeur l’auteur de ce canevas de dessin.

Plus tard nous allons créer des boucles et dans ces boucles, on va demander à P5: « Et bien P5, faites-moi des lignes qui s’étalent de cette partie là du canevas jusqu’à cette partie là du canevas. Dessinez-moi des lignes, ou des ellipses de couleur différentes, avec une centaine à l’intérieur de cette instruction bouclée ».

Même à l’intérieur des boucles — et y compris même des boucle infinies, animées, qui évoluent dans le temps — il y a néanmoins une notion d’ordre qui est toujours respectée, même dans les partis les plus riches et complexes d’un programme. Il est donc important de comprendre l’ordonnancement et la liste de numéros qui l’accompagne.

Setup

On va ouvrir le navigateur, puis editor.p5js.org. Je vais me connecter à mon compte abstractmachine. Et ici je vais effacer la fonction «draw» et uniquement garder «setup». À l’intérieur de setup, je vais même effacer des instructions.

On voit ici le programme le plus minimaliste qui ne fait absolument rien, mais c’est tout à fait possible de créer un programme qui fait absolument rien et l’ordinateur respectera parfaitement bien vos instructions.

Dans P5 nous avons toujours au moins «setup». Ensuite nous avons possibilité d’une autre fonction qu’on appelle «draw» et que nous allons explorer dans une vidéo future.

Dans la fonction «setup» c’est comme son nom indique. Oubliez pour l’instant pourquoi il y a des parenthèses et des accolades: dites-vous juste que tout ce qui est entre l’ouverture et la fermeture des accolades est une série d’instructions qui seront définies et exécutées dans l’ordre — à l’intérieur des instructions de ce que P5 doit faire quand on «set up», quand on «met en marche» notre dessin. La fonction «setup» décrit les éléments qui définissent le point de départ, le début de notre dessin.

Numéros d’instruction

Vous avez probablement déjà remarqué, que vous avez des numéros, et les numéros sont l’ordre des opérations. Mais c’est aussi exactement ce que je disais tout à l’heure: l’ordre de l’empilement des choses.

Si je demande de dessiner une ellipse sur l’instruction #2 et si je décide par la suite de créer une nouvelle couleur de fond dans l’instruction #3, l’instruction #3 va effacer tout le contenu de l’ellipse qui aurait été dessiné dans la phase #2. C’est important donc de faire des choses dans un certain ordre.

Réveil quotidien

Pensez à votre quotidien. Si vous vous levez, vous vous déshabillez, c’est-à-dire vous enlevez vos pyjamas. Ou disons plutôt que vous dormez tout-e nu-e et vous vous levez, vous allez dans la douche, et puis vous sortez, vous vous séchez et vous vous habillez … ce n’est pas du tout la même suite d’opérations que si vous vous levez, vous vous habillez, et vous rentrez dans la douche. Dans ce cas, vous aurez un résultat tout à fait différent.

L’ordre des opérations doit suivre le sens de ce que vous voulez comme résultat sur votre canevas.

Penture ou dessin ?

Je viens de dire «canevas». Il y a donc une instruction qui s’appelle «createCanvas» qui est — comme son nom indique — la création du canevas de dessin. Ou de peinture. Je dis dessins dans les autres vidéos j’ai dit «dessins». Je devrais peut-être dire peinture parce que Processing à la base est beaucoup plus proche de la peinture que des environnements de dessin comme Illustrateur. C’est plus proche de Photoshop avec une notion de pixels et du pixel qu’il met par dessus d’autres pixels. C’est une notion plus proche de la peinture, et de ce procédé de stratification. Je vais donc m’efforcer à utiliser l’idée d’un canevas de peinture — même si le terme pour une raison quelconque me semble un peu étrange.

windowWidth, windowHeight

Je vais créer un canevas et vous avez vu dans l’exemple qu’il est essentiel de définir la largeur en pixels de ce canevas de dessin. Il y a une astuce que je vais vous apprendre tout de suite. Moi j’utilise un truc qui s’appelle «windowWidth» et «windowHeight» qui sont des variables connues par P5 à la base. Chacune représente une valeur adaptative. Ce n’est pas la valeur 400 pixels, 500 pixels, 300 pixels, 2000 pixels. Sa valeur est en fonction de la fenêtre disponible de votre navigateur. Ça va prendre le nombre de pixels en largeur, et le nom de pixels en hauteur qui sont disponibles.

Si on regarde mon exemple, dans l’espace de dessin je peux avoir un dessin plus large, ou plus étroit, et pareil pour le haut et le bas. En écrivant createCanvas(windowWidth, windowHeight) mon dessin va s’adapter à l’espace disponible. Ça devient très pratique quand on veut par exemple dessiner en mode «présentation», pour faire une installation dans une exposition. Je vous expliquerai dans une autre vidéo.

Fond

Une fois que j’ai créé ce canevas, je vais peindre une couleur sur le fond. Ici je vais utiliser la couleur noire. La valeur de la couleur noir — je vous l’apprends — c’est zéro. Ça y est, j’ai une forme dessinée dans cet espace qui s’étend jusqu’à l’espace disponible de la fenêtre, en fonction de ce que je lui donne comme espace disponible dans mon navigateur.

Cercle

Enfin on va créer un cercle et ici il y a aussi des mots magiques que je pourrais utiliser mais je vais rester relativement simple je vais mettre mon cercle en haut à gauche de l’écran. Ici je je vais aller un centaine des pixels sur l’axe x, une centaine de pixels sur l’axe y. Je sais, il y a beaucoup de notions que je viens de dire. J’ai dit «x,y» et «100,100». Oubliez. Sachez juste que je suis en train de définir la position horizontale et verticale de mon cercle. Et définir combien de pixels de largeur je veux pour mon cercle parfaitement rond. C’est à dire une centaine de pixels du bord gauche, une centaine de pixels du bord haut, un cercle, une ellipse parfaitement ronde.

Ordre des opérations

Voici donc l’ordre des opérations qui sont ici décrites par les lignes 3, 4 et 5. Toutes les trois sont des instructions de ce que P5 va faire lorsque je mets en place mon dessin.

Formes chachées

Comme je disais tout à l’heure: si je fais un ordre qui n’est pas bon, je ne vais pas voir mon cercle. Parce que j’aurais créé un canevas, dessiné un cercle dessus, et par dessus mon cercle (dans l’ordre d’empilement) j’aurais mis un fond noir. La stratification est parfaitement respectée. Dans le «setup», ligne #1 — première étape — créer un canevas qui prend la totalité de la fenêtre disponible, puis dessiner un cercle, et ensuite mettez un gros pot de peinture par dessus tout ça, en créant un fond noir. Ça me donne un dessin qui efface un autre dessin. Ça donne une peinture qui efface une autre peinture.

De l’arrière vers l’avant

Par contre, si je déplace cette écriture — si je dis «d’abord, créez le canevas, ensuite le fond, et puis le cercle par dessus», je verrai mon cercle apparaître de nouveau.

Noir et blanc

Nous sommes dans le noir et blanc, mais il y a bien sûr des couleurs. L’ordre des opérations sera encore plus important quand on commence à mélanger des couleurs parce qu’on peut avoir des couleurs qui se mélangent — surtout dans P5, contrairement à Processing où c’était plus difficile. Dans P5, il ya énormément d’options permettant d’indiquer le type de mélange des différentes couches de peinture.

Conclusion

Retenez au moins l’essentiel pour l’instant en oubliant l’histoire des couleurs, que les numéros correspondent à une ordre d’opérations en commençons par le support, le fond, et puis ce que je vais dessiner dessus.