Processing et P5.js, Les deux langages sont assez proches, mais on trouve quelques différences importantes à prendre en compte :
- Pour déclarer des fonctions que ce soit la fonction setup, draw ou ses propres fonctions, en processing on écrit void.
Par exemple : void setup()
En P5.js on écrira function à la place de void par exemple function setup()
- Dans processing les variables sont typées, c’est à dire que l’on définit la nature que peut prendre une donnée d’une variable.
Par exemple, pour déclarer une variable x contenant un nombre entier, on va écrire : int x; pour déclarer une variable x contenant un nombre à virgule (flottante), on va écrire : float x;
En P5.js, le type de variable n’est pas spécifié et on écrit toujours :
var x; pour déclarer une variable x quelque soit son type de donnée - 5.js permettant de toucher ou créer d’autres éléments HTML que le canvas de dessin, la fonction pour définir la zone de dessin est size() dans processing et createCanvas() dans P5.js.
- P5.js dispose d’une méthode de chargement preload() qui permet de charger des éléments avant le lancement de la fonction setup.
- La fonction mousePressed utilisée en Processing est remplacée par mouseIsPressed en P5.js
- En complément des évènement souris, P5.js dispose d’évènements touch pour les écrans tactiles :
mouseX ~ touchX
mouseY ~ touchY
mousePressed() ~ touchStarted()
mouseDragged() ~ touchMoved()
mouseReleased() ~ touchEnded()
touches[] - Les fonctions push/popMatrix et push/popStyle() utilisées dans processing sont remplacées simplement par les fonctions push et pop en P5.js
- La fonction println permet d’écrire dans la console en langage Processing, dans p5.js, on utilise print() ou console.log() pour écrire dans la console js du navigateur
- P5.js est moins riche que Processing à ce jour. Par exemple, on ne trouve pas de PShape
Inspiré de l‘article de Lauren McCarthy