Objectif

Pour dessiner avec du code nous allons utiliser l’environnement de programmation P5.

Browser Internet

Comme vous pouvez voir sur le bureau de mon Mac, pour utiliser P5 on peut utiliser n’importe quel navigateur de base: Firefox, Safari, Chrome. Si vous voulez un minimum de problèmes vous pouvez utiliser Chrome. Par contre: Chrome c’est Google, donc ça vous surveille bien. Mais dans le même logique, il a le moins de permissions nécessaires pour activer le son, par exemple, ou d’autres fonctionnalités. C’est comme vous voulez.

Editor.p5js.org

Pour utiliser P5, ici je vais utiliser Safari. J’ouvre Safari et je peux aller directement sur P5js.org. Sur son page d’accueil, vous allez voir un bouton pour ouvrir un éditeur en ligne qui vous permet directement de l’utiliser en ligne.

Vous pouvez également mémoriser ce lien et le mettre dans vos raccourcis: editor.P5js.org. Sinon, ouvrez n’importe quel moteur de recherche et cherchez « editor p5js » et vous tomberez d’office sur cet éditeur en ligne qui nous permet de créer des dessins sur ordinateur.

Bouton « Lecture »

Voici l’idée de P5 : je vais taper les mots dans mon navigateur, et pour activer ces instructions que j’écris, je vais appuyer sur bouton «lecture». Elles vont se dessiner dans la fenêtre en face. On trouve aussi des modes de présentation qui nous permettent même de dessiner en plein écran, sans les éléments de l’interface, pour faire par exemple une installation.

Compte personnel

Pour pouvoir sauvegarder son travail on va créer un compte personnalisé qui est gratuit et on a gratuitement jusqu’à 250 Mo d’images et d’autres médias qu’on peut sauvegarder sur les serveurs de l’organisation qui héberge le site P5js. Pour créer un compte vous avez en haut à droite soit Log in, soit Sign Up. Je suis désolé : il y a différentes langues mais il n’y a pas encore la langue française. Pour créer un compte — moi c’est abstractmachine, il voit qu’utilise déjà ce nom, car j’ai déjà créé un compte — vous mettez un nom qui est votre nom d’utilisateur ou d’utilisatrice, vous inscrivez votre email et un mot de passe. Vous allez devoir confirmer aussi votre mot de passe et vous vous faites Sign Up.

Vous avez aussi la possibilité si vous avez un compte GitHub ou Google d’utiliser vos comptes GitHub ou Google.

Bonjour

Une fois que vous avez créé ce compte vous allez voir une page qui ressemble à celle-ci où il suffit de rentrer votre nom et vous rentrerez dans votre propre espace de travail. On voit ici qu’on est toujours en anglais — «Hello, abstractmachine» — P5 me reconnaît, et me permet d’accéder directement en ligne à mes «sketches», c’est-à-dire mes «croquis», que je vais dessiner avec P5.

Collections

Je peux aussi créer des «collections» par exemple, pour créer une catégorie des différents types de dessin. Par exemple, on pourrait créer une collection «Temps» ou «Stratification» pour ces trois jours de cours. Et on peut aussi ajouter des images comme je disais. On peut se déconnecter, par exemple pour se connecter sur un autre compte.

Une fois que vous avez créé votre propre compte et que la machine vous reconnaît vous avez la possibilité de sauvegarder et d’ouvrir des exemples.

Carnet

J’attire votre attention sur sur ce titre qui est donnée par défaut. Chaque fois que l’on crée une nouvelle fenêtre dans P5, il vous donne un titre par défaut. L’idée c’est de pouvoir très rapidement ouvrir l’éditeur P5, comme un carnet qu’on aura toujours avec nous quand on est artiste — j’espère. Moi, en tout cas j’ai toujours un carnet que j’ouvre pour pouvoir bidouiller et mettre mes différentes idées rapidement, faire des dessins, essayer des choses. Voilà un petit objet que je suis en train par exemple de desinner. Et bien, c’est la même idée : c’est un carnet P5, où l’idée c’est de pouvoir ouvrir une page très vite et commencer à dessiner dedans. Mais au lieu de dessiner avec un stylo, on dessine avec un clavier d’ordinateur, on tape des instructions, et ça génère du dessin.

Comme c’est un espace de dessin rapide pour tester des idées, et pour perdre le moins de temps possible, il vous crée une espèce de petit poème, avec deux mots choisis au hasard ici par exemple ça m’a choisi «Careful entrance». Si je n’aime pas ce titre, je peux cliquer dessus et mettre «Mon sketch», «Mon dessin», «ChoseIncroyable», … Je peux donner le titre que je veux et quand je sauvegarde mon sketch, il dit «Autosave enabled». Ça veut dire qu’il va maintenant sauvegarder automatiquement ce sketch «ChoseIncroyable» dans mon espace «abstractmachine» lorsque je change le programme.

Si je regarde par exemple ici, dans le menu « file > open », je vais voir que «ChoseIncroyable» a été maintenant sauvegardé dans l’espace de mes sketches. Vous voyez aussi l’heure à laquelle je suis en train de créer ces exemples. Je sais pas si vous avez remarqué, vous avez aussi un bouton ici «Back to Editor» qui me permet de revenir sur l’espace d’écriture.

Expérimentations

L’idée c’est qu’on créé un compte sur le site P5js.org, et dès qu’on veut dessiner, on ouvre un navigateur où qu’on se trouve. On peut être à l’école, on peut être chez soi, on peut être dans son atelier d’artiste, on peut être chez un ami, dans une bibliothèque : on ouvre un navigateur on va sur editor.p5js.org, je me connecte, et tout de suite nos sketches sont là.

Si on est dans une bibliothèque, il faut peut-être se déconnecter quand on a fini de dessiner.

Conclusion

Ça c’est l’explication sur comment créer un compte sur P5.js, pour pouvoir dessiner avec des instructions en programmation, du code, on peut appeler ça comme on veut. En tout cas, dessiner de manière algorithmique avec avec un langage qui s’appelle « Processing », pour lequel on utilise cet editor P5.js.