Pjs #2 : JQuery pour sortir de la canvas…

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 !

 

* --- *

 

Processing.js est basé sur un schéma de fonctionnement linéaire du genre :

Depuis Javascript, on va donc commander une canvas HTML5 par l’intermédiaire de Processing.js; ça marche bien, mais dans un seul sens…

Il m’est tout de suite venu à l’esprit qu’en passsant en full-Javascript et en y ajoutant JQuery (et MooTools pour les classes), on pouvait potentiellement arriver à un schéma bien plus intéressant, où tous les éléments de la page pourraient interagir :

Bonne nouvelle : c’est complètement ça :)

Avec un peu d’astuce (toujours des astuces), il devient tout à fait possible d’échanger dans les 2 sens entre la canvas Pjs et le « dom » : balises html, css, etc…

Nos balises HTML peuvent donc piloter un sketch Processing.js, qui lui-même peut piloter le dom HTML  ou le CSS.

 

Reste un problème :
Comment faire cohabiter JQuery  et MooTools, qui utilisent tous les 2 les $(…) pour sélectionner du contenu html ?…

Le sujet est bien documenté :
http://davidwalsh.name/jquery-mootools
http://api.jquery.com/jQuery.noConflict/
Et il y a aussi la possibilité d’utiliser jQuery(…) au lieu de $(…).

Ce sont des solutions techniques valables, mais trop lourdes à mettre en place, et qui demandent de changer ses habitudes d’écriture : on perd tout l’avantage d’une syntaxe proche de celle de Processing et du JQuery habituel.

J’ai donc adopté une solution bien plus simple, et sans doute plus pertinente !

A partir du moment où on n’utilise que le moteur de classes de mootools, pourquoi importer le reste (voir l’article Pjs #1 sur le sujet) ?

En important seulement cette partie-là de MooTools, et rien d’autre, il semble qu’on évacue complètement la question : $(…) fait nativement appel à JQuery, et je n’ai constaté aucun conflit dans mes travaux ultérieurs :)

Ca tombe bien, c’est un peu ce dont on avait besoin pour un framework HTML5 à base de Processing.JS + JQuery + MooTools !

 

Processing.js + JQuery 1.7.1 + MooTools Class Core Only
= Cohabitation parfaite !

 

Pour entrer dans la pratique, voici 2 exemples avec codes sources téléchargeables, et commentés :

1. Processing.js qui pilote des éléments de formulaire html
   J’ai toujours rêvé de faire ce genre de truc :)
   > Télécharger le code source
2. Piloter Processing.js depuis des boutons html
   Ce qui ouvre la perspective de librairies JQuery pour faire ce que fait ControlP5 côté Processing…
   > Télécharger le code source

 

Bref, tout ça fonctionne très bien, et ça ouvre des perspectives expérimentales alléchantes :)
Tenez-moi au courant si vous créez un formulaire de contact dont il faut attraper les éléments avant de pouvoir s’en servir, par exemple !