editor.p5js.org

Regardons maintenant l’éditeur en ligne de P5js.

Identifiant

Je vais aller sur mon Mac et ouvrir Safari. J’aime bien travailler avec Safari parce qu’il gère très bien le plein écran et j’aime bien travailler “sans distractions”, c’est-à-dire sans un tas d’éléments d’interface. J’ouvre editor.p5js.org et via cet éditeur, je vais aller en haut à droite, faire mon login avec mon mot de passe. Ça y est — il reconnaît qui je suis : «abstractmachine».

Nouveau Sketch

Ensuite il me génère un sketch avec un nom temporaire que je peux garder ou renommer : «Sepia Mozzarella», donc de la «mozzarelle en sépia». On va donc essayer de faire un peu de mozzarelle en sépia. Puis on voit enfin l’environnement P5.

Expérimentation

Comme je vous ai expliqué, la philosophie de base de Design By Numbers — qui est devenu par la suite Processing, qui est devenu maintenant P5 — c’est d’avoir un environnement pédagogique : d’exploration et d’expérimentation le plus simple possible pour faire de la programmation.

La manière dont ça se traduit sur P5 (et dans Processing à la base) c’est via un minimum d’éléments d’interface.

Espace écriture

On a l’espace d’écriture. Il y a du code plus complexe que Design By Numbers à la base, mais qui est quand-même plus ou moins compréhensible : on y voit le «setup», c’est-à-dire la mise en place d’un dessin avec la création d’un canevas. Puis l’espace où l’on décrit le dessin («draw»), ici avec une couleur de fond. Vous ne le savez peut-être pas, mais cette instruction donne une couleur de gris. C’est un espace où je donne des instructions.

Lecture

Ensuite: un bouton de lecture, que je peux appuyer pour voir mon dessin. Ici je vois un carré. Alors, vous ne voyez peut-être pas très bien, mais sur la droite il y a un carré gris. Si je baisse les valeurs de ce carré — je mets 150 peut-être — vous allez voir que le gris est un peu plus prononcée. Si je monte jusqu’au maximum — 255 — j’ai du blanc. Si je mets 0 pour la couleur du fond, j’ai du noir.

Écrire, tester

Un espace donc où je peux donner des instructions sur la gauche, puis sur la droite je vois ce que ça me donne.

Console

En bas il y a aussi quelque chose qui existe depuis les débuts dans Processing, qui s’appelle la console. On peut cacher cette chose si elle vous dérange; vous pouvez la cacher si vous voulez avoir un peu plus d’espace d’écriture. Mais ça peut être utile parce qu’il va vous indiquer des erreurs.

Quand on essaie de directement «dessiner un mouton», par exemple… si je ne comprends pas trop ce que je fais, je comprend qu’il faut mettre des parenthèses mais je ne sais pas pourquoi… et j’imite en écrivant le mot dessinerUnMouton() sans dire à quoi correspond «dessiner un mouton» … soyons un peu plus poli, «dessinez moi un mouton»… et bien si j’appuie sur le bouton «lecture», il ne va pas comprendre. Il va me donner les erreurs.

Dans ce cas, la console n’explique pas très bien mes erreurs de script, mais en tout cas si on oublie de donner certaines instructions — par exemple dans le «background()» — il va me dire qu’il s’attendait de voir au moins un argument de couleur dans la description de la couleur de fond. Les explications des erreurs se passent donc en bas dans la console.

Déroulement

C’est à peu près tout. J’ai des «sketches» avec des titres qui vont aller dans mon espace personnel. J’écris les instructions. J’appuie sur lecture et je vois ce que ça donne sur la droite. C’est à peu près tout.

Et tant mieux : il y a des choses plus sophistiqués, qu’on verra après, quand on veut par exemple ajouter des images. Il y a un petit espace que l’on peut ouvrir pour ajouter une image: pour pouvoir dessiner avec une image GIF à la place d’un pinceau noir, blanc, coloré, etc. Il y a des petits espaces pour mettre des médias, pour mettre du code — même des choses plus complexes comme pour séparer le code en plusieurs sous parties.

Conclusion

À la base, le travail dans P5 c’est ce que vous voyez là. J’écris des choses, j’appuie sur «lecture», je regarde ce que ça donne, et j’essaie de comprendre mes erreurs. Voilà à peu près tout ce qu’il faut savoir pour se servir de l’éditeur P5.