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 !
* --- *
pjs.draw = function(){ // black background // pjs.background(0); // transparent background ! pjs.background(0, 0); pjs.ellipse(250, 50, 100, 100); };
Le deuxième zéro étant l’alpha du background… comme indiqué dans la référence de Processing.js.
Argh.
Merci à Vincent Dubois @Vainzou pour son tweet qui m’a fait mal !
Oui, mais ça c’est en mode « fichier .pde lu dans une canvas », pas en full-Javascript / API mode…
Processing.js ne propose pas de fond transparent par défaut, pour
cela il va falloir s’adresser directement à la canvas, en contournant
Processing.js.
Votre objet Pjs contient un objet qui s’appelle externals, et qui va nous permettre de contacter la canvas et son contexte directement, via la syntaxe html5 « normale ».
Ce qui nous donne :
function pjsCore(pjs) { pjs.setup = function(){ pjs.size(350, 800); pjs.frameRate(25); }; pjs.draw = function(){ // black background // pjs.background(0); // transparent background ! pjs.externals.context.clearRect(0 , 0, pjs.width, pjs.height); pjs.ellipse(250, 50, 100, 100); }; };
Je m’en suis servi pour développer ce jeu, car dans le cas d’un background fixe, il est beaucoup plus économe de placer l’image de fond en CSS que de la réafficher à chaque cycle d’exécution dans la canvas :
La canvas Processing.js s’occupe uniquement d’afficher les éléments mobiles, et c’est un gros gain de temps d’exécution…
De même, tous les éléments de menu sont html/css, placés devant la canvas, afin d’éviter de devoir les réafficher 25 fois par secondes.