Historique

Pour faire court, l’histoire de Processing commence avec son ancêtre, Design by Number par John Maeda. Processing sera son prolongement plus complet par deux de ses anciens étudiants Benjamin Fry et Casey Reas.
Les points forts étant la simplicité de l’écriture peu verbeuse, l’approche pédagogique et artistique, la communauté et ses ressources, ainsi que la possibilité de connecter les données entre elles. Pour illustrer mes propos, avec un peu de patience, de recherches et quelques lignes, vous pouvez récupérer les images de votre webcam et en faire un pdf, transformer l’image en musique ou même analyser l’image (suivi de couleurs, de forme…), lire une information numérique pour en recréer une autre.

Processing partout

Deux librairies JS permettent de faire du Processing dans votre navigateur, Processing.js et p5.js. La première est un portage, une sorte de traduction du code pour être lu dans votre navigateur, la seconde est une écriture optimisée en partant de zéro.

Pour briller dans les diners mondains, Processing.js est un portage réalisé par John Resig, le développeur à l’origine de jQuery !

Les différences entre ces 3 Processing :

  • L’application Processing utilise JAVA (pas JavaScript) mais un mode JavaScript permet de lire son programme (un sketch) dans le navigateur via Processing.js
  • Processing possède des librairies pour étendre ses possibilités, plus particulièrement avec du matériel (webcam, kinect, instruments de musique MIDI…) ;
  • Processing.js lit le code sans changement d’écriture (! sauf préchargement des images), sous réserve de ne pas utiliser des librairies ;
  • Processing.js et p5.js se basent sur les possibilités du navigateur avec les avantages et contraintes que cela impliquent ;
  • P5.js reprend les noms des fonctions de Processing, mais s’appuie sur une écriture en JavaScript, qui oblige à adapter son code ;
  • P5.js possède des librairies mais reste limité aux fonctionnalités du navigateur ;
  • Actuellement p5.js ne possède pas d’éditeur abouti tout-en-un comme son grand frère Processing, l’éditeur Brackets est une alternative plus fiable.

Pour être un peu plus à jour, il y actuellement 4 déclinaisons de Processing disponible sur https://processing.org/, la version « originale », la version JavaScript p5.js, la version Python et celle pour Android. Processing.js étant moins pertinent que p5.js, le choix de faire disparaitre celle-ci est assez judicieux.

Avant de coder

La notion de serveur local revient souvent sur p5.js. Afin d’avoir un navigateur sécurisé, on ne peut pas charger un fichier de son ordinateur dans une page web de manière automatique sans passer par un formulaire ou une action volontaire. Sans cette protection n’importe quelle page web pourrait charger des fichiers de votre machine, les lire et les modifier. Vous aurez donc 3 options pour tester de manière fiable vos programmes :

  1. Mettre en ligne votre page et son script ;
  2. Avoir un logiciel capable de créer un serveur local (⚡️ sous Brackets) ;
  3. Avoir un serveur local sur sa machine (MAMP).

Si votre configuration est bonne, vos pages de test auront une adresse de type htpp://127.0.0.1:… ou http://localhost:…

Parfois certains scripts marchent sans serveur, ne soyez pas surpris.