Pjs #11 : Instancier un sketch via jQuery

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 !

 

* --- *

 

Pour instancier un sketch Processing.js (c’est à dire lier une canvas html5 et la fonction principale de votre sketch via Processing.js), c’est simple et bien documenté sur le site Processing.js.

Il suffit de faire :

pCanvas = document.getElementById("canvas1");
pjs = new Processing(pCanvas, pjsCore);

 

Sauf que :
– je ne me souviens jamais de la syntaxe…
– on se retrouve avec la canvas dont l’identifiant est « canvas1« , les variables pCanvas, pjs et pjsCore (enfin le nom de votre fonction principale), et c’est pas clair…
– est-ce que pjs et pCanvas on à voir avec le « pjs » qu’on retrouve dans le sketch ? pas clair…

 

Il est donc tout à fait possible de faire ça en 1 seule ligne de jQuery, comme suit :

sketch1 = new Processing($('#canvas1').get(0), pjsCore);

L’actuce c’est le .get(0), qui permet d’obtenir l’objet canvas « natif » du Javascript à partir de l’objet jQuery (qui contient plus de choses).

 

Bon, c’est pas encore complètement digeste, alors pourquoi ne pas passer par un petit plugin jQuery réutilisable ?

jQuery.fn.processing = function(sketch){
    return new Processing(this.get(0), sketch);
};

qu’on utilisera comme suit :

sketch1 = $('#canvas1').processing(pjsCore);

ou même tout simplement :

$('#canvas1').processing(pjsCore);

si vous n’avez pas besoin de la variable en sortie, ce qui est le cas la plupart du temps…

Plus besoin de rien retenir !