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 !
* --- *
Il y a quelques exceptions, comme les toxiclibs.js, ou Tween.lib (une librairie de tweens pour processing.js, je reviendrai sur le sujet dans un autre article), mais à l’heure actuelle ça reste très limité.
Ce que je propose, c’est donc de vous expliquer comment partir d’une librairie Processing, pour la décliner de Java en Javascript, pour la rendre compatible avec Processing.js…
Ca ne fonctionnera sans doute pas avec toutes les librairies (oubliez la kinect et l’open GL évidement), mais j’ai mené plusieurs tests à partir des lib generativedesign, que j’ai réussi à utiliser en ligne, avant de l’abandonner pour du fait-maison (je suis comme ça).
La librairie generativedesign met à disposition ses sources, dans le dossier libraries/ de Processing.
Ce sont des classes Java, mais il suffit de les copier-coller dans des onglets de Processing pour réussir à les utiliser, sans plus avoir besoin de faire aucun import au début du sketch…
import generativedesign.*;
Une fois que c’est fait, vous n’avez plus une librairie importée, mais un ensemble de classes Processing adaptées à votre projet (inutile de vous occuper des classes dont vous ne vous servez pas).
Les changements syntaxiques sont basiques (voir l’article sur la question), mais à l’échelle d’une classe de 500 lignes c’est tout de suite pénible…
On sélectionne un fichier .pde à uploader; il contient n’importe quel code Processing (avec ou sans classes), et il fait les changements principaux de manière automatique :
– déclarations des classes et des fonctions en MooTools
– syntaxe pointée sur la canvas pour (presque) tous les « mots » de Processing (ellipse() -> pCanvas.ellipse()…)
– switch des virgules-points virgules suivant qu’on est dans une classe ou pas…
Une fois cette étape automatique accomplie, il est aussi possible de surligner les variables « locales » dans le corps du texte, pour automatiser l’ajout de this. sur cette variable dans tout le document (ce qui est requis avec MooTools)…
Un bon exercice sur les expressions régulières Php, que j’avais justement apprises en novembre :)
(d’ailleurs il y a un très bon tuto ici sur les expressions régulières, et on peut approfondir la question là…)
Il vous restera à débugger et corriger le résultat vous-même :
un débuggeur Javascript (j’utilise celui de Firefox) vous indiquera très
facilement les instructions qui posent problème, le plus souvent des
oublis de « this. » devant les variables locales… et dont
Javascript ne sait pas quoi faire.
Un outil pas terminé, mais déjà un sacré gain de temps quand-même !
Note : je ne conserve aucun des codes uploadés, ils sont supprimés dès
qu’il sont été lus, histoire de ne pas encombrer mon serveur…