Processing JS permet d’utiliser le langage Processing pour créer des graphismes web 2D ou 3D grâce aux canvas HTML5.
Pourquoi utiliser les canvas
Les interactions avec le DOM sont connues pour être lentes et c’est pour cette raison qu’on essaie en général d’en limiter le nombre. Cependant lors de la création de graphismes web on peut rapidement avoir besoin de modifier un nombre important d’éléments des dizaines de fois par seconde afin d’avoir un rendu fluide et agréable à l’œil.
C’est pour répondre à cette problématique que les canvas HTML5 ont été créés. Ils sont optimisés pour le graphisme et permettent de n’avoir à interagir qu’avec un seul élément du DOM tout en en affichant un nombre important.
Processing JS
Originellement développé par Ben Fry et Casey Reas, Processing a débuté en tant que langage de programmation open source basé sur le Java afin d’aider les communautés d’art électronique et de design visuel à apprendre les bases de la programmation. Processing JS permet au code Processing d’être exécuté par n’importe quel navigateur compatible avec le HTML5.
Comment utiliser Processing JS
Afin d’utiliser Processing JS il suffit de télécharger la dernière version et de l’ajouter en tant que script, puis de créer un canvas avec un attribut data-processing-sources précisant le script à exécuter, et enfin d’écrire son script en Processing ou en Javascript.
Le html comprendra donc les éléments suivants :
<script src="processing.js"></script>
<canvas data-processing-sources="anything.pde"></canvas>Exemple de code
// Variables globales
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Initialise le canvas
void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = height / 2;
nX = X;
nY = Y;
}
// Boucle principale de rendu
void draw(){
radius = radius + sin( frameCount / 4 );
// Trajet du cercle vers la nouvelle destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Remplit le canvas de gris
background( 100 );
// Définit la couleur de remplissage (bleu)
fill( 0, 121, 184 );
// Définit la couleur de bordure (blanc)
stroke(255);
// Dessine le cercle
ellipse( X, Y, radius, radius );
}
// Définit la nouvelle destination du cercle
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}