Head

[ Article ] dans Processing.JS, le [ 20/12/2011 ]

Content

Edit 2017 : Tout ça c'est dépassé depuis longtemps, maintenant il y a p5js (et c'est super) !

Ah et pour bien démarrer avec p5.js, voici des exemples commentés !

 

* --- *

 

Premier problème pour utiliser Processing.js en « API mode » (full Javascript) :
Où sont passées les classes de Processing ?

La documentation officielle n’aborde même pas le sujet, et la démo s’en passe tout simplement… et impossible d’utiliser la déclaration d’une classe via l’objet canvas/processing.js, du genre

canvas.class {...

 

Hors, Javascript ne propose aucun système de classes en natif…

Le sujet est bien documenté côté Javascript, et j’ai trouvé plusieurs propositions pour s’approcher au mieux d’une vraie classe :
http://geotribu.net/node/2
http://www.ligams.com/Publications/Javascript/POO-Creer-une-classe-en-Javascript

Tout ça c’est très bien, mais bien loin de ce qu’on avait dans Processing… et ça pose de gros problèmes pour recycler un sketch Processing.

Alors pourquoi ne pas se tourner vers MooTools ?

Mootools est une librairie Javascript concurente de JQuery, mais qui pour le coup dispose d’un moteur de programmation orientée objet très performant.

Mieux : MooTools propose de télécharger seulement des parties de la librairie.

Ainsi on peut extraire juste le moteur de Programmation Orientée Objet !
Le fichier correspondant pèse seulement 13 Ko… si vous avez le flemme de le générer vous-même sur le site officiel, voici un lien direct pour le télécharger.

Une fois importé la librairie JS dans votre page html, on dispose alors d’une syntaxe de classes très similaires à celle de Processing, en plus souple :

Dans Processing :

class Snake {

float x, y, vitx, vity, accx, accy;

Snake(float _x, float _y){
   x = _x;
   y = _y;
   vitx = 0;
   vity = 0;
}

void drawSnake(){
   ellipse(x, y, 20, 20);
}

void pulse(){
   ...
}
}

En Javascript, avec le core object de MooTools :

Snake = new Class({

initialize : function(_canvas, _x, _y){
   this.canvas = _canvas;
   this.x = _x;
   this.y = _y;
   this.vitx = 0;
   this.vity = 0;
},

drawSnake : function(){
   this.canvas.ellipse(this, this.y, 20, 20);
},

pulse : function(){
   ...
}
});

 

Contraintes par rapport à Processing :

– nécessité de passer par this. pour toutes les variables « locales »
– la fonction de création de l’objet s’appelle nécessairement initialize() (ce qui n’est pas bien gênant, on l’appelle malgré tout en faisant : truc = new Snake(…);)
attention aux virgules après chaque fonction
– il faut impérativement indiquer la canvas sur laquelle on veut agir en paramètre d’initialize()… par la suite, on va toujours passer par this.canvas pour accéder aux « mots » de Processing.
Au départ vous rencontrerez très certainement des bugs à cause de ça (c’est dur de changer ses habitudes de programmation), mais ça se règle très bien avec la console d’erreur de Firefox par ex, qui vous signalera tous les mots de Processing que vous avez oublié de lier à la canvas correspondante…

Avantages sur Processing (car il y en a !) :

nul besoin de typer ses variables
– possibilité d’accéder très facilement aux variables globales (il suffit de se passer de this.)
nul besoin de créer/déclarer ses variables en début de classe
– mieux : on peut créer de nouvelle variables locales à tout moment, dans n’importe quelle fonction de la classe par exemple, sans avoir à les déclarer dans initialize()…

En gros : les avantages des classes Processing, avec la souplesse d’écriture qu’on avait en actionscript 2 par ex :)

Les développeurs vont râler, mais c’est un vrai bonheur pour les bidouilleurs éclairés !
La solution est vraiment convaincante à l’usage, et on peut aussi insérer du JQuery dans les classes en question, sans aucun conflit avec JQuery (je reviendrai sur le sujet dans un prochain article).

Voilà une astuce vraiment précieuse, et qui rend tout le reste possible !…

Et pour conclure, voici mon premier essai de Pjs avec les classes Mootools, et vous pouvez télécharger le code source du projet ici; j’ai tout commenté pour moi en cours de route, donc c’est idéal pour vous mettre le pied à l’étrier !

N’hésitez pas à publier des liens vers vos essais dans les commentaires :)

 

Et un peu de pub pour Romain / UBI Dreams, qui m’a initié le premier à cette astuce, sur un précédent projet de jeux-vidéos-Javascript-pour-mobiles… merci Romain !

Enregistrer