Regardons maintenant le canevas dans P5. Le canevas c’est très simple. C’est comme en peinture: une surface sur laquelle on va peindre.

Ici on va travailler sur l’écran. Il est possible de dessiner dans P5 sur d’autres supports, mais ici on va commencer sur un écran. Et on va rester plutôt en deux dimensions. Trois dimensions c’est possible, mais on va surtout travailler en deux dimensions.

Voici le canevas de base que P5 vous donne. Ici on regarde la version la plus minimaliste, avec nos instructions de mise en place de notre peinture. On a la fonction “setup” dans laquelle je crée un canevas de 400 pixels par 400 pixels. Si je donne un couleur de fond, avec le chiffre 0, ça va me donner un canevas noir. Avec les chiffres 255, je vais voir un un canevas blanc. Si j’écris 128 — c’est à peu près au milieu de ces deux valeurs — j’ai un canevas gris. Avec une taille de 400 x 400 pixels.

Je vais un petit dessin de tout ce que je viens de faire là. On voit que P5 me crée un canevas. Et ce canevas est défini avec 400 pixels de largeur et 400 pixels de hauteur. En anglais on dit “height” et on dit “width”. Il y a donc la largeur et la hauteur: actuellement il s’agit de 400 par 400.

Je vais dessiner, et je vais partir du point 0,0 en pixels. Si je demande à P5 de me faire un point, à la position 0,0 je verrai un petit pixel à apparaître ici. Si je lui demande de créer un point en me déplaçant de 200 pixels sur l’axe ‘x’ (en largeur) et 200 pixels sur l’axe ‘y’ (en hauteur), et je lui demande de faire un point à “200,200”, il mettra un point en plein milieu de mon canevas.

Si on regarde ça en action, je pourrais créer par exemple un fond blanc. Non, finalement je vais rester gris. Je pourrais ensuite lui demander de faire un point “200,200” qui est pile poil au milieu de mon espace de peinture. Alors P5 m’a créé un tout petit point qui est visible si je zoome avec la souris. Il est donc possible de dessiner un tout petit point à l’endroit qu’on veut sur mon canevas.

Dans cet exemple on a donné des dimensions exactes, car on sait au départ ce qu’on veut comme largeur et hauteur de dessin. Mais si on regarde un artiste comme Sol Lewitt, un artiste conceptuel qui donnait des instructions de dessin et de peinture. Ses instructions restaient très simples. L’artiste n’exécutait pas ses propres peintures, et ces instructions permettaient à ses peintures de s’adapter au support.

Dans la série des «Wall Drawings» on voit des formes, par exemple ici une des peintures les plus connues de Sol Lewitt. Et on voit que, selon l’espace disponible, cette peinture va se déployer très différemment.

Si vous voulez un exemple, il y a des gens qui s’amusent à recréer Sol Lewit. Par exemple le projet «Solving Sol» traduit Sol Lewitt via des algorithmes en des dessins sur ordinateur. Voici les instructions de départ écrites par Sol Lewitt. Wall Drawing numéro #17, 1969:

«Four part drawing, with a different line direction in each part.»

Alors, ça donne quoi? Ici on voit que sur la surface, on a quatre différents dessins. Et on peut imaginer que selon l’endroit ou la taille de l’écran, le dessin va s’adapter.

Il y a une manière aussi de travailler de cette façon dans P5, en utilisant non pas des instructions avec des chiffres précises mais avec des mots spéciaux. «windowWidth» veut dire la taille disponible en largeur de la fenêtre, et «windowHeight» pour la hauteur. Attention: il y a un majuscule sur le «W» et sur le «H». C’est une tradition dans la programmation. L’ordinateur est con, et ne comprendra pas deux mots pour une seule instruction. On attache donc les mots ensemble avec des majuscules. Oublions: c’est juste une particularité étrange de la programmation. «windowWidth» et «windowHeight» vont faire en sorte que le dessin s’adapte à ma fenêtre quelle que soit sa largeur.

Je vais tester ça. Je vais créer un peu plus d’espace. Si je relance mon ma peinture, je vois que mon canevas est beaucoup plus grand. Par contre point a été défini avec 200 pixels en partant de ce coin en haut à gauche: il va partir 200 pixels sur l’axe x et 200 pixels sur l’axe y. Je vais aller à la chasse du pixel et ça y est je l’ai trouvé. Il est ici, ce pixel.

Comme vous voyez, on n’est plus au centre de mon dessin. Pourquoi? Et bien parce que P5 a fait exactement ce qu’on lui a demandé. On lui a demandé de partir 200 pixels en horizontal et de descendre 200 pixels en vertical, puis de faire un point. Mais si la largeur et la hauteur de l’espace est différent que 400x400, 200 n’est plus au centre du dessin. Il y a une astuce pour régler ça, et que je vais vous demander d’utiliser d’ores et déjà. Il s’agit d’un mot qui est connue par P5, qui connaît le nombre derrière cette largeur et derrière cette hauteur. Ça s’appelle «width» et ça s’appelle «height». Nous pouvons commencer à utiliser par exemple «width» divisé par deux et «height» divisé par deux. Il va prendre la largeur quelle qu’elle soit et la hauteur quelle qu’elle soit et mettre le point au milieu. Si je vais maintenant à la chasse de mon pixel, je vais le trouver en plein centre de mon canevas, et c’est l’ordinateur qui s’occupe ça pour moi.

Pour voir un peu mieux, je vais créer un cercle. Je vais mettre ce cercle au milieu de la largeur de mon canevas, et je vais le mettre au milieu de la hauteur de mon canevas, avec soit un chiffre fixe — par exemple une centaine de pixels. Mais on a aussi la même histoire: si j’ai un tout petit espace étroit, ou un espace de dessin beaucoup plus large, la largeur de mon cercle ne va pas s’adapter à mon canevas. Pour le diamètre de mon cercle, je pourrais dire que ce cercle prendra la totalité de la hauteur ou la totalité de la largeur du canevas. Sinon une proportion autre. Par exemple je pourrais multiplier par un quart — en anglais on utilise des points et non pas des virgules — on va donc multiplier (*) par «0.25» de la hauteur. Ça va me donner une ellipse qui est 0,25 ou 0,5 ou 0,75 — ce qui donnera trois quart de mon espace.

Si j’active la mode «présentation» — ici je sauvegarde mon dessin, je rentre dans le bouton «share», et je vais sélectionner le mode «présentation» — je vois, en plein écran, mon dessin parfaitement adapté à la totalité de la surface disponible. Ici, il s’agit de mon écran d’ordinateur.

Si vous voulez faire une installation avec P5 vous avez un mode «file > share > present» où vous allez pouvoir mettre votre canvas en beauté. Cela prend la totalité de l’espace de l’écran et on voit dans cet exemple là l’intérêt de travailler, comme Sol Lewitt, avec un canevas adaptatif.