Processing pour le Web avec Processing JS

Liens utiles

• Processingjs :
  • site officiel : http://processingjs.org/
  • Tuto pour utilisateurs de Processing : http://processingjs.org/reference/articles/p5QuickStart
• Un utilitaire pour exporter facilement un programme Processing en une page Web :https://github.com/fjenett/processingjstool/wiki

Pour comprendre

• Il est possible d’embarquer ses programmes Processing dans une page web assez simplement grâce à Processing JS qui « traduit » le code Java d’un programme Processing en code Javascript exécutable côté client.
• Le principe consiste à intégrer dans la page web un fichier javascript appelé processing.js et qui va traduire le code du programme processing .pde en javascript. Le graphique sera mis à l’intérieur d’un objet canva dans la page web.

Comment çà marche ?

Télécharger processing.js

• Télécharger le fichier processing.js ici : http://processingjs.org/download
  • Soit la version complète (700ko environ)
  • soit une version réduite (min) (250 ko environ)

Créer un programme Processing

• Créer un processing et l’enregistrer : on obtient un fichier .pde

Créer la page HTML embarquant le programme Processing

• Créer un répertoire correspondant à la page HTML
• Dans ce répertoire, mettre :
  • une copie du fichier processing.js
  • une copie du programme .pde
• Ouvrir un éditeur de texte :
  • Copier le code suivant (les noms sont à adapter en fonction de fichiers utilisés) :

• Enregistrer au format .html

• On obtient le répertoire suivant :

• A présent, il ne reste plus qu’à ouvrir la page HTML avec le navigateur pour obtenir le programme Processing dans la page.

Un outil d’exportation de Processing vers processing JS

Liens :

• https://github.com/fjenett/processingjstool/wiki/Getting-started

Descriptif

• Cet utilitaire s’intègre dans le sketchbook de processing et permet d’exporter le programme Processing en cours depuis un simple menu en une page HTML opérationnel : dans un répertoire applet_JS on retrouve :
  • la page HTML intégrant le programme processing
  • + le fichier Processing.js
  • + le programme .js
  • + le programme .pde

Installation

• https://github.com/fjenett/processingjstool/wiki/Getting-started
• On télécharge le zip, on dézippe, on renomme comme indiqué
• Ensuite, dans le sketchbook, on crée un répertoire « tools » et on copie dedans le répertoire obtenu ci-dessus
• On ouvre Processing : le menu tools comporte une ligne export as Processing.js :

• Il suffit à présent d’ouvrir un programme, de cliquer sur ce menu : on obtient un répertoire applet_JS qui contient la page HTML basique opérationnelle :

• En ouvrant le fichier index.html, on obtient alors l’affichage de l’exécution du programme Processing dans le navigateur : cooool !!

Exemples

• Pleins d’exemples super sympas : http://processingjs.org/exhibition
• Quelques exemples sur mon site :
  • Fractales : Mandelbrot en noir et blanc
  • Fractales : Plasma (clic sur image)

Limites

• L’embarquement d’un fichier processing dans une page Web se limite aux fonctions graphiques. Les librairies importées ne semblent pas supportées.
• Les ressources systèmes sont pas mal sollicitées si les calculs à réaliser sont importants

Avec Pmwiki

• Installer EnableHtml
• Déclarer 2 balises EnableHtml(‘canvas’) et EnableHtml(‘script’) dans config.php. mais déconseillé..
• Mettre processing.js dans le répertoire /pub/processing_JS/ ou équivalent… mettre là aussi les fichiers .pde
• copier les balises à l’endroit voulu dans la page en utilisant chemin entier
• Normalement, çà fonctionne… (testé le 18/01/2011)

Conclusion

• çà peut probablement être intéressant pour embarquer dans une page HTML un petit applet interactif, mais çà n’est pas aussi bien que d’utiliser le programme directement dans Processing.