Processingjs, une librairie JavaScript permettant de faire du dessin vectoriel.
Ces tracés vectoriels peuvent être fixes ou animés. Le code source Processingjs s’utilise avec la balise HTML <canvas>. C’est pourquoi il est compatible avec tous les navigateurs HTML 5 et ne requière aucun plugin particulier pour les internautes.
Cet exemple intitulé Multiple Particle Systems est disponible sur le site officiel de Processing.
Installation par le plugin sur l’interface WordPress
Par défaut il n’y qu’une seule façon d’installer Processingjs. Mais Wordpres est un framework populaire, ainsi il existe une seconde méthode plus simple. Cette méthode consiste à installer le plugin du même nom.
Depuis le tableau de bord de WordPress, allez dans Extentions -> Ajouter puis taper processingjs en tant que mot-clef. Installez le plugin nomé: Processing.js
Installation pour les puristes : à la main !
Rendez-vous sur le site officiel de processingjs pour y télécharger la dernière version du fichier processing.js. Placez-le à la racine de votre thème WordPress, puis chargez le script dans la balise <head> de votre thème.
Ouvrez le fichier header.php puis ajouter la ligne de code suivante :
[php]<script src= »/chemin-vers-votre-dossier/processing.js »></script>
[/php]Intégration du code source avec le plugin
Le plugin permet d’intégrer le code source à l’intérieur d’une page ou d’un article.
Créez votre nouvelle page/article, puis insérez les shortcodes [processing] et [/processing].
Le code source Processing devra être insérer à l’intérieur des shortcodes.
Intégration du code source sans le plugin
L’avantage de cette méthode par rapport à la précédente est que l’intégration du code Processing ne se limite pas aux articles et aux pages de votre site. Il est également possible de l’intégrer directement dans les fichiers sources de votre thème. Car ici pas de shortcode, mais l’utilisation de la balise .
Première méthode à privilégier si votre sketch est constituer de plusieurs ou fichiers (au format .pde), ou bien que votre code est très dense.
Exemple avec un seul sketch :
[php]<canvas data-processing-sources= »/hemin-vers-votre-dossier/sketch.pde »>
</canvas>
Exemple avec deux sketchs :
[php] <canvas data-processing-sources= »/chemin-vers-votre-dossier/sketch_1.pde chemin-vers-votre-dossier/sketch_2.pde »></canvas> [/php]
Deuxième méthode à privilégier si votre sketch est très court et qu’il tient dans un seul fichier. Le code s’intègre à l’aide d’une balise JavaScript. Le code source Processing est à saisir dans les balises
