Playing with pixels ! > Pjs #3 : un sketch en plein-écran ?

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 !

* --- *

C’est une des premières choses que j’ai testé après avoir associé JQuery, MooTools et Pjs :

« cette canvas au format limité c’est la plaie, je veux l’afficher pleine page ! »

Alors j’ai testé plusieurs techniques, et ça ne s’est pas fait tout seul !
(j’aurais sans doute moins galéré si j’avais rencontré hascanvas.com plus tôt…)

Piste 1 : CSS, une canvas à 100%…

Verdict : ben ça ne change pas le format du skecth, qui est indiqué via canvas.size(…); dans le skecth Pjs principal.
La canvas fait la bonne taille, mais pas ce qu’il y a dedans…

Piste 2 : après tout on a JQuery, on peut donc faire dans notre sketch :

canvas.size($(document).width(), $(document).height());

Verdict : ça marche (c’est déjà cool), mais du coup si le document n’est pas en pleine-page, le sketch non-plus.
Et puis ça fonctionne seulement au lancement d’application, mais pas ensuite quand on redimentionne la fenêtre…

Piste 3 : ce coup-ci on y va, avec les écouteurs de redimention de JQuery :

function resizePage(){
   canvas.size($('#scene').width(), $('#scene').height());
};
$(window).resize(function(){
   resizePage();
});

Là ça devient efficace : la canvas est à 100% en css, et le pjs à l’intérieur est redimentionné par via JQuery dès qu’il le faut :)

Problème : autant on peut appeler size() plusieurs fois sans problème, autant les propriétés width et height du sketch ne suivent absolument pas, et restent bloquées sur le format du 1er appel à size()…

Et aucun moyen de « forcer » les valeurs de width et height à la main, non-plus…

Solution (ce n’est pas ça qui va m’arrêter) :

puisque width et height sont « avariés », il suffit de ne plus les utiliser !

On va donc créer 2 variables gloables Javascript pour le format, et on remplacera dans le code tous les appels à width par sceneWidth, et height par sceneHeight !

canvas.size(sceneWidth, sceneHeight);

qui s’appuie sur l’écouteur JQuery :

sceneWidth = $('#scene').width();
sceneHeight = $('#scene').height();

function resizePage(){
   canvas.size($('#scene').width(), $('#scene').height());
   sceneWidth = $('#scene').width();
   sceneHeight = $('#scene').height();
};
$(window).resize(function(){
   resizePage();
});

Et le tour est joué côté JS :)

Vous noterez l’apparition d’une div #scene dans le code, pour éliminer le dernier problème : $(document) c’est la taille totale du document, qui peut :
– dépasser le format de la fenêtre (s’il y a un ascenceur), ou
– être plus petit (si la page n’est pas remplie côté html)…

Pour s’émanciper du problème, c’est tout simple commee concept :

on va fixer la taille du body à celle de la fenêtre, ni plus ni moins…

Ca se fait en css, où :
– on fixe les div principale en position:absolute; pour les aligner toutes en haut à gauche
– on ajoute des width/height:100% et de overflow:hidden, et au moins rien ne va déborder !

Et si vous voulez avoir une page « longue » malgré tout (comme sur ce blog), et bien il suffira de placer le code html de la page dans une div, au format 100% elle aussi, mais avec un overflow:auto…
Et le visiteur ne se rendra compte de rien :)

Côté HTML ça donne :

<body>
   <div id="page"></div>
   <canvas id="canvas"></canvas>
   <div id="scene"></div>
</body>

Et côté CSS :

html,body {
 overflow:hidden;
 width:100%; height:100%;
 margin:0; padding:0;
}
body {
 position:absolute;
}
canvas#canvas{
 display:block; position:absolute; width:100%; height:100%;
 z-index:2;
}
#scene {
 display:block; position:absolute; width:100%; height:100%;
 z-index:1;
}
#page {
 display:block; position:absolute; width:100%; height:100%;
 z-index:3;
}

Bon, tout ça est quand-même tiré par les cheveux,

voici un exemple concret qui vous montrera que ce n’est pas si compliqué à mettre en place !
Pjs + JQuery + MooTools pleine page / Télécharger la source

Pjs #3 : un sketch en plein-écran ?