Head

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 !

 

* --- *

 

Une des principales limitations de Processing.js (quel que soit le mode de publication choisi) c’est de ne pas pouvoir importer de librairies externes.

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).

Etape 1 : Extraire les classes dans Processing.

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).

Etape 2 : On va maintenant convertir ces classes en Javascript/Mootools !

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…

Pour me (vous) faciliter la vie, j’ai donc pondu un convertisseur Processing -> Js-mootools !

 

 

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à…)

C’est une version beta, vous ne pourrez pas juste copier-coller le code en espérant qu’il marche du premier coup.

Edit : Ceci dit je viens de passer en version 0.3 avec la détection d’un sacré paquet de mots de Processing

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…

Enregistrer