Post-it

Le genre de truc qu’on a facilement envie de faire quand on se met à P5js, mais on ne sait pas trop par où commencer… et Google n’est pas d’une grande aide sur la question !

Et bien c’est possible !
Voici un exemple fonctionnel, et le zip avec la source de cet exemple.

P5js dispose des fonctions windowResized() et resizeCanvas(), et met aussi à disposition les variables windowWidth et windowHeight qui contiennent les dimensions de la fenêtre, à jour.

Pour superposer la canvas responsive et le html, l’astuce se trouve donc :

– dans le code HTML, où il faut mettre tout le contenu HTML dans une div principale (ici avec l’id « contenu »)

– dans la feuille de style

canvas { position:fixed; top:0; left:0; z-index:1; }
#contenu { position:relative; z-index:2; }

– dans le setup() du sketch :

createCanvas(windowWidth, windowHeight);

– et dans le corps du sketch en ajoutant un bloc

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

Et voilà !

Le 04 / 11 / 2015