Creative Coding with P5.js

--- title: Creative Coding with P5.js tags: frontend, javascript, typescrypt robots: noindex, nofollow author: Julien Noyer --- # P5.js Getting Started *Using the metaphor of a sketch, p5.js has a full set of drawing functionality* ![](https://i.imgur.com/YpCHSs8.png) > © [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only --- ## Présentation de la librairie P5.js [P5.js](https://p5js.org) est une librairie qui à pour ambition de rendre accessible et plus lisible la génération de visuels sur une canvas HTML. Nullement réservée à des profils expert, l'objectif de P5.js est de permettre à des designers de débuter dans la création graphique assitée par ordinateur. Très inspirée par le [langage Processing](https://fr.wikipedia.org/wiki/Processing), P5.js est un outil idéal car il permet en plus de la création graphique, d'apprendre des principes qui sont ensuite transposables dans d'autres pratiques. > En savoir plus https://hackmd.io/@teach-supports/HJO_FabhF ## Présentation du répertoire Le projet développé dans ce répertoire à pour but d'explorer les possibilités offertes par P5.js pour la création d'élements graphique. Il aborde certaines notion spécifiques à la librairie, tout en préférent utiliser au maxium les éléments natifs en Javascript pour que l'apprentissage de P5.js puisse être avoir avant tout pour objectif de consolider et renforcer des connaissance en programmation Javascript. ## Explication du code ### Function `setup()` L'objectif de cette fonction est de pouvoir définir des valeurs/variables à utiliser dans le `sketch`. Il s'agit ici d'un principe de base en informatique, tous les programmes ont besoin pour fonctionner d'espace mémoire pour stocker des informations, P5.js intègre avec cette fonction la même structure qu'en Processing. ```js // Declare all the variables at the top document let canvasWidth = null; let canvasHeigth = null; let canvasColor = null; let svgImage = null; // P5.js setup() function setup(){ // Set canvas size canvasWidth = window.innerWidth; canvasHeigth = window.innerHeigth; // Set canvas background color canvasColor = `rgba(100, 100, 100, 1)`; } ``` **Ressources** - [P5.js finction setup()](https://p5js.org/reference/#/p5/setup) - [MDN objet window](https://developer.mozilla.org/fr/docs/Web/API/Window) - [MDN référence couleur RGBA](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba()) ### Function `preload()` Avec P5.js il est possible d'utiliser des `assets` - images, fonts, vidéos, ... - dans les sketchs, mais il faut pour les rendre disponibles les importer dans la fonction `preload()` dont le but est de rendre accessible les assets dans les différentes fonctions de P5.js. La fonction `preload()` est à définir **avant la fonction `setup()`**. ```js // P5.js preload() function preload(){ // Load file svgImage = loadImage('assets/svg/smile.svg'); } ``` **Ressources** - [P5.js fonction preload()](https://p5js.org/reference/#/p5/preload) - [P5.js fonction loadImage](https://p5js.org/reference/#/p5/loadImage) ### Function `draw()` Cette fonction permet de dessiner sur le canvas, et il est très important de comprendre la logique mise en place par P5.js et la plupart des principes d'animations. Pour comprendre cette logique, il faut faire un bon dans le passé, et apprendre comment les premiers dessins animés ont été réalisés. De Disney à Myasaki la technique est la même, plusieurs images s'enchane les une à la suite des autres, créant ainsi une impression de mouvement. La fonction `draw()` de P5.js agit de la m-eme manière, en créant 60 images par seconde. ```js // P5.js draw() function draw(){ // Add background color: color value background(canvasColor); // Add image: image, x, y image(svgImage, 10, 10; } ``` **Ressources** - [P5.js fonction draw()](https://p5js.org/reference/#/p5/draw) - [P5.js fonction background](https://p5js.org/reference/#/p5/background) - [P5.js fonction image](https://p5js.org/reference/#/p5/image) ## Les formes graphiques (shape) Le code précédent permet d'afficher une image de 50x50 pixels à 10 pixel du coin supérieur gauche du canvas. Les `shapes` en P5.js ont tous des propriétés communes, pour les positionner par exemple, c'est pourquoi il est préférable de travailler sur le principe de `class` pour les créer afin de simplifier leur manipulation. ### Classe `Shape` Cette classe permet de définir les valeurs communes à toutes les formes, elle est ensuite étendue aux autres classes qui permettent de générer une forme spécfique. ```js class Shape{ constructor(x, y, width, heigth){ // Use `Vector` to set position this.position = new p5.Vector(x, y); // Set shape width and height this.width = width; this.heigth = heigth; }; } ``` **Ressources** - [P5.js classe Vector](https://p5js.org/reference/#/p5.Vector) - [MDN classe Javascript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes) ### Classe `Ellipse` Cette classe permet de créer une nouvelle forme de type `Ellipse`, elle sert de base pour créer toutes les autres classes pour les différentes formes souhaitées. ```js class Ellipse{ constructor(x, y, width, heigth){ // Use super function to inject Shape constructor values super(x, y, width, heigth); // Set Ellipse colors this.strokeWeight = 5; this.strokeColor = `rgba(255, 255, 255, 1)`; this.fillColor = `rgba(0, 0, 0, 1)`; }; // Method to initiate shape init(){ // Set colors stroke(this.strokeColor) strokeWeight(this.strokeWeight); fill(this.fillColor); // Display shape this.display(); } // Method to display ellipse display() { // Define position mode ellipseMode(CENTER); // Add ellispe in canves ellipse(this.position.x, this.position.y, this.width, this.heigth); }; } ``` **Ressources** - [P5.js fonction stroke](https://p5js.org/reference/#/p5/stroke) - [P5.js fonction strokeWeight](https://p5js.org/reference/#/p5/strokeWeight) - [P5.js fonction ellipse](https://p5js.org/reference/#/p5/ellipse) - [P5.js fonction ellipseMode](https://p5js.org/reference/#/p5/ellipseMode) - [MDN fonction super()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/super) ### Création d'une forme de type `Ellipse` Les deux classes précédemments créées permettent de créer une ellipse, pour les utiliser, il faut dans un permier temps déclarer une variable `mainShape` pour ensuite instancier un nouvel objet depuis la classe `Ellipse` dans la foncion `setup()` de la manière suivante : ```js // P5.js setup() function setup(){ // Set canvas size canvasWidth = window.innerWidth; canvasHeigth = window.innerHeigth; // Set canvas background color canvasColor = `rgba(100, 100, 100, 1)`; // Set mainShape position, width and heigth mainShape = new Ellipse(canvasWidth / 2, canvasHeigth / 2, 30, 30) } ``` **Ressources** - [MDN opérateur new](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/new) La classe `Ellipse` dispose d'une méthode `init()` qui permet de définir les valuers et qui appel une méthode `display()` qui permet quant à elle d'afficher l'ellipse dans le canvas. Nous allons donc utiliser la méthode `init()` dans la fonction `draw()` de la manière suivante : ```js // P5.js draw() function draw(){ // Add background color: color value background(canvasColor); // Add image: image, x, y image(svgImage, 10, 10; // Add mainShape mainShape.init(); } ``` ## Ajouter des fonctionnalités à des formes L'ajout d'une fonctionnalité spécifiques, comme par exemple permettre le déplacement d'une forme, ne peut se faire qu'en intégrant la notion de classe dans les sketchs P5.js. Si cette dernière phrase n'est qu'a moitier vraie, il n'y à en revanche aucun doute sur le fait que les classe sont faites pour générer des objets qui ont des fonctionnalités spécifiques. L'avantage d'avoir travailler avec une classe `Shape` et une classe `Ellipse` - et de décliner autant de classe que de forme voulue - est qu'il est possible de créer des fonctionnalités globales pour toutes les formes, et de fonctionnalité spécifique par forme. Il s'agit ici de structuration de code en Javascript, P5.js peut éventuellement vous proposer une méthodologie différentes. Pour ajouter une fonctionnalité à un objet instancier depuis une classe, il faut ajouter une ùéthode dans la classe et y intégrer le code voulu. Dans notre exemple, nous allons faire en sorte de déplacer `mainShape` vers la droite à chque fois qu'une touche du clavier et pressée. Nous allons ajouter cette fonctionnalité sur la classe `Shape` pour plus de lisibilité mais vous pouvez decider de l'ajouter uniquement sur `Ellipse` ou sur une autre forme que vous aurez créé. ```js class Shape{ constructor(x, y, width, heigth){ // Use `Vector` to set position this.position = new p5.Vector(x, y); // Set shape width and height this.width = width; this.heigth = heigth; }; // Method to move shape move(){ // Add 5 pixel to X position value this.position.x += 5; } } ``` Une fois cette méthode ajoutée sur la classe `Shape`, il est possible de l'appeler dans la fonction `draw()` de la manière suivante : ```js // P5.js draw() function draw(){ // Add background color: color value background(canvasColor); // Add image: image, x, y image(svgImage, 10, 10; // Add mainShape mainShape.init(); // Bind keypress event if(keyIsPressed){ // Move shape by calling move() shape method mainShape.move(); }; } ``` **Ressources** - [P5.js varaibles keyIsPressed](https://p5js.org/reference/#/p5/keyIsPressed) - [MDN événement keypress](https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event)