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 !
* --- *
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 {...
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.
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.
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(){ ... } });
– 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…
– 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()…
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 !…
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 !