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 !

 

* --- *

 

Le site officiel de Processing.js est très imprécis sur la compatibilité des navigateurs, en particulier par rapport aux numéros de versions des navigateurs…

Pour démarrer il convient donc de réunir des infos à jour sur le sujet.

Le site CanIUse.com est très complet, et référence toutes les compatibilités de la plupart des balises HTML5 récentes, ou CSS3.
Ce qui nous intéresse le plus, ici, c’est la balise canvas dans laquelle on « joue » Pjs :

http://caniuse.com/#search=canvas

 

Il y a aussi le site html5demos qui est assez clair sur la question…

D’autre part, il existe des outils de développement très pratiques, pour tester vous-même différentes versions des navigateurs.

J’utilise en particulier :
IETester, qui permet de faire tourner toutes les version d’Internet Explorer – et on a des surprises sur les anciennes version…
Utilu Firefox Collection, pour faire de même avec Firefox

Je vous recommande chaudement ces 2 outils si souhaitez maîtriser la compatibilité de vos sites web en conditions réelles, au-delà de la théorie…

 

Voici mes conclusions concernant les compatibilité avec Processing.js :
Firefox à partir de la version 3.5
Chrome toutes versions (non-vérifié)
Safari toutes versions (non-vérifié)
Opéra toutes versions (non-vérifié, mais ça marche très bien sur la dernière)
IE à partir de la version 9 seulement…

Côté IE, en théorie on devrait pouvoir fonctionner avec IE8 et les ExCanvas, mais en pratique il y a trop de fonction de pjs qui ne sont pas supportées.

J’ai réussi à trouver un Processing.js modifié pour ça, mais ce n’est pas convaincant; si certains sont intéressés je pourrais publier quelque chose là-dessus, car c’est très dur de trouver les infos en question.

Une note positive quand-même : Microsoft vient justement d’annoncer une mise à jour automatique de IE8 à IE9 pour tous les Windows 7… l’avenir se présente donc bien :)

Un bilan très positif, je trouve, en tout cas c’est mieux que ce que j’avais espéré initialement.
Le plus étonnant, c’est que je n’ai pas noté de ralentissements notables sur d’anciennes versions de Firefox par exemple.

 

Néanmoins les incompatibilités sont suffisamment courantes pour se poser la question : et qu’est-ce qu’on fait quand le navigateur n’est pas compatible ?
Et qu’est-ce qu’on affiche, et comment on switche du mode « pjs » au mode « nopjs » suivant le navigateur ?

Voici l’optique que je propose :

1. on détecte en tout premier lieu la version du navigateur, ensuite…

2. si le navigateur n’est pas compatible avec Pjs : on affiche une image fixe qui évoque le projet Pjs, on affiche une div #nopjs prévue à cet effet avec un message d’avertissement, et on ne charge pas la librairie Pjs.
Pourquoi ne pas charger la librairie ? et bien parce qu’elle a toutes les chances de provoquer une erreur de script, qui va empêcher qu’on puisse utiliser JQuery pour une mise en page quand-même maîtrisée… et puis les messages d’erreur à l’écran, c’est pas classe.

3. si le navigateur est compatible : on cache l’avertissement, on charge la librairie dynamiquement (en Javascript), et on attend que la librairie soit chargée pour exécuter notre sketch dans la canvas…

Bien tiré par les cheveux, hein :)

Certes, mais JQuery à tout prévu !
Ainsi on a la fonction $.getScript(), assez démente, qui permet de charger du code Javascript sans utiliser de balise <script>, et de l’interpréter aussi sec !
Mes tests sont très concluants, la fonction marche très très bien (malgré un message « mal formé » en local, avec la console d’erreur de Firefox, qui disparait en ligne…).

D’autre part c’est avant une fonction JQuery, on peut donc lui dire d’exécuter du code une fois le code chargé et interprété seulement :)

On peut même en imbriquer plusieurs, pour charger une séquence de fichiers Javascript, seulement si les conditions requises sont respectées.

Concrètement, on a donc besoin de plusieurs choses pour faire ça :

1. Une fonction Javascript de détection du navigateur.
Je me suis basé la fonction bien fichue de Peter-Paul Koch, que j’ai faite évoluer pour en faire une mini-librairie dédiée à Pjs : pjsNavigatorDetector-beta.js.

Une fois la librairie chargée dans le header (via une balise <script>), on peut accéder à la fonction matchPjs(), qui renvoie tout simplement true ou false, suivant que la config détectée est compatible avec Pjs :)
La librairie fonctionne très bien (aucune incompatibilité constatée sur aucun navigateur d’aucune version encore utilisée), mais c’est une beta : je dois encore régler le truc pour les versions de firefox entre 3 et 4 (la 3 ne marche pas, la 3.5 si); à part ça c’est parfait.

2. Changer la structure d’import des librairies Javascript.

En particulier, on ne va plus importer Processing.js depuis une balise <script>.

<script type= »text/javascript » src= »lib/processing-1.3.6.min.js »></script>

A la place on va transformer la section Javascript :

pCanvas = document.getElementById(« canvas »);
canvas = new Processing(pCanvas, sketchProc);
// attaching the sketchProc function to the canvas

en

$(document).ready(function(){

if(matchPjs()){ // c’est parti pour Pjs !
$.getScript(« lib/processing-1.3.6.min.js », function(){

 

pCanvas = document.getElementById(« canvas »);
canvas = new Processing(pCanvas, sketchProc);
// attaching the sketchProc function to the canvas

 

});
}
if(!matchPjs()){ // pas glop.

// tout ce qu’on veut en Jquery, spécifique si Pjs ne marche pas
$(‘#loader’).hide();


}

// corrections éventuelles de mise en page en jquery dans tous les cas


});

et c’est réglé !

 

Pour ce qui est des classes dédiées à Pjs, le sketch principal Pjs, et les librairies Javascript pour Pjs, aucun problème : on peut les charger comme on le fait habituellement.
Que ce soit via du <script src> ou via une saisie « manuelle » dans la code html, elles sont « activées » par la déclaration new Processing(…) qui met les choses en branle… Pas de déclaration, pas de problème !

 

Côté HTML, on peut donc prévoir une structure optimale du genre :

<div id= »loader »>
<img src= »img/preloader.gif » width= »20″ height= »20″ /> Chargement…
</div>
<canvas id= »canvas »>
<div id= »nopjs »>
<p>Votre navigateur <br />n’est pas compatible HTML5.<br /><br />
En 2012, passez à un <br />navigateur plus récent !</p>
</div>
</canvas>
<div id= »scene »></div>

Ce qui vous permettra en html/css de prévoir une mise en page adaptée dans la div #nopjs, et pourquoi pas d’y ajouter du JQuery si ça vous chante… dans le bloc if(!matchPjs()).

Je vous recommande de tester tout ça dans IE6-7 et 8 en particulier, car ça réserve quelques surprises côté css par exemple… et si vous êtes allés jusqu’à utiliser mon code, c’est que vous souhaitez une compatibilité optimale !

Javascript+Proccessing.js+JQuery, it rocks !

Enregistrer