http://www.irit.fr/~Philippe.

Truillet

Processing.org
Ph. Truillet
Janvier 2016 v. 1.9

1. introduction
Processing (http://processing.org) est un langage (une surcouche du langage Java en fait) dvelopp par Ben Fry et Casey Reas
(MIT) ddi la programmation crative. Il permet entre autres de crer des images (fixes ou animes) et interagir avec elles.
Processing permet aussi de manipuler, gnrer des textes, des formes vectorielles, des images en trois dimensions (en utilisant
OpenGL), du son, et plus gnralement tout !
Processing peut enfin tre tendu laide de librairies ou grce des projets proches comme Arduino
(http://www.arduino.cc) et Wiring (http://wiring.org.co).
Il existe de multiples versions de Processing dont processing JS (http://processingjs.org) crit en javascript, Processing
Python (http://py.processing.org) ou mobile processing (http://mobile.processing.org) projet plus vraiment actif.

Figure 1 : Exemple de sketch Processing

Processing sappuie sur le langage Java, ce qui lui permet de fonctionner sur trois plateformes : Windows, MacOS X et Linux
(plus Android avec le mode idoine propos avec Processing 3). Ce langage est une alternative gratuite et open-source des
logiciels auteur tels quAdobe Flash et Microsoft Silverlight. Malgr certaines lacunes qui en font un logiciel de production
inadapt de nombreux cas, Processing a de nombreux atouts dont notamment sa simplicit dusage !

2. installer Processing
Processing est install lAIP (salle Brhat) sur le rpertoire C:/langages
Si ce ntait pas le cas, la premire chose faire est de se rendre ladresse
http://processing.org/download et tlcharger une des versions proposes (version stable 3.0.1
du 23 octobre 2015 en 32 ou 64 bits ou version prcdente 2.2.1 en 32 ou 64 bits du 19 mai 2014).
Une fois tlcharge, dcompressez larchive dans le rpertoire de votre choix et lancez
lexcutable processing .
La premire chose faire est de dterminer le rpertoire o seront sauvs vos programmes
(cf. File | Preferences). Choisissez lemplacement dans le champ sketchbook location et appuyez
sur ok (cf. Figure 2).

3. mon premier sketch

Figure 2 : Menu

Il est possible dutiliser Processing de diffrentes manires dont notamment en mode script , et en mode continu .
Le mode continu demande dimplmenter deux fonctions : setup() qui initialise les variables et draw(), boucle daffichage
de donnes. Cette boucle permet dafficher des animations graphiques complexes, ragir des vnements synchrones
provenant dactions de lutilisateur ou dvnements systmes.
Par convention, les mots rservs du langage sont affichs en orange dans lIDE (cf. Figure 3).

Page 2

Processing.org

Figure 3 : mon premier sketch

Les possibilits du langage Processing sont quasi-infinies notamment avec la possibilit dutiliser la programmation orienteobjet, dajouter des librairies externes et den crire soi-mme ! Les quelques exercices ci-aprs vous donnerons un aperu de
ce qui peut tre fait en quelques lignes de code.
LIDE Processing propose plusieurs modes : Java (par dfaut) mais aussi Android (ADB doit
tre install) et Python (le mode Javascript nest pour le moment compatible quavec la
version 2 de Processing).
Il suffit de choisir le mode (une installation peut tre requise) que vous souhaitez sur le
bouton droite de lIDE.

4. exercices
4.1 des dessins

Crer une composition graphique utilisant au moins une ellipse, une ligne et un rectangle

4.2 tout en couleurs

Utiliser les couleurs HSB et une structure de rptition pour afficher un gradient entre deux couleurs
Redessiner la composition 4.1 en utilisant des couleurs
Dessiner un tableau simplifi de type Mondrian (pre du no-plasticisme) ou Sophie Taeuber-Arp voir exemples
ici : http://www.wikipaintings.org/en/piet-mondrian/composition-a-1923
et l : http://deetrendss.esy.es/tag/sophie-taeuber-arp/

4.3 un peu de mathmatiques

Dessiner la courbe y=1x5 sur une fentre Processing (penser dessiner les axes des abscisses et ordonnes) [la
fonction map vous sera utile ]

4.4 des images

Afficher deux images avec une teinte diffrente

Charger un fichier png avec un bit de transparence et crer une composition en superposant les couches

4.5 de la typographie

Afficher votre mot favori avec votre police de caractres prfre

Utiliser deux polices de caractres diffrentes pour afficher un dialogue entre 2 utilisateurs

Processing.org

Page 3

4.6 utiliser les entres

Utiliser les flches du clavier pour modifier la position dun rectangle affich dans la fentre
Dessiner deux formes qui ragissent diffremment suivant les actions de la souris

4.7 jouer des films vido

Tlcharger une vido sur Youtube au format mp4 (vous pouvez utiliser le site https://www.savedeo.com/en pour la
sauver)
Charger le projet video (http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/video.zip) et
modifier le code de telle manire que vous puissiez grer le rembobinage, la pause et le dmarrage de la vido avec les touches
du clavier.

4.8 classes objet

Tlcharger le projet interface
(http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/interface_.zip) et modifier le code
de telle manire que lhorloge change de couleur (alatoire) quand on clique dessus.

4.9 rseau
4.9.1 un flux RSS
Charger le projet RSS
(http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/rss.zip),
linstaller et louvrir. Excuter le code.
Modifier le code de telle manire tlcharger le flux RSS du journal le Monde et afficher les unes dans des cercles
quand lutilisateur clique sur le titre du journal.

4.9.2 JSON
Charger maintenant le projet JSONWeather
(http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/JSONWeather.zip), linstaller et
louvrir.
Aller sur http://home.openweathermap.org/users/sign_up et crer un compte (gratuit) sur Open Weather
Map. Aprs stre connect, recopier la cl API (API key).
Dans le code Processing, reprer la ligne (requte) o se trouve &APPID= et coller la cl. Excuter le code. Modifier le code
de telle manire afficher une icne correspondante la place de la description et ajouter un bouton permettant le
rechargement de la mto pour une ville diffrente.

4.10. images et vido

4.10.1 je suis ton pre ?!
Installer au pralable la librairie OpenCV (https://github.com/atduskgreg/opencv-processing/releases)
Modifier lexemple LiveCam fourni par OpenCV et remplacer chaque figure dtecte par une webcam par le masque de Dark
Vador (http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/darth_vader.png)

4.10.2 QRCode
A partir de lexemple tlcharg ici :
http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/QRCode.zip
Crer une application qui affiche un objet 3D sur le QR code dtect.
Nota : cette application utilise la librairie ZXing (https://github.com/zxing/zxing)

4.11. capteurs et multimodalit

4.11.1 Phidgets Physical Widgets
Installer au pralable la librairie Phidgets (http://www.phidgets.com/docs/Language_-_Java) sur votre machine.

Page 4

Processing.org

Tlcharger lexemple ici :

http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/PhidgetsP5.zip
Modifier lapplication de telle sorte de pouvoir allumer et teindre deux leds et prendre en compte diffrents capteurs.
Nota : vous risquez de devoir remplacer le fichier phidgets21.jar par celui fourni avec le driver (problmes de
compatibilit).

4.11.2 Arduino
Utiliser au pralable lIDE Arduino (http://www.arduino.cc) sur votre machine.
Tlcharger lexemple ici :
http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/arduino.zip
Compiler et tlverser le code capteur.ino sur le module arduino. Brancher une led infrarouge sur le pin Analogique A0 et GND.
(le code va lire la valeur du capteur et lcrire sur le port srie)
Excuter le code Processing. Modifier le code de telle manire que la valeur du capteur rcupre soit affiche sous forme de
barre verticale de 300 pixels maximum (si la valeur rcupre est de 1024)

4.11.3 bus logiciel ivy

Tlcharger lexemple ici http://www.irit.fr/~Philippe.Truillet/ens/ens/processing/ivyP5.zip
Dzipper les deux sketchs et lancer-les tous les deux. Ces deux sketchs utilisent le middleware ivy pour communiquer sur le
rseau local (voir http://www.eei.cena.fr/products/ivy/ pour une information gnrale).
En cliquant sur la premire fentre (sketch sender ), un message sera affich sur lautre fentre ( receiver ) et un feedback
est envoy la premire.
Une fois compris le principe, crivez une interface compose de plusieurs sketchs (qui peuvent communiquer en rseau local)
qui dcode un QR-code prsent devant une camra, affiche linformation dcode dans une autre fentre (dune autre
machine par exemple) et lit via une synthse vocale le texte dcod.
Nota : Il existe de TRES nombreuses librairies permettant de grer laffichage, linterfaage avec du matriel (arduino par
exemple, Kinect, Leap Motion, lecteurs RFID, ), le traitement dimages (OpenCV),

5. adresses utiles

Processing : http://www.processing.org
Processing.js : http://processingjs.org

Rfrence : http://processing.org/reference
Learning Processing : http://www.learningprocessing.com
Hello Processing : http://hello.processing.org
Support de cours : http://www.irit.fr/~Philippe.Truillet/ens
Librairies : https://processing.org/reference/libraries/

OpenCV for Processing : https://github.com/atduskgreg/opencv-processing/releases

TTSlib for Processing : http://www.local-guru.net/blog/pages/ttslib