Content

Si vous arrivez sur cette page, c’est que vous connaissez sans doute Processing.

Pour moi la découverte est très récente, j’ai fait mes premiers pas sur le sujet lors du workshop « Master Class » de Processing Rennes, les 4 et 5 novembre 2011.

Une découverte enthousiasmante, puisque Processing me permettait enfin de réaliser des choses que j’essayais de faire depuis des année avec Flash (visualisation de données, moteurs physiques, …).
Paradoxalement, Processing m’a permis d’apprendre en très peu de temps des techniques que je pourrais maintenant utiliser avec Flash sans difficulté.

Si vous connaissez Processing, peut-être n’avez-vous pas entendu parler de Processing.js (Pjs en raccourci).

Il s’agit d’une initiative américaine (une université + la fondation Mozilla) qui se propose de décliner Processing pour les navigateurs web, en se basant sur Javascript plutôt que sur Java.

L’idée est simple : vous écrivez un sketch Processing comme d’habitude, et plutôt que de le publier en Java (aucun internaute « ordinaire » n’a le plugin correspondant) vous l’insérez dans une page html simpliste, qui l’affiche grâce à la librairie Javascript Processing.js.

Plus de pb de plugin, et c’est transparent pour le visiteur.
Processing.js utilise une balise HTML5 « canvas » pour afficher votre sketche comme dans Processing, et tous les navigateurs récents sont compatibles : Firefox (à partir de la version 3.5), Safari, Chrome, Opéra, et même IE9.
Evidement pas IE8-7-6, mais il ne fallait pas rêver, et puis Microsoft vient de s’excuser pour ces navigateurs-là, alors…

Cette version Javascript de Processing a quand-même quelques limitations sérieuses, qui semblent avoir restreint son utilisation jusqu’ici :

pas moyen d’utiliser des librairies (même si certains commencent à décliner leurs librairies en Javascript, comme les ToxicLibs)
– la gestion des typos n’est pas du tout au niveau de celle de Processing (voire inexistante)
– une gestion des images à charger depuis le serveur pas souple du tout (il faut manuellement indiquer les images à précharger dans des commentaires spéciaux au début du document…)
– pour la même raison, afficher des sprites animés n’est pas impossible, mais plutôt périlleux…
– votre sketche est « bloqué » dans sa canvas, et ne peut interagir avec le reste de la page web
– le format d’affichage est fixe, et suit ce qui est indiqué dans le sketch
– comme dans Processing, pas facile de faire des « loadMovie » pour sauter d’un sketch à l’autre

La documentation est aussi très succinte, malgré quelques exemples sympas…

Ce n’est que fin novembre que je me suis penché sur Processing.js, sans trop d’espoirs… mais en tant que webdesigner l’initiative m’intéressait quand-même pas mal.

La page Learning documente succintement 3 façons de publier ses sketches :

– la première consiste à associer un sketch Processing (fichier .pde) avec la canvas pour l’interpréter grâce à Processing.js
(plus d’infos sur le blog de Joey Cadle)
– la deuxième consiste à saisir son code Processing dans une balise html <script type= »application/processing »>, ce qui revient à peu prêt au même
– et la 3ème : « Writing Processing code with JavaScript » ou « API Mode« … et c’est là que ça devient intéressant !

Quelques exemples pratiques : http://processing-js.github.com/processing-mobile/examples/processing-and-js/

Processing.js est donc codé en Javascript, puisque c’est en Javascript qu’on commande les balises HTML5 <canvas>…

Avec cette technique on peut donc écrire son sketch en Javascript directement, mais un Javascript « augmenté », avec en plus du Javascript habituel tous les « mots » du langage de Processing.

L’astuce Javascript est toute simple : à partir du moment où on s’adresse à la canvas on a tout Processing à disposition…

//canvasObj = document.getElementById("canvas1");
//canvas = new Processing(canvasObj, procFunc);
canvas.ellipse(...);

qui équivaut à

ellipse(...);

en Processing « pur ».

 

Ce schéma met en valeur un autre point très intéressant : Processing.js devient ainsi un « intermédiaire » pour créer de l’HTML5 en Javascript… sans passer par la syntaxe officielle Javascript/HTML5.
Une possibilité de créer des applications HTML5 pointues, sans même savoir comment on est sensé piloter de l’HTML5, quoi.

Un Javascript augmenté, donc, avec la puissance des <canvas> HTML5, et les fonctionnalités et l’aisance de Processing…

mais pourquoi seulement de Processing ???

Pourquoi ne pas y ajouter JQuery par exemple, pour prendre le contrôle du DOM, et créer une vraie interaction entre la canvas Processing et le reste du document HTML ?
Et une librairie de Tweens, et que sais-je encore…

Est-ce que ça ne nous donnerait pas un Javascript super-boosté, avec les avantages de Processing, la pluridisciplinarité de JQuery (et de ses centaines de modules accessibles), et la souplesse de syntaxe du Javascript ?

C’est à peu prêt ce que je me suis dit au bout de 2h d’étude sur le sujet, et je me suis aussitôt lancé dans une exploration des possibilités offertes :)
J’ai procédé par paliers, sans à priori, en me disant que j’allais de toute évidence rester bloqué rapidement…

Je me trompais complètement, et j’ai maintenant suffisamment avancé sur le sujet pour vous dire ceci :

On peut faire sauter toutes les limitations de Processing.js avec pas mal d’astuce et de Javascript (et peut-être même un peu de Flash s’il le faut), et en cours de route j’ai découvert des possibilités passionnantes auxquelles je n’avais pas pensé de prime abord.

 

Bonne lecture !