Content

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é…

Par défaut un sketch ProcessingJS n’est pas responsive, ce qui rend compliqué de l’afficher en plein écran.
Par ailleurs si vous placez un overlay HTML au-dessus de votre sketch, vous allez perdre toutes les interactions souris/tactiles !

 

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 !

Sketch fullscreen !

 

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 la démo fullscreen, ça se passe ici !

 

Canvas avec un overlay HTML

 

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});

 

Sketch responsive

 

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

https://github.com/GildasP/jProcessingJS