J’ai entendu parler plusieurs fois de Processing, sans trop savoir à quoi ça pouvait me servir ni comment l’utiliser. Et puis je me suis inscrite au cours « Art Numérique » des Beaux Arts de Quimper (site de l’école ou site de partage du cours). Et je m’y met.
Dans ce premier article sur Processing, dans la série Découverte de Processing, je vais simplement mettre des liens qui m’ont paru intéressants vers d’autres sites qui parlent de Processing.
Que peut-on faire avec Processing ?
Une réalisation d’une ancienne élève du cours Art numérique : ici sur le site du cours.
Le site Beautiful Programming qui présente de très beaux exemples d’art génératif et interactif. J’aime tout particulièrement le « Infinite Arboretum » qui dessine automatiquement un arbre et le modifie selon ce que l’on fait avec la souris ou le clavier :
Un exemple d’arbre généré automatiquement. En cliquant, vous allez sur le site de l’auteur.
Un site regroupe de nombreux exemples avec le code : OpenProcessing
Algorithm Ink de Aza Raskin montre une réalisation intéressante et son code (en cliquant sur le bouton edit)
Processing drawings présente des projets visuels et leur code.
Generative Art Links contient des liens vers des projets visuels mais aussi des logiciels utilisables pour de l’art numérique.
La page « processing : Ressources Processing et tutoriels en ligne » contient de nombreux liens vers des sites intéressants.
Le site GuruBlog contient une galerie de sketch Processing.
Le site de Jm Commenge contient des exemples intéressants.
Ce site présente un projet associant Processing et Twitter pour animer du plancton.
Sur CodePen.io on peut voir de nombreuses réalisations utilisant Processing.js et taggée « processing »., ou contenant « p5 » Par exemple cette réalisation de Kultur Design, une animation de polygones SVG :
See the Pen SVG Polygon Animation by Kultur Design (@kulturdesign) on CodePen.
Sur CodePen, Lionel Radisson a réuni une collection liée à Nature of Code (le livre je pense).
J’ai entamé une collection de travaux sur CodePen en lien avec p5.js, visible ici.
Références sur le code Processing
Processing.org est le site de référence pour Processing, et aussi pour p5.js une bibliothèque JavaScript qui lit le code Processing sur un site ou une application web.
The Nature of Code permet d’acheter un livre très intéressant sur Processing et aussi de le lire en ligne.
Contributed Tools, Projects, Demos · processing/p5.js est le Wiki pour p5.js, .
Education · processing/p5.js est un Wiki consacré à l’enseignement de p5.js pour Processing.
Des cours sur Processing sont disponibles sur le site de Electronic Media Studio. Le menu « Lectures » contient plusieurs cours et dans la barre latérale, on trouve de nombreux exemples d’exercices.
Le site Arts Numériques contient de nombreux tutoriels sur Processing.
Processing Quick Start nous parle de Processing.js, une autre bibliothèque JavaScript pour Processing.
Le site du livre Design Génératif : un livre excellent, mais cher. J’ai pu l’emprunter à la bibliothèque de l’école des Beaux Arts de Quimper. On peut télécharger tous les exemples de codes sur le site. Beaucoup sont très très intéressants.
Pour démarrer dans l’utilisation de svg créés avec Inkscape et utilisés dans Processing : how to use svg for rigged 2D-animations in processing.
Un lycée a mis en ligne quelques exemples et exercices lié à des oeuvres d’art.
Un cours en ligne, en anglais, très bien fait pour apprendre rapidement les rudiments de Processing : Le cours CS1335 de Karen Doore
Placer un sketch Processing dans un site WordPress
Embedding p5.js processing sketches in WordPress posts sur le site weegreenblobbie.com
Embedding p5.js · processing/p5.js sur GitHub explique comment on peut visualiser du code Processing / p5.js sur un navigateur avec iframe dans une page html ou des sites de partage et visualisation de code tels que CodePen ou JSFiddle.
Creative Computation » Embedding a Processing Sketch expose diverses solutions pour placer un sketch Processing dans une page html.
Enfin, deux extensions WordPress paraissent intéressantes pour intégrer du Processing à un site :
Processing.js for WordPress et ProcessingJS for WordPress. Elles sont toutes deux gratuites et ont été mises à jour récemment.
Javascript ou Processing ?
Les bibliothèques javascript citées plus haut (P5.js ou processing.js) permettent de créer des scripts visualisables en ligne. C’est quand même très pratique….
Si on veut apprendre P5.js, un excellent tutoriel en français a été réalisé par B2renger.
Processing et Arduino ou Raspberry Pi
Ce tutoriel, en anglais sur Instructables, explique comment utiliser un Raspberry Pi pour des sketchs Processing. Adafruit a également fait un tutoriel sur l’utilisation du Pi avec Processing 3.
L’article « Récupérer une valeur analogique Arduino avec Processing » me parait être une bonne base pour démarrer. On peut remplacer les photo-résistances par d’autres capteurs analogiques.
Il y a aussi un manuel Floss spécifique à Arduino et un Chapitre Arduino du Manuel Floss sur Processing.
Pour le Raspberry Pi, on peut lire Introduction to Processing sur le site Raspberry Pi Projects, ou Processing on the Raspberry Pi & PiTFT sur le site Adafruit Learning System.
Et pour un ensemble Arduino Uno, Raspberry Pi utilisant Processing : Raspberry Pi + Processing + CT UNO (Part 2) , un tutorial de Cytron.
On peut contrôler l’arduino en C++ et simplement le faire communiquer avec Processing ou le contrôler en Processing. Voir les explications de Arduino Playground ou Learn Sparkfun.
Le site Arts Numériques contient également des tutoriels sur Arduino.
Art et Arduino
- Sur Create.Arduino.cc
- Des projets artistiques utilisant Arduino.
- un projet du site Arts Numériques, Twitter, arduino et processing dans une boite, qui associe une page PHP, un arduino, un capteur de choc et un haut parleur. L’idée générale semble être de secouer une boîte et d’afficher un texte qui provient de Twitter.
- Un autre projet du site Arts Numériques, Flat earth : communication entre internet, processing et arduino.
Mes projets
Me familiariser avec Processing :
refaire l’oeuvre de Sol Lewitt tel que présentée sur le site de Pol Guezennec ici. Ajouter de la couleur aux lignes pour me familiariser avec la manipulation de couleurs.- Réaliser un sketch qui présentera deux photos côte à côte issues de manière aléatoires de photos présentes sur des sites tels que PxHere, Pixabay, Unsplash ou Flickr. Il faudra probablement utiliser le mode aléatoire de PxHere, l’API de Pixabay, l’API d’Unsplash ou l’API de Flickr. Si j’utilise Flickr, je pourrai m’inspirer de cet exemple, avec Processing 2 ou de celui du site Arts Numériques, Ramener des images de flickr avec l’api publique. Sur GitHub, Mathias Markl a créé une bibliothèque Processing pour récupérer des images via les API de Flickr, Google ou autres.
Et je veux également voir comment intégrer ces travaux dans des pages web. J’essaierai donc CodePen, JSFiddle et les deux extensions WordPress ci-dessus.
Ca m’intéresserait aussi de savoir faire les images suivantes, il me semble que Processing est bien adapté pour :
geralt / Pixabay
intographics / Pixabay
geralt / Pixabay
Vous verrez la suite dans les prochains articles de cette série Découverte de Processing !
