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 !
* --- *
Update : on peut faire ça beaucoup plus simplement via :
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 !
Ma solution bien plus complexe (et superflue) :
L’astuce du fond transparent a déjà fait le buzz, et on en trouve un bel exemple sur le site openprocessing.org (merci Makio135).
Oui, mais ça c’est en mode « fichier .pde lu dans une canvas », pas en full-Javascript / API mode…
Si vous codez en Javascript directement, pour bénéficier de jQuery par exemple, la syntaxe est un peu différente.
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);
};
};
On trace donc un rectangle, transparent, placé en haut à gauche et qui fait la taille de la scène, et le tour est joué !
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.