Pour peindre à l’intérieur de notre canevas on aura besoin de quelques formes.

Quand on regarde les choses faites sur ordinateur avec des algorithmes, on peut se dire «tiens ça a l’air très compliqué à fabriquer», mais en réalité ça revient souvent à juste quelques formes très simples de base et un jeu de superposition, de stratification de ses formes simples. Quand on regarde le travail Casey Reas — un des concepteurs «Processing», qui est devenu maintenant avec l’équipe de Lauren McCarthy «P5» — quand on regarde le travail de Casey Reas, par exemple des tableaux comme celui-ci: peut-être on se dit «Il y a beaucoup de gestes là dedans, c’est un peu complexe». Alors qu’en réalité, quand on regarde la chose en train d’être peinte, on se rend compte que ce n’est rien d’autre qu’un déplacement lent et progressif de quelques triangles de base. On le voit aussi dans d’autres travaux de Casey Reas, comme par exemple cette installation à Miami: ça c’est une projection qui se passait tous les soirs, au coucher du soleil jusqu’au matin. Il y a des projections de formes évolutives, faites par Casey Reas. Quand on regarde de près on voit de nouveau ce n’est rien d’autre que des formes simples. Ici avec un dégradé et un déplacement dans la forme elle-même, mais en fait ce ne sont rien d’autre que des formes simples que l’on va répéter. Dites vous que ce n’est pas si compliqué que ça, si on comprend l’ordre de stratification des éléments, et si on connaît les instructions de base pour dessiner ses formes, on peut faire tout un tas de choses. En tout cas, j’espère que vous vous allez trouver ça intéressant. Ou disons, au moins, que je pourrais éventuellement trouver intéressant à peindre sur mon ordinateur.

Alors, quelles sont ses formes?

Ici, j’ai créé — comme je vais vous demander à chaque fois — dans la fonction de mise en place de ma peinture algorithmique, un canevas qui s’adapte à la totalité de l’espace disponible. On a déjà vu que je peux faire des formes, par exemple un cercle, et si vous avez regardé les vidéos précédentes vous savez qu’on peut profiter d’un mot magique, d’un mot clé, par lequel P5 connaît la largeur de mon canevas — quelle que soit la largeur du canevas — avec le mot «width» et le mot «height». En définissant la position x de mon cercle comme étant au milieu de cette largeur et de cette hauteur, et puis en lui attribuant une taille, par exemple de 200 pixels, je peux dessiner un cercle au milieu de l’écran.

Si vous ne voulez pas une forme totalement ronde, vous pouvez aussi faire une ellipse. On va aussi la mettre au centre de l’écran et cette fois-ci je va attribuer 150 pixels en largeur et 100 pixels en hauteur. Ce qui me donne une ellipse à l’intérieur de l’autre cercle.

Je peux aussi utiliser des formes plus modulaires — je veux dire par là que je vais utiliser 75% de l’espace du dessin pour définir le diamètre du cercle. Je pourrai dire aussi dire que ça va être la moitié de la hauteur. «Diviser par deux», c’est également «multiplier par 0.5», c’est-à-dire 50% de la largeur et 50% de la hauteur. Ça va me donner un cercle comme tout à l’heure. Mais écrit de cette façon, je pourrais commencer à moduler et avoir une ellipse qui n’aura pas une forme parfaitement circulaire.

Voici donc les «cercles» et les «ellipses».

Il y a aussi des «squares» — s’il y a «circle», il y a «square» — et je pourrais aussi mettre mon square au milieu de l’écran. Je peux multiplier par «0.5», ou je peux aussi diviser par deux. C’est comme vous voulez. Ici je vais dire à mon «square» d’être au milieu de mon espace de peinture, de mon canevas. Je vais dessiner un square avec un largeur disons de 50 par 50 pixels.

Alors, qu’est ce qu’il a fait? J’ai fait une erreur. J’ai donné quatre paramètres, ce qui a défini la rondeurs des coins. Pardon. Il en faut trois.

Pour ce «square», je vais le mettre comme tout à l’heure au centre du «width» et «height», avec une largeur de 50 pixels. Et vous allez me dire «mais en fait il n’est pas totalement au centre, il est désaxé». C’est la même chose avec des rectangles. Si je ne veux pas une forme totalement carré, je peut multiplier par «0.5» pour la position le x et y de mon rectangle avec une largueur de 100 de pixels et de 150 pixels. L’ordre est important. Et je vois que mon rectangle ne part pas totalement du centre, mais qu’il est plutôt décalé.

Au fait les rectangles et les carrés se définissent à partir de leur coin, en haut à gauche du carré. Voici le principe en dessin. Les ellipses et les cercles se dessinent à partir de leur centres, alors que les rectangles et les carrés et se dessinent à partir du coin en haut à gauche. Puis on définit dans un autre paramètre la largeur et la hauteur de cette forme. Il s’agit d’une autre manière pour dessiner des formes pour les rectangles et les carrés.

Il existe une manière de modifier ce comportement: si vous préférez dessiner vos rectangles et vos carrés depuis le centre, vous pouvez activer rectMode(center). Cette commande mettra vos formes aux centre.

Vous avez aussi des formes comme des triangles, par exemple si je dessine en partant en haut à gauche de mon canot va avec 50,50 (en pixels) pour le premier point et 150,100 (en pixels) sur le deuxième et on va revenir à 100,200 pour le 3ème point.

Notez que j’ai mis un petit espace: il n’est pas nécessaire. En gros on doit lui donner six nombres pour définir la position du point x,y du premier point, x,y du deuxième point, et x,y du troisième point. Là, j’ai un triangle qui s’est créée ici en haut.

Évidemment je peux aussi utiliser des valeurs plus modulaires, plus adaptatives, qui pourrait s’adapter à cette magnifique peinture. Si je la mets en mode «present», le dessin va s’adapter en fonction de la largeur et de la hauteur de mon canevas qui est maintenant plus étendu. Les triangles prennent six valeurs et ces valeurs correspondent à des valeurs x,y de trois points d’un triangle.

Il y a des formes arbitraires que je ne vais pas vous montrer maintenant mais vous pouvez avoir des formes ouvertes et fermées qui suivent un contour plus aléatoire. Par exemple la silhouette d’une personne ou d’une forme. Restons dans les formes les plus simples.

On l’a déjà vu aussi qu’il y a le «point». Voici un point(0,0). Si je dessine un point, vous pouvez voir en zoom que j’ai un pixel, un point, qui s’est créée en haut à gauche de mon espace de dessein.

Une autre forme simple, souvent utilisé en P5, c’est le line qui pourrait aller de ce point 0,0 jusqu’à la largeur de mon dessin, et en hauteur. Il va donc traverser totalement l’espace de peinture. Je peux aussi lui dire de descendre une centaine de pixels en largeur et de descendre une centaine de pixels en hauteur. Je peux lui dire d’aller au centre x 0.5 pour la largeur et hauteur x 0.5, et il aura jusqu’au centre. Si je sauvegarde, et je me mets en mode «present», on va voir peut-être quelque chose d’un peu différent selon l’espace adaptatif de mon canevas.

Des formes simples: line, circle, square, triangle, … Et comme je disais, il y a même des formes plus plus complexe. Si vous voulez connaître la liste complète des instructions et connaître les paramètres plus en détail, il y a de nombreux tutoriels en ligne. Il y a une documentation — comme c’est un projet open source, la documentation est une contribution collective. Il y a une référence sur le site P5js.org. On voit dans la référence qu’il y a des couleurs qu’on va regarder dans une autre video, mais qu’il y a aussi des «Shapes». On voit des primitives comme line, point, rectangle, square, triangle, arc, et cætera… avec la possibilité de dessiner par exemple des «courbes de bézier» avec des «vertex». Vous avez la possibilité de créer des courbes et vous avez même des primitifs 3D — parce que vous pouvez mettre des formes 3D dans votre dessin 2D et vous pouvez mettre les formes 2D dans un espace 3D. Mais ce sera pour une autre fois.

Si je vais dans la documentation du «point» je vois qu’il y ait des démonstrations, directement dans le navigateur, qui illustrent ces différentes choses comme «line», avec une petite explication.

Une documentation en ligne que vous trouverez sur le site p5js.org avec des références. Vous n’êtes pas obligé-e de lire cette documentation avant de se lancer, c’est plutôt si vous voulez rentrer plus dans les explications.