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 !
* --- *
Quel est le problème ?
ProcessingJS c’est super, pour afficher un sketch Processing dans le navigateur.
Mais dès qu’il s’agit d’intégrer un sketch dans un design un peu ambitieux, ça peut devenir nettement plus compliqué…
La preuve live and direct >>
Canvas avec un overlay HTML
Un sketch tout à fait ordinaire, mais avec une div HTML par dessus…
Toutes les interactions souris ont disparu lorsqu’on survole la div !
click, press, release, coordonnées de la souris, etc, dans les choux.
Pas pratique si on veut profiter d’un fond de site en Processing par exemple…
Pas classe.
Le même sketch, mais cette fois-ci il est redimentionné en CSS > width:100%;
Processing.js continue d’afficher le sketch a son format d’origine (celui défini dans le setup(), via size(…)), mais il ne correspond plus au format de la canvas… du coup le contenu est complètement déformé !
Les interactions à la souris en prennent un coup aussi.
Pas classe, pas responsive.
Une solution simple ? jProcessingJS !
Download et installation
jprocessingjs-0.9.min.js [ 3.64 Ko – minifié ]
jprocessingjs-09.js [ 10 Ko – Lisible, commenté ]
Retrouvez aussi les exemples téléchargeables sur GitHub.
Une fois la librairie téléchargée, placez là dans le dossier de votre projet à côté de processing.js, puis ajoutez entre <head> et </head> :
<script type="text/javascript" src="js/jprocessingjs.js"></script>
That’s it !
Une fois le plugin installé, ajoutez directement dans le setup() du sketch :
jProcessingJS(this, {fullscreen:true});
Cette ligne remplace l’instruction size(), que vous pouvez donc retirer.
Pour résoudre ce problème là, toujours une seule ligne de code dans le setup() du sketch :
jProcessingJS(this, {mouseoverlay:true});
Tous les événements souris sont de retour, qu’on soit au-dessus de l’overlay ou pas.
Accessoirement, les événements tactiles sont aussi répercutés par défaut.
Il est possible de les désactiver via :
jProcessingJS(this, {touchenabled:false});
Il suffit d’ajouter directement dans le setup() du sketch :
jProcessingJS(this, {responsive:true});
ou
jProcessingJS(this); // responsive est actif par défaut
Cette ligne remplace l’instruction size(), que vous pouvez donc retirer.
Vous avez donc toute liberté d’écrire un sketch et de changer son format d’affichage simplement en CSS (ici il est à 100%).
Le format du sketch se met à jour dès que la fenêtre est redimentionnée, testez par vous même !
Et on peut évidemment cumuler responsive et overlay…
Encore et toujours une seule ligne de code dans le setup() du sketch :
jProcessingJS(this, {mouseoverlay:true, responsive:true});
ou
jProcessingJS(this, {mouseoverlay:true}); // responsive par défaut
Toutes les interactions souris fonctionnent, et le sketch se redimentionne correctement.
Classe !
Le code et les exemples sont téléchargeables sur GitHub