Processing

Manuel libre pour logiciel libre

Table des matires

Prsentation
1 Introduction
2 Exemples d'utilisation
3 L'installation de Processing
4 Les bases de Processing

2
5
13
18

Dessiner
5 L'espace de dessin
6 Les formes
7 Les couleurs
8 Le texte

24
27
33
37

Dessiner plus
9 Les images
10 Les styles de bordures
11 La typographie
12 Les transformations

40
50
52
58

Programmer
13 Les variables
14 Les conditions
15 Les rptitions
16 Les listes
17 Les mthodes
18 Les objets
19 Les commentaires

69
72
75
79
88
96
101

Animer
20 La mthode draw
21 La ligne de temps
22 L'animation d'un objet
23 L'animation de plusieurs objets
24 La lecture du son

104
110
114
119
124

Sortir
25 L'exportation
26 L'impression
27 La vido

133
136
141

Interagir
28 Les vnements clavier
29 Les vnements souris
30 L'entre Microphone
31 L'entre vido

145
149
155
160

Annexes
32 Les astuces
33 Les erreurs courantes
34 Les librairies externes
35 La documentation en ligne
36 Processing dans l'enseignement
37 Arduino
38 A propos de ce manuel
39 Glossaire

164
168
171
175
177
180
187
190

PRSENTATION

Introduction
Conu par des artistes, pour des artistes, Processing est un des
principaux environnements de cration utilisant le code informatique
pour gnrer des uvres multimdias sur ordinateur. L'attrait de ce
logiciel rside dans sa simplicit d'utilisation et dans la diversit de
ses applications : image, son, applications sur Internet et sur
tlphones mobiles, conception d'objets lectroniques interactifs.
Processing
fdre une forte communaut d'utilisateurs
professionnels et amateurs : artistes, graphistes, vidastes,
typographes, architectes, web designers et designers en gnral. Il
est galement utilis par des enseignants en arts qui souhaitent
familiariser leurs tudiants avec les potentialits artistiques de la
programmation, les concepteurs du logiciel l'ayant pens ds
l'origine comme un outil d'apprentissage.

Dessiner et crer avec du code informatique

Logiciel de cration multimdia, Processing possde la particularit
d'utiliser des instructions informatiques pour dessiner, raliser des
animations en 2 ou 3 dimensions, crer des uvres sonores et
visuelles, concevoir des objets communicants qui interagissent avec
leur environnement.
Pour un artiste habitu utiliser main leve des outils comme son
crayon, son pinceau, sa souris ou sa tablette graphique, il peut
sembler surprenant de crer des formes, des couleurs, des
mouvements en saisissant seulement une suite d'instructions l'aide
de son clavier.
Ce mode d'expression artistique par le code utilise les
caractristiques propres l'informatique (rapidit d'excution,
automatisation des actions et des rptitions, interaction, etc.) pour
produire des crations originales qui n'auraient pas vu le jour
autrement ou dont la ralisation, l'aide de procds plus classiques
ou de logiciels plus complexes, aurait demand davantage de temps.
Processing permet galement de programmer des circuits
lectroniques qui interagissent avec le milieu qui les entoure.
Connects des capteurs sonores, thermiques, de mouvement, ces
circuits lectroniques peu coteux, dnomms micro-contrleurs,
peuvent en retour gnrer des images, actionner un bras articul,
envoyer des messages sur Internet... bien entendu en fonction du
programme que vous aurez cr.
Comme nous le verrons dans ce manuel, en apprenant
programmer avec Processing, vous allez dvelopper votre capacit
d'expression et d'imagination.

Un formidable environnement d'apprentissage

Si Processing est simple d'utilisation, c'est qu'il a t conu ds son
origine pour servir enseigner les bases de la programmation
informatique dans un contexte visuel.

La vocation pdagogique de Processing en fait un excellent outil

d'apprentissage de la programmation pour les non-programmeurs
ou les programmeurs dbutants. De nombreux enseignants
l'utilisent pour initier leurs lves et leurs tudiants aux concepts et
aux bonnes pratiques de la programmation.
Plusieurs universits, coles et centres d'artistes donnent des cours
sur ce logiciel. Dans un contexte francophone, on peut mentionner
notamment l'Universit du Qubec Montral (UQAM), l'Universit
Laval, la Socit des arts technologiques - SAT (Canada-Qubec), le
Centre art sensitif - Mains d'oeuvres Paris, l'Ecole d'Art d'Aix en
Provence, l'association PING Nantes (France), l'Ecole de
Recherche Graphique (ERG) et IMAL Bruxelles, la Haute Ecole
Albert Jacquard (HEAJ) Namur (Belgique), La Haute Ecole d'Art et
de Design (HEAD) Genve, La Haute Ecole d'Arts Appliqus de
Lausanne - ECAL (Suisse).

Un logiciel libre et gratuit

Processing est un logiciel libre et gratuit. Il fonctionne sur les
plates-formes Windows, Linux, Mac (et sur toute autre plate-forme
pouvant faire fonctionner des logiciels conus en Java). Il existe
galement des versions pour tlphones portables et des drivs
pour circuits lectroniques.
En tant que logiciel libre, Processing bncie de la gnrosit de
nombreux programmeurs volontaires qui mettent disposition des
utilisateurs des morceaux de codes facilement rutilisables
(dnomms en jargon informatique des librairies). Plus d'une
centaine de librairies tendent ainsi les capacits du logiciel dans le
domaine du son, de la vido, de l'interaction, etc.

Un peu d'histoire
Processing a t conu au laboratoire Aesthetics + Computation
Group (ACG) du MIT Media Lab par Ben Fry et Casey Reas en 2001.
Ce logiciel est plus ou moins le prolongement du projet Design By
Numbers, cr par le directeur du laboratoire, l'artiste-programmeur
John Maeda. Dans son livre prsentant le langage de
programmation qu'il a conu, Maeda met en avant la simplicit et
lconomie d'action dans la programmation dimages.
Plusieurs lments de ce premier projet sont visibles dans
lenvironnement Processing : la simplicit de linterface du logiciel,
la priorit donne lexprimentation et lapprentissage, ainsi que
les nombreuses fonctions que les deux environnements partagent.
Les concepteurs de Processing ne cachent pas cet hritage.
La version actuelle de Processing est la version 1.2.1. Les exemples
donns dans ce manuel font rfrence cette version du logiciel.

Comment utiliser ce manuel

Production originale en franais, ce manuel est destin au public
professionnel et amateur qui souhaite s'initier l'utilisation de
Processing. Il ne rclame aucune connaissance pralable de
programmation. L'apprentissage de Processing y est fait pas pas.
Nous vous invitons suivre l'ordre de succession des chapitres,
surtout pour les tout premiers qui posent les bases de l'utilisation du
logiciel.
La saisie des exemples de programmes proposs dans ce manuel
peut constituer elle seule une exprience formatrice, ne serait-ce
qu'en apprenant viter de faire des erreurs de frappe. Si cette
activit vous rebute ou si vous voulez rapidement exprimenter le
rsultat d'un exemple, copiez le code du programme depuis les
pages web de l'ouvrage (consultables sur la partie francophone du
site Flossmanuals l'adresse http://fr.flossmanuals.net/processing/)
pour ensuite le coller directement dans la fentre du logiciel.
Disponible en plusieurs formats numriques (html, pdf, ePub) ainsi
qu'en version papier, ce manuel est publi sous licence GPLv2 : vous
tes autoris le lire et le copier librement.
Ouvrage collectif, ce manuel est vivant : il volue au fur et mesure
des contributions. Pour consulter la dernire version actualise,
nous vous invitons visiter rgulirement le volet francophone de
Flossmanuals sur le site http://fr.flossmanuals.net.
Le cur du manuel d'environ 270 pages a t ralis en 5 jours dans
le cadre d'un Booksprint qui s'est tenu Paris du 6 au 10 septembre
2010 l'initiative et avec le soutien de l'Organisation internationale
de la Francophonie (http://www.francophonie.org).
Vous consultez l'dition rvise et augmente du 22 novembre 2010.

Exemples d'utilisation
Logiciel de cration multimdia, Processing permet de dessiner,
raliser des animations en 2 ou 3 dimensions, crer des uvres
sonores et visuelles, concevoir des objets lectroniques qui
interagissent avec leur environnement. Des dizaines de milliers
d'artistes, de designers, d'architectes, de chercheurs et mme
d'entreprises l'utilisent pour raliser des projets incroyables dans de
multiples domaines :
publicits, gnriques de lms, vidos clips, dessins
anims, Processing permettant de crer des eets visuels
originaux ;
visualisation de donnes scientiques sous la forme
d'images xes ou animes, facilitant ainsi la reprsentation
d'informations complexes dans de multiples secteurs
professionnels (environnement, transports, conomie,
sciences humaines, etc.) ;
production musicale, Processing permettant non
seulement de lire mais aussi de transformer et de crer du
son ;
spectacle vivant, grce aux nombreuses fonctions
d'interaction oertes par Processing, il est possible de crer
des performances de VJing, utiliser le mouvement des
danseurs pour gnrer en temps rel des eets sonores et
visuels dans un spectacle, raliser des uvres d'arts
numriques interactives ;
Architecture, Processing facilitant la reprsentation
spatiale, il est utilis dans des projets d'architecture pour
automatiser le dessin de constructions en 2 ou 3
dimensions.
La suite de ce chapitre va vous prsenter quelques exemples de
travaux raliss avec l'aide de Processing dans diffrents contextes.

Mycelium

Des traits apparaissent sur l'cran, se ramient pour nalement

constituer un visage. A partir d'une image d'origine, ce programme
d'animation conu avec Processing simule le dveloppement du
mycelium, la partie vgtative des champignons, et utilise ce
procd des fins esthtiques.
Ralis
en
2010
par
http://onecm.com/projects/mycelium/

Ryan

Alexander

NYTimes 365/360

NY T imes est un systme de visualisation de donnes bas sur les

ux d'information du site internet New York T imes. Utilisant les
actualits du journal comme source de donnes, le programme rend
visible sous la forme d'un graphe le degr d'importance des mots
employs et leur relation entre eux. Au nal, on obtient une srie
d'images en haute rsolution destine l'impression.
Ralis
en
2009
par
Jer
T hrope:
http://blog.blprnt.com/blog/blprnt/7-days-of-source-day-2-nytimes36536

Shadow Monsters

Shadow Monster est une installation interactive qui fonctionne sur

le principe des ombres chinoises. Le public qui passe devant
l'installation voit son ombre se transformer en monstre, des
excroissances tranges poussant instantanment sur les extrmits
du corps. Sur cette image, des personnes se sont amuses raliser
des gures animales avec l'ombre porte de leurs mains,
l'installation interactive prenant de son ct l'initiative d'y rajouter
des dents, des touffes de cheveux, des antennes ou des yeux.
Ralis
en
2005
par
Philip
Worthington:
http://worthersoriginal.com/viki/#page=shadowmonsters

Platonic Solids

Cration de formes gomtriques complexes s'inspirant de l'ouvrage

Kunstformen der Natur (Formes d'art de la nature) du scientique et
talentueux dessinateur du XIXe sicle, Ernst Haeckel.
Ralis
par
Michael
Hansmeyer
hansmeyer.com/html/solids/p0s.html

: http://www.michael-

Champ d'Ozone

Champ d'Ozone est une installation artistique prsente en 2007

Paris dans le cadre de l'exposition "Airs de Paris". Commande par le
Centre d'art et de culture Georges Pompidou, elle a t conue en
collaboration avec Airparif, un organisme de surveillance de la
qualit de l'air en Ile-de-France. Cette uvre interactive projette sur
la surface d'une vitre des nuages virtuels dont la couleur varie
constamment selon le niveau de pollution atmosphrique Paris.
Ralis
en
2007
http://hehe.org.free.fr/hehe/champsdozone/

par

HeHe:

COP15 Generative Identity

L'identit graphique de la Confrence des Nations-Unies sur le

climat t ralise par un studio londonien avec Processing. Les
cratifs de cette agence de communication ont conu un outil pour
gnrer un logo anim bas sur des principes d'interaction de force
illustrant ainsi la complexit des changes lors de cette confrence.
Ralise en 2009 par le studio
http://www.okdeluxe.co.uk/cop15/

Body navigation

10

okdeluxe

Londres:

Body navigation est une performance scnique. Elle a t ralise

lors d'une collaboration entre la chorgraphe T ina Tarpgaard et le
dveloppeur Jonas Jongejan. Les danseurs sont lms par une
camra infrarouge qui repre leurs dplacements et des visuels
gnrs par Processing sont instantanment projets autour d'eux.
Ralis en 2008 par Jonas Jongejan et Ole Kristensen :
http://3xw.ole.kristensen.name/works/body-navigation/

Flight 404

Robert Hodgin explore les possibilits expressives du code, souvent

en associant son et algorithme. Il gnre de nombreux lms avec
Processing qu'il distribue sur Internet. Ces exprimentations sont
ensuite rutilises dans divers projets, comme le visualiseur
actuellement install dans iTunes, ou ces papillons gnrs avec
des diagrammes de Voronoi pour une exposition personnelle.
Ralis en 2007 par Robert Hodgin: http://flight404.com/

11

The Sheep Market

Dans le cadre de ce projet artistique, les internautes, jeunes et moins

jeunes, ont t invits dessiner un mouton, rfrence non dnue
d'humour au Petit Prince d'Antoine de Saint-Exupry. Ces illustrations
ont t regroupes dans une immense base de donnes accessible
en ligne. Processing permet de parcourir les 10 000 dessins et de
visualiser leur trac.
Ralis en 2008 par Aaron Koblin : http://www.thesheepmarket.com

Processing & srigraphie

[Image 600 de large maximum au format png]
Atelier de Bordeaux sur l'impression sur tissus d'illustrations conues
avec Processing.

Motifs gnratifs
[Image 600 de large maximum au format png]
T ravaux de Andras Gysin.
Les images des ralisations prsentes dans ce chapitre sont la
proprit de leurs auteurs respectifs.

12

L'installation de Processing
Processing tant crit en Java, il fonctionne en principe sous toute
plate-forme supportant au moins la version 5 (galement appele
1.5) de ce langage. Les plates-formes les mieux supportes sont
nanmoins Microsoft Windows (Windows XP et Windows 7),
GNU/Linux et Mac OS X.
L'installation proprement dite de Processing est assez simple et
dpend de la plate-forme que vous utilisez. Dans tous les cas, allez
sur la page de tlchargement http://processing.org/download/ et
cliquez sur le nom de votre plate-forme.

Pour la suite de ce chapitre, dans les noms de chiers et dossiers, le

xxx fait rfrence la version de Processing utilise.

Sous Windows
Pour Windows, il est prfrable de ne pas utiliser l'option Without
JAVA qui ncessitera d'installer sparment Java. En cliquant sur
Windows dans la page de tlchargement du site de Processing,
vous allez tlcharger une archive processing-xxx.zip . Une fois le
tlchargement achev, dcompressez l'archive et placez le dossier
Processing extrait de l'archive dans le dossier C:\Program Files\.
Allez ensuite dans le dossier C:\Program Files\Processing et
excutez le fichier processing.exe en cliquant dessus.

Sous Mac OS X
La version Mac OS X est tlcharge sous la forme d'une image
disque (chier .dmg). Par dfaut ce chier s'ache sur le bureau et la
fentre de l'image disque s'ouvre automatiquement. Au sein de cette
fentre, il sut de prendre l'icne Processing et de la glisser sur
l'icne du dossier Applications.

13

Pour excuter le programme que vous venez d'installer, rendez-vous

dans votre dossier Applications et double cliquez sur l'icne
Processing.

Sous GNU/Linux
Aprs avoir cliqu sur Linux pour tlcharger le chier processingxxx.tgz correspondant cette plate-forme, il sut de suivre pas
pas la procdure d'installation dcrite ci-aprs.

Enregistrer le fichier sur votre ordinateur

Il est prfrable d'enregistrer (ou copier) le chier tlcharg dans
votre
rpertoire
personnel
(exemple
:
/home/MonDossierPersonnel).

Extraire les contenus du fichier

Cette opration peut tre ralise de 2 manires :
en utilisant votre souris (notamment si vous utilisez la
distribution Ubuntu - gnome) : eectuez un clic droit sur le
chier pour faire apparatre le menu contextuel puis cliquez
sur Extraire ici ( Extract here ).
pour les plus experts, saisissez et excutez dans un
terminal la commande suivante :
tar -zxvf p ro cessing-xxx.tgz

14

Dans les deux cas, un dossier processing-xxx sera cr dans votre

rpertoire personnel, le xxx faisant rfrence version du logiciel.
Ainsi dans le cas de la version 1.2.1 de Processing le nom du dossier
s'appellera processing-1.2.1 et le chemin pour accder ce rpertoire
sera /home/MonDossierPersonnel/processing-1.2.1.

Installer Processing
Pour installer Processing, en mode graphique, il sut de
se placer dans le dossier cr et d'effectuer un double clic.
Si par contre vous utilisez un terminal, saisissez la
commande :
cd /ho m e/Vo treD o ssierPerso nnel/Pro cessing-xxx/

Autoriser l'excution de Processing sur votre ordinateur

Aprs l'installation du logiciel, il faut s'assurer que le chier
processing contenu dans le dossier du programme (
/home/MonDossierPersonnel/Processing-xxx) est bien excutable. Ce
n'est pas le cas par dfaut.
Dans un terminal, excutez la commande suivante :
chm o d +x p ro cessing

En mode graphique, eectuez un clic droit sur le chier

processing puis dans le menu contextuel qui apparat,
cliquez sur proprits. La bote de dialogue suivante
s'affichera :

15

Cliquez sur l'onglet Permissions puis cocher la case Autoriser

l'excution du fichier comme un programme.

Lancer Processing
Pour dmarrer le programme Processing dans le
terminal (en tant toujours dans le dossier du programme,
exemple /home/MonDossierPersonnel/processing-1.2.1/),
lancer la commande :
./p ro cessing

En mode graphique, faites un double clic sur le chier

processing puis dans la bote de dialogue qui apparat,
cliquez sur le bouton Lancer.

Installer Java, si besoin

Pour fonctionner, Processing requiert Java (au moins la version 5,
galement appele 1.5) originaire de Sun Microsystems.
Si Java n'est pas install, vous pourrez tlcharger et installer
openjdk en vous rendant sur le site http://openjdk.java.net/, ou
mieux, en utilisant le systme de paquetage de votre distribution de
GNU/Linux.
Sous Ubuntu, excuter la commande suivante (notez bien que cette
tape est pralable l'installation de JRE prsente un peu plus
loin) :
sudo ap t-get install o p enjdk-6-jdk

Ensuite, il se peut que vous ayez changer la version de Java qui est
propose par dfaut. Pour vous en assurer, saisissez la commande
suivante :
sudo up date-alternatives --co nfig java

Une liste de choix devrait alors apparatre. Entrez le chire qui se

trouve sur la mme ligne que le chemin qui contient le mot sun,
et appuyer sur entre. Dans l'exemple prsent ci-dessous, la
version prslectionne est identie par un astrisque situ au
dbut d'une des lignes. Il faudrait donc saisir le chire 4 pour
slectionner la bonne version.
Il existe 4 cho ix p o ur l'alternative java (qui fo urnit /usr/bin/java).
Slectio n

Chem in

Prio rit

------------------------------------------------------------

16

tat

* 0

/usr/lib/jvm /java-6-o p enjdk/jre/bin/java

1061

m o de

/usr/bin/gij-4.4

1044

m o de

/usr/lib/jvm /java-6-cacao /jre/bin/java

1059

m o de

/usr/lib/jvm /java-6-o p enjdk/jre/bin/java

1061

m o de

/usr/lib/jvm /java-6-sun/jre/bin/java

63

m o de

auto m atique
1
m anuel
2
m anuel
3
m anuel
4
m anuel
Ap p uyez sur <Entre> p o ur co nserver la valeur p ar dfaut[*] o u
cho isissez le num ro
slectio nn :

17

Les bases de Processing

Processing propose la fois un environnement de cration complet
et un ensemble de fonctionnalits supplmentaires qui viennent
enrichir les possibilits du logiciel. Cet environnement permet
d'crire des programmes (appels sketchs dans Processing), de les
convertir en fichiers autonomes, de les publier ainsi que d'identifier et
de corriger les erreurs. Il contient les fonctions essentielles la
programmation tout en tant simple d'utilisation.
Processing est bas sur le langage Java. C'est cette syntaxe qui sera
utilise lorsque vous allez programmer. Processing vous facilite la
matrise de ce langage en se chargeant de manire transparente
des oprations relativement complexes comme grer les fentres,
le son, la vido, la 3D et bien d'autres choses encore. Ce logiciel
propose une large palette de fonctionnalits prdnies qui simplie
la conception de programmes cratifs, notamment pour les
personnes ne matrisant pas les notions complexes de
programmation et de mathmatiques.
Ce chapitre vous prsente les bases de l'interface de Processing et
les notions minimales de la syntaxe Java connatre pour bien
dbuter.
A ce jour, l'interface de Processing est disponible uniquement en
anglais. Malgr cela, son utilisation reste simple et il est trs
probable que les versions venir proposeront une traduction en
plusieurs langues, dont le franais. Les nombreux atouts de ce
logiciel libre le rendent susamment incontournable pour
commencer apprendre l'utiliser sans plus attendre.

L'interface
L'interface d'utilisation de Processing est compose de deux fentres
distinctes : la fentre principale dans laquelle vous allez crer votre
projet et la fentre de visualisation dans laquelle vos crations
(dessins, animations, vidos) apparaissent.
On trouve plus prcisment les lments suivants dans l'interface :
1. Barre d'actions
2. Barre d'onglets
3. Zone d'dition (pour y saisir votre programme)
4. Console (destine aux tests et messages d'erreur)
5. Fentre de visualisation (espace de dessin)
6. Barre de menu (non reprsente sur la copie d'cran)

18

Barre d'actions
Bouton "Run" : excute votre sketch (votre programme).

Bouton "Stop" : arrte l'excution de votre sketch.

Bouton "New" : Cre un nouveau sketch.
Bouton "Open" : ouvre un sketch existant.
Bouton "Save" : sauvegarde le sketch en cours.
Bouton "Export" : exporte le sketch pour le web.

19

Le dossier de travail
C'est le dossier dans lequel seront enregistrs les sketchs et les
librairies (des modules externes proposant des fonctionnalits
supplmentaires). Par dfaut ce dossier se nomme Processing et se
trouve dans Documents (sous Mac) ou Mes Documents (sous
Windows). Sous GNU/Linux, il est dans votre dossier personnel sous
le nom de sketchbook.
Pour modier ce dossier, allez dans le menu Files > Preferences. Dans
la bote de dialogue qui apparat, cliquez sur Browse (parcourir) pour
choisir le dossier qui vous convient.

A tout moment, pour savoir quel est votre dossier de travail,

slectionnez, dans le menu Sketch > Show Sketch Folder. Cette
option est galement accessible via le raccourci ctrl-k sous
Windows/Linux ou cmd-k sur Mac :

20

Bases du langage
Processing utilise le langage Java pour crer vos programmes. Ce
langage, qui va tre lu par votre ordinateur aprs avoir cliqu sur le
bouton de lancement du sketch, possde un certain nombre de
rgles de syntaxe qui si elles ne sont pas respectes empcheront
l'excution correcte du programme. Il y a aussi un certain nombre
de concepts de base ncessaires connatre.

Majuscules et minuscules
Processing est sensible la casse, il fait la dirence entre les
majuscules et les minuscules : libre est diffrent de Libre !

Le point virgule
A la fin de chaque instruction (dessiner un cercle, effectuer un calcul,
etc.), vous devez mettre un ; an de signaler l'ordinateur la n
de l'instruction. Dans l'exemple ci-dessous, on utilise les caractres
// pour insrer un commentaire qui sera ignor lors de
l'excution (la prsence de commentaires dans votre programme
facilite sa comprhension ultrieure).
//D essine un cercle
ellip se(10,10, 10, 10);
//Cre une variable
int chiffre = 10 + 23;

Appels de mthodes
Processing propose un grand nombre de fonctionnalits prdnies
appeles mthodes : dessiner un rectangle, dnir une couleur,
calculer une racine carre, etc. Ces mthodes ont chacune un nom
spcique. Pour faire appel elles, il sut de taper leur nom en
respectant les majuscules et minuscules et de coller des
parenthses aprs le nom : parfois on doit prciser certaines valeurs
l'intrieur des parenthses (couleur, position, taille, etc.).
L'exemple ci-dessous affiche un cercle gris.

fill(128);
ellip se(50, 50, 60, 60);

21

Affichage dans la console

La console (la zone 4 dans le schma de l'interface prsent en
dbut de ce chapitre) permet d'acher du texte brut des ns de
test et de dbogage (correction d'erreurs). Pour acher quelque
chose dans cette zone, il faut utiliser la mthode p rintln();
p rintln("Salut to ut le m o nde!");

p rintln(1000);

Par extension, le terme console sert galement dsigner la bande

grise juste au dessus de la zone noire de test/dbogage : Processing
y ache un certain nombre de messages, notamment pour signaler
des erreurs.

Oprations arithmtiques
Processing permet d'eectuer des calculs mathmatiques. Tout au
long de l'utilisation de cet environnement, vous serez amen
calculer des valeurs. Ne vous inquitez pas : l'ordinateur le fera pour
vous. Les oprations d'addition, soustraction, multiplication et
division peuvent tre combines. Il est galement possible d'utiliser
des parenthses pour dfinir l'ordre des oprations.
Attention aux nombres virgule ! Dans Processing, les units sont
spares des dcimales par un point et non par une virgule.
Voici quelques exemples d'oprations arithmtiques :
p rintln(10 + 5);
p rintln(10 + 5 * 3); // 5*3 (so it 15) p uis additio nne 10
p rintln((10 + 5) * 3); // 10+5 (so it 15) p uis m ultip lie 15 p ar 3
p rintln(10.4 + 9.2);

Cette suite d'instructions saisie dans la fentre d'dition de

Processing va produire dans la console le rsultat suivant :

Certaines oprations arithmtiques peuvent tre contractes. Par

exemple, i++ donne le mme rsultat que i = i + 1 . Et x+=10 donne le
mme rsultat que x=x+10.
Maintenant que vous connaissez les bases de l'interface de
Processing, il ne vous reste plus qu' apprendre crire du code qui
fonctionne pour dessiner et crer ce que vous souhaitez. C'est l'objet
des prochains chapitres.

22

DESSINER

23

L'espace de dessin
L'espace de dessin constitue l'espace de reprsentation proprement
dit. Cette fentre de visualisation achera vos ralisations dans
Processing en 2 ou 3 dimensions.
Cet espace est cr par l'instruction size() qui prend deux
arguments : size(largeur,hauteur); .
Par exemple, dans la fentre d'dition du logiciel Processing,
saisissez la commande suivante :

Puis cliquez sur le bouton run, votre fentre de visualisation se cr :

Amusez-vous changer les dimensions de cette fentre en modifiant

les valeurs entre parenthses pour en voir le rsultat.
Par dfaut :
size();

...affichera une fentre de 100 pixels sur 100 pixels.

Flicitations, vous avez cr votre premire fentre de visualisation !

24

Coordonnes dans l'espace

Quand on travaille en 2 dimensions (2D), on utilise deux axes de
coordonnes x et y correspondant respectivement la largeur (axe
horizontal) et la hauteur (axe vertical) d'une situation. Par
convention de la mesure de l'espace, le coin en haut gauche
correspond aux valeurs x=0 et y=0. Les valeurs x sont croissantes
vers la droite et les valeurs y sont croissantes vers le bas,
contrairement notre habitude du plan cartsien. Ces valeurs x et y
peuvent s'tendre thoriquement l'inni, mme si, en ralit, les
contraintes de la taille de votre fentre vont dlimiter la taille
maximale dune surface de cration visible. C'est donc dans cet
espace que nous allons dessiner.

Quand on travaille en 3 dimensions (3D), en plus des deux axes de

coordonnes, on a un troisime axe de coordonnes Z, exprimant la
profondeur :

Dans ce cas prcis, on utilise la commande size avec un troisime

paramtre indiquant que l'on travaille dans un espace en 3D size(100,
100, P3D );

25

Connatre la taille de l'espace de dessin

Au sein d'un programme, on peut connatre tout moment la taille
de l'espace de dessin utilis au moyen des mots-cls width et height .
Ces instructions sont trs utiles lorsque l'on souhaite notamment
dessiner des formes qui puissent s'adapter ultrieurement aux
ventuels changements de dimension de la fentre de visualisation.

26

Les formes
Beaucoup de formes prdnies sont fournies par Processing. En
voici les principales :

Le point
Pour commencer dessiner, nous allons partir d'un point. Sur
l'cran, un point est l'quivalent d'un pixel localis dans la fentre de
visualisation par deux axes de coordonnes, x et y correspondant
respectivement la largeur (axe horizontal) et la hauteur (axe
vertical) de l'espace de dessin. En suivant ce principe, la cration
d'un point dans Processing s'eectue l'aide de l'instruction
p o int(x,y) . Dans cet exemple, le point est trs petit. Il est plac au
centre de la fentre de visualisation.
p o int(50, 50);

Notez que le cadre de la fentre de visualisation (l'espace de dessin)

a une dimension de 100x100, ce qui explique que le point soit situ en
plein milieu. Si on le dessinait en dehors du cadre (hors champ),
avec par exemple l'instruction size(150,150) , on ne le verrait pas.

La ligne
Par dnition, une ligne (AB) est constitue par une innit de points
entre un point de dpart A et un point d'arrive B. Pour la construire,
nous allons nous intresser uniquement aux coordonnes x et y de A
et de B. Ainsi, si par exemple dans la fentre par dfaut, le point A se
situe dans la rgion en bas gauche de votre fentre, et que le point
B se situe en haut droite, les instructions suivantes, peuvent
dessiner cette ligne sous la forme line(xA,yA,xB ,yB ) :
line(15, 90, 95, 10);

27

Le rectangle
Un rectangle se dessine par quatre valeurs en faisant l'appel de
rect(x,y,largeur,hauteur) . La premire paire de valeurs x et y , par dfaut
(mode CO RN ER) correspond au coin suprieur gauche du rectangle,
l'instar du point. En revanche la seconde paire de valeurs ne va pas
se rfrer la position du coin infrieur droit, mais la largeur (sur
laxe des x, horizontal) et la hauteur (sur laxe des y, vertical) de ce
rectangle.
Exemple :
rect(10, 10, 80, 80);

Comme les deux dernires valeurs (largeur et hauteur) sont

identiques, on obtient un carr. Amusez-vous changer les valeurs
et observez-en les rsultats.
Pour que la premire paire de valeurs corresponde au centre (le
croisement des deux diagonales aux coordonnes 50, 50) du
rectangle, il faut utiliser le mode CEN TER comme suit :
rectM o de(CEN TER);
rect(50, 50, 80, 40);

Cela donne le rsultat identique l'exemple prcdent.

L'ellipse
Comme pour le rectangle, l'ellipse se construit sous les modes
CEN TER (par dfaut), et CO RN ER . Ainsi l'instruction suivante produit un
cercle dont les coordonnes du centre sont les deux premires
valeurs entre parenthses. La troisime valeur correspond la
grandeur du diamtre sur l'axe horizontal (x) et la quatrime la
grandeur du diamtre sur l'axe vertical : notez que si les 3e et 4e
valeurs sont identiques, on dessine un cercle et dans le cas
contraire, une ellipse quelconque :
ellip se(50, 50, 80, 80);

Amusez-vous faire varier les 3e et 4e valeurs et observez-en les

rsultats.

28

Le triangle
Le triangle est un plan constitu de trois points. L'invocation de
triangle(x1,y1,x2,y2,x3,y3) dfinit les trois points de ce triangle :
triangle(10, 90, 50, 10, 90, 90);

L'arc
Un arc ou section de cercle, peut se dessiner avec l'appel de arc(x, y,
largeur, hauteur, dbut, fin) , o la paire x, y dnit le centre du cercle,
la seconde paire ses dimensions et la troisime paire, le dbut et la
fin de l'angle d'arc en radians :
arc(50, 50, 90, 90, 0, PI);

Le quadrilatre
Le quadrilatre se construit en spciant quatre paires de
coordonnes x et y sous la forme quad(x1,y1,x2,y2,x3,y3,x4,y4) dans le
sens horaire :
quad(10, 10, 30, 15, 90, 80, 20, 80);

Courbe
Une courbe se dessine l'aide de curve(x1, y1, x2, y2, x3, y3, x4, y4) ,
o x1 et y1 dnissent le premier point de contrle, x4 et y4 le
second point de contrle , x2 et y2 le point de dpart de la courbe et
x3, y3 le point d'arrive de la courbe :
curve(0, 300, 10, 60, 90, 60, 200, 100);

29

Courbe Bzier
La

courbe

de

type

Bzier

se

construit

l'aide

de

bezier(x1,y1,x2,y2,x3,y3,x4,y4)

bezier(10, 10, 70, 30, 30, 70, 90, 90);

Courbe lisse
L'appel de curveVertex() dessine plusieurs paires de coordonnes x et
y, entre deux points de contrle, sous la forme curveVertex(p o int de
co ntr le initial,xN ,yN ,xN ,yN ,xN ,yN , p o int de co ntr le final) ce qui permet
de construire des courbes lisses :
beginShap e();
curveVertex(0, 100);
curveVertex(10, 90);
curveVertex(25, 70);
curveVertex(50, 10);
curveVertex(75, 70);
curveVertex(90, 90);
curveVertex(100, 100);
endShap e();

Formes libres
Plusieurs formes libres peuvent tre dessins par une succession de
points
en
utilisant
la
suite
d'instructions
beginShap e(),vertex(x,y),...,endShap e() . Chaque point se construit par ses
coordonnes x et y. La fonction CLO SE dans endShap e(CLO SE) indique que
la gure sera ferme, c'est--dire que le dernier point sera reli au
premier, comme dans l'exemple ci-dessous de dessin d'un
hexagone :
beginShap e();
vertex(50, 10);
vertex(85, 30);

30

vertex(85, 70);
vertex(50, 90);
vertex(15, 70);
vertex(15, 30);
endShap e(CLO SE);

Contours
Vous avez remarqu que jusqu' prsent, toutes les gures donnes
en exemple comportent un contour, ainsi qu'une surface de
remplissage. Si vous voulez rendre invisible le contour, utilisez
no Stro ke() en faisant bien attention de le placer avant la forme
dessiner :
no Stro ke();
quad(10, 10, 30, 15, 90, 80, 20, 80);

Remplissage
De la mme manire, il est possible de dessiner des formes sans
surface de remplissage avec l'instruction no Fill() :
no Fill();
quad(10, 10, 30, 15, 90, 80, 20, 80);

Par dfaut, l'arrire-fond de la fentre de visualisation (l'espace de

dessin) est gris neutre, les contours des gures sont noirs, et la
surface de remplissage est blanche. Vous apprendrez au prochain
chapitre comment modifier les couleurs votre convenance.

31

Primitives 3D
Les formes prdnies disponibles en 3 dimensions (primitives 3D)
peuvent tre ralises de manire simple en appelant size(x, y, P3D )
au dbut de notre sketch puis en employant en fonction de vos
besoins les instructions sp here(taille)
et bo x(lo ngueur, largeur,
p ro fo ndeur) . Il est galement possible de produire des eets
d'clairage sur nos formes tridimensionnelles l'aide de lights() .

La sphre
size(100, 100, P3D );
no Stro ke();
lights();

// clairer l'o bjet 3D

translate(50, 50, 0);

sp here(28);

La bote
size(100, 100, P3D );
no Stro ke();
lights();
translate(50, 50, 0);
ro tateY(0.5);
bo x(40);

32

// vo ir Chap itre "Transfo rm atio ns"

Les couleurs
Dessiner une image l'cran, c'est changer la couleur des pixels. Les
pixels sont des petites zones, le plus souvent carres, qui possdent
une couleur. Chaque couleur se dnit par trois canaux qui sont le
rouge, le vert et le bleu. Une valeur de 100% de chacun de ces trois
canaux donne du blanc. Une valeur de 0% de chacun de ces trois
canaux donne du noir. Il s'agit de lumire, et non de peinture. Ainsi,
plus la valeur de chaque canal sera importante, plus la couleur sera
lumineuse.
Par exemple, 100% de rouge, 80% de vert et 20% de bleu vont
donner ensemble la couleur orange. La mthode fill() nous permet
de spcier la couleur des prochaines formes dessiner. Chaque
canal d'une couleur peut tre donn sur une chelle de 0 255. Ainsi,
80% de 255 donne 204, et 20% de 255 donne 51.

La couleur de fond
On peut changer la couleur de fond en appelant la mthode
backgro und() . Attention : rajouter backgro und() la suite d'une
composition dj existante, l'effacerait !
backgro und(0, 0, 0);

La couleur de remplissage
A chaque fois que l'on dessine une forme, on le fait avec la couleur
de remplissage qui est choisie ce moment-l. On le fait en
appelant la mthode fill() .

no Stro ke();
fill(255, 204, 51);
rect(25, 25, 50, 50);

Processing nous ore dirents formats pour exprimer la couleur. Si

vous faites de la programmation Web, vous connaissez sans doute
le format hexadcimal. Selon ce procd, la mme couleur orange
peut tre obtenue en crivant :
fill(#ffcc33);
rect(25, 25, 50, 50);

33

Par ailleurs, il est possible de spcier la valeur du canal alpha de la

couleur utilise, c'est--dire son degr de transparence. Pour ce
faire, on doit donc prciser quatre paramtres la mthode fill() . Le
quatrime argument est la valeur alpha.
no Stro ke();
fill(255, 204, 51); // o range
rect(25, 25, 50, 50);
fill(255, 255, 255, 127); // blanc sem i-transp arent
rect(35, 35, 50, 50);

Si l'on souhaite choisir une couleur qui correspond un ton de gris, il

sut de donner un seul paramtre la mthode fill() . C'est la
valeur de gris, de 0 255.

fill(127);
rect(25, 25, 50, 50);

On peut dsactiver le remplissage des formes en appelant la

mthode no Fill() .

La couleur du contour
Pour changer la couleur du contour des formes que l'on dessine, on
doit appeler la mthode stro ke() avec comme paramtres les canaux
de la couleur dsire. Appeler no Stro ke() dsactive la couleur de
contour. A titre d'illustration, voici un dessin de masque africain
utilisant ces deux instructions :

size(200, 200);
sm o o th();
backgro und(255); // o n dessine un fo nd blanc
stro ke(#000000); // le co nto ur sera no ir

34

fill(#FFCC66);

// le rem p lissage sera jaune

stro keWeight(3);
translate(width / 2, height / 2);
ellip se(0, 0, 100, 180); // fo rm e ellip tique du m asque
ellip se(0, 60, 20, 25); // ellip se de la bo uche
stro ke(255, 0, 0); // le co nto ur sera ro uge
ellip se(28, -30, 25, 10);

// ellip se de l'o eil dro it

stro ke(0, 0, 255); // le co nto ur sera bleu

ellip se(-27, -30, 25, 10); // ellip se de l'o eil gauche
no Fill(); // les p ro chaines fo rm es n'auro nt p as de rem p lissage
stro ke(#000000);

// le co nto ur des p ro chaines fo rm es sera no ir

bezier(-30, -70, -5, -60, -5, 0, -5, 20); // co urbe du so urcil dro it
bezier(30, -70, 5, -60, 5, 0, 5, 20); // co urbe du so urcil gauche
line(-5, 20, 5, 20); // ligne du nez p o ur jo indre l'extrm it des
co urbes

La porte des modifications de couleur

Par dfaut, toute modification de style (couleur de remplissage ou de
contour, paisseur ou forme de trait) s'appliquera tout ce que vous
dessinerez ensuite. Pour limiter la porte de ces modications, vous
pouvez les encadrer par les commandes p ushStyle() et p o p Style() .

size(100, 100);
backgro und(255);
stro ke(#000000);
fill(#FFFF00);
stro keWeight(1);
rect(10, 10, 10, 10);
p ushStyle(); // O n o uvre une p arenthse de style
stro ke(#FF0000);
fill(#00FF00);
stro keWeight(5);
rect(40, 40, 20, 20);
p o p Style(); // O n ferm e no tre p arenthse de style
rect(80, 80, 10, 10);

Exercice :

35

Supprimez les commandes p ushStyle() et p o p Style() et observez la

diffrence de comportement.

L'espace colorimtrique
Dnir des couleurs partir des canaux rouge, vert et bleu constitue
un moyen parmi d'autres de dcrire l'espace colorimtrique de votre
dessin. Processing supporte galement le mode T SV. T SV signie
teinte, saturation, valeur . En anglais, on appelle ce mode HSB,
pour hue, saturation, brightness . On choisit une chelle de 0
100 pour chacun de ces 3 canaux. La teinte correspond un chire
indiquant la position de la couleur sur l'chelle chromatique, soit un
arc-en-ciel. Le rouge est gauche, puis viens l'orange, le jaune, le
vert, le bleu et le violet.
La mthode co lo rM o de() est utile pour changer l'chelle numrique
que l'on utilise pour spcier les couleurs, et pour changer d'espace
colorimtrique. Par exemple, appeler co lo rM o de(RG B , 1.0) , va changer
l'chelle que l'on utilise pour spcifier chaque canal des couleurs afin
qu'il aille de zro un.
Ici, on change le mode de couleur pour le T SV an de crer un
dgrad de teinte qui ressemble aux couleurs d'un arc-en-ciel.

no Stro ke();
size(400, 128);
// La teinte sera sp cifie avec un chiffre de 0 400
co lo rM o de(HSB , 400, 100, 100);
// O n fait quatre cent rp titio ns
fo r (int i = 0; i < 400; i++) {
fill(i, 128, 128);
rect(i, 0, 1, 128);
}

36

Le texte
On va maintenant dessiner des caractres textuels qui s'acheront
dans la fentre de visualisation. Attention : crire dans l'espace de
dessin ne ressemble pas l'criture dans le sens classique du terme,
notamment comme dans un traitement de texte. Le texte dans
Processing ressemblerait plutt du grati urbain , c'est--dire
une sorte de peinture de caractres alphanumriques qui niront
tous par sempiler les uns sur les autres. C'est davantage un procd
typo-graphique qu'un travail d'criture, avec une insistance sur
l'aspect graphique des mots ou des lettres que nous allons dessiner.

Bonjour Processing !
Tout comme les formes prdnies, telles les lignes ou les ellipses,
il sut d'une seule instruction dans notre sketch pour dessiner du
texte. Ouvrez une nouvelle fentre d'dition, tapez la ligne suivante,
et excutez-la en cliquant sur le bouton run :
text("Salut!", 10, 20);

Vous devriez voir s'acher la petite fentre de visualisation par

dfaut de 100 x 100 pixels, avec le mot Salut ! crit en blanc :

Comme son nom l'indique, l'instruction text() dessine du texte dans

la fentre de visualisation. Elle requiert trois paramtres : {le
message que nous voulons crire}, {sa coordonne x}, {sa
coordonne y}.
Ce texte peut galement tre color, comme n'importe quelle
forme gomtrique, en changeant la couleur de remplissage :
fill(0);
text("Salut", 10, 20);
fill(255);
text("to ut", 10, 40);
fill(255,0,0);
text("le", 10, 60);
fill(0,0,255);
text("m o nde", 10, 80);

Ce programme devrait vous donner le rsultat suivant, avec chacun

des quatre mots crits avec leur propre couleur :

37

Il sut d'indiquer une couleur, puis dessiner du texte avec cette

couleur. Bien sr vous pouvez ne choisir qu'une seule couleur et
dessiner plusieurs messages avec cette couleur, ou dessiner avec
une combinaison de couleurs comme dans cet exemple.

Empilement
Comme nous l'avons indiqu dans l'introduction de ce chapitre, les
mots s'inscrivent l'intrieur de la fentre de visualisation tel un
dessin et non pas tel un systme de traitement de texte. On ne peut
ni slectionner ni modier directement ce texte l'aide de la souris
ou du clavier. La seule modication qui peut tre applique s'eectue
au niveau de votre programme en prcisant l'aide d'instructions
appropries que vous souhaitez par la suite effacer compltement le
texte et d'crire par dessus.
Voici une illustration rapide de ce principe de superposition :
fill(0);
text("un m o t p eut", 10, 20);
text("en cacher", 10, 40);
fill(204);
rect(28,25,50,20);
fill(0);
text("un autre", 10, 60);
fill(255, 255, 255);
text("un autre", 11, 61);

Nous avons crit quatre messages, parfois avec la mme couleur,

parfois avec une autre. Notez que le mot cacher a t cach
justement par la couleur de remplissage qui a t dnie avec la
mme valeur que celle utilise pour dessiner le fond.

Comme dans n'importe quel dessin, l'ordre des oprations est

important pour dterminer le rendu nal. Ce principe s'applique
mme en dehors du logiciel Processing : s'habiller, sortir, aller au
travail ne donnera pas le mme rsultat que sortir, aller au
travail, s'habiller .

38

DESSINER PLUS

39

Les images
Ce que nous appelons image dans Processing n'est en fait rien
d'autre qu'une collection de pixels, rassembls l'intrieur d'un
rectangle. Pour dessiner une image l'cran, nous devons donner
une couleur chacun des pixels d'un rectangle, puis donner la
position en {x,y} o nous voulons dessiner cette collection de pixels.
Il est aussi possible de modier la taille {largeur,hauteur} de notre
image, mme si ces dimensions ne correspondent pas la taille
originelle de l'image.

Trouver une image

Pour dessiner une image dans Processing, il faut commencer par
trouver une image et l'importer dans notre sketch. Vous pouvez
prendre une photo l'aide de votre appareil numrique ou
directement depuis votre webcam ou bien encore eectuer une
recherche d'images se trouvant dj dans le disque dur de votre
ordinateur. Pour cet exercice, l'origine de l'image importe peu. Par
contre, nous recommandons de commencer avec une image
relativement petite, par exemple d'une largeur de 400 x 300 pixels.

Ici nous allons commencer avec une image lgrement rduite de

l'le des peupliers Ermenonville, trouve sur le site Commons de
Wikimedia (base de donnes d'images et de mdias appartenant au
domaine public ou sous licence libre) l'adresse suivante :
http://fr.wikipedia.org/wiki/Fichier:Erm6.JPG

Formats d'image
Trois formats de chier d'image sont accepts dans Processing :
PNG, JPEG, ou GIF. Ceux qui ont de l'exprience dans la conception
de sites web devraient reconnatre ces trois formats, car ce sont les
plus rpandus sur la Toile. Chaque format utilise ses propres
mthodes de compression de l'image (rduction de la taille
mmoire de l'image occupe sur l'ordinateur), lui donnant la fois
des avantages et des dsavantages et que nous pouvons rsumer de
la manire suivante :
1. JPEG est souvent utilis pour compresser des images de

40

1. JPEG est souvent utilis pour compresser des images de

type photographique. Ce format ne permet pas d'avoir des
zones transparentes.
2. GIF est historiquement utilis pour l'illustration de
boutons et autres lments graphiques de l'espace de
travail d'un programme. Sur les sites internet, ce format est
utilis pour les logos et de manire gnrale pour les
dessins raliss par ordinateur (notamment ceux qui
comportent des aplats de couleurs). Ce format peut
contenir des zones transparentes binaires (soit opaques soit
transparentes, sans possibilit d'opacit intermdiaire). Il
existe des images gif animes, mais Processing ignorera cet
aspect.
3. PNG est de plus en plus utilis pour les deux usages
(photos + dessins) et peut contenir des zones transparentes
non binaires, orant des niveaux d'opacit (opaque, semiopaque, totalement transparent).

Glisser-dposer
Nous allons maintenant importer le chier de cette image dans
l'environnement Processing. Pour bien russir cette tape, nous
vous recommandons de sauvegarder d'abord votre sketch, de
prfrence dans le dossier processing qui devrait se trouver par
dfaut dans le dossier Documents ou Mes documents de votre
ordinateur.
Localisez maintenant votre chier d'image, et glissez-le directement
sur la fentre Processing :

Lorsque nous glissons les chiers de cette manire, Processing nous

indique dans la bande grise de la console qu'il a ajout ce chier
dans le sketch . En ralit, Processing a simplement copi cette
image dans un dossier nomm data, qui devrait maintenant se
trouver ct de votre programme.pde que vous venez de
sauvegarder.

41

C'est dans ce dossier data que nous devons placer en ralit toutes
les images dont nous voulons nous servir dans notre sketch. C'est
dans cet emplacement que doivent galement tre rangs les
autres fichiers mdias comme les polices ou les sons.
Pour accder rapidement ce dossier, an par exemple d'y placer de
nouveaux chiers d'images, il sut de slectionner, dans le menu
Sketch, l'option Show Sketch Folder. Cette option est galement
accessible via le raccourci Ctrl-k sur Windows et GNU/Linux ou
Cmd-k sur Mac :

42

Importer une image

Maintenant que nous avons plac une image dans notre dossier
data, nous pouvons dsormais nous en servir dans notre
programme.
size(500,400);
PIm age ile;
ile = lo adIm age("ile.jp g");
im age(ile,50,10);

D'abord nous avons donn notre espace de dessin une taille plus
grande que notre image, juste pour mieux comprendre comment
celle-ci peut tre positionne dans le sketch final.
Il y a trois tapes pour afficher une image dans Processing :
1. Crer une variable qui contiendra les donnes (en pixels)
de notre image.
2. Importer les pixels d'un fichier dans notre variable.
3. Dessiner les pixels de cette variable dans notre espace de
dessin.

43

Tout d'abord, nous devons crer une variable Processing, avant

d'importer notre fichier dedans. Mais avant tout, quoi sert une
variable ? Et bien dans ce cas prcis, il s'agit d'un nom interne
notre programme qui contient l'ensemble des pixels de notre chier
ile.jpg. A chaque fois que nous crirons par la suite le mot ile
dans notre programme, Processing comprendra qu'il s'agit de la
suite de valeurs en pixels qui composent notre image. C'est
justement le rle de cette action lo adIm age("no m defichier") d'aller
chercher ces pixels dans le chier et les importer dans notre
variable nomm ile .
Vous avez peut-tre galement not un mot trange au tout dbut
du code ci-dessus, le mot PIm age . Celui-ci indique Processing le genre
de la variable et lui permettra de consacrer assez de mmoire dans
votre ordinateur pour contenir l'ensemble des donnes de ce genre.
Dans le cas de n'importe quelle variable, la syntaxe utiliser est
{type de la variable} {nom de la variable} = {les valeurs de la
variable}.
Par exemple, si par un tour de force il tait possible d'importer un
petit chien tout mignon dans Processing, il surait d'crire PetitChio t
m ilo u = lo adD o g("m ilo u.do g"); On crit d'abord le type de la chose, le
nom de la chose, et enfin on lui donne sa valeur.
Ici, cette valeur est donne par la fonction lo adIm age() qui va aller
chercher les pixels de l'image dans le chier et les importera dans
notre variable nomme ile .
Pour plus d'informations sur les variables et les dirents types de
variables, reportez-vous au chapitre ddi ce sujet.
Enn, une fois notre variable remplie, nous la dessinons une
position {x,y} dans notre sketch. Si nous voulons dessiner notre
image sa taille originelle, nous utilisons la version courte de
l'instruction im age qui ncessite uniquement trois paramtres :
{PIm age}, {x}, {y} .
im age(ile,50,10)

Importer une image web

Nous pouvons galement importer des images directement depuis
Internet, en indiquant l'adresse web de l'image la place du nom de
fichier.
size(400,400);
PIm age webcam ;
webcam = lo adIm age("http ://www.gutenberg.o rg/files/3913/3913h/im ages/ro usseau.jp g");
im age(webcam ,10,20,width,height);

Si notre programme n'est pas anim, comme c'est le cas ici, il y aura
juste une longue pause lorsque l'image se charge dans Processing.

44

Par contre, faites bien attention placer ce type d'instructions au

dbut du sketch sinon vous risquez de ralentir fortement le
fonctionnement des autres parties du programme, celles-ci devant
attendre le tlchargement complet de vos images depuis Internet
avant de s'excuter. Dans des cas trs spciques, si vous avez
besoin d'importer des images web en plein milieu de votre sketch,
sachez qu'il existe des techniques appropries dnommes ls
d'excution . Ces techniques sparent le chargement de chiers
mdias depuis internet du reste des fonctions du programme. Il
s'agit malheureusement d'un sujet trop avanc pour ce manuel.
Pour davantage d'informations sur les ls dexcution, reportez-vous
au forum du site de Processing en faisant une recherche sur le mot
thread .

Changer de taille
En ajoutant deux paramtres, nous pouvons changer la taille de
l'image. Cette taille peut tre plus petite ou plus grande que l'image
d'origine, et priori il n'y a pas vraiment de limite. Par contre, audel de la taille d'origine de l'image, Processing sera oblig
d'inventer des pixels en doublant les originaux, ce qui donnera un
eet pixelis. Cet eet n'est pas forcment indsirable, vous de
voir.
Pour changer la taille de l'image, il sut de rajouter deux
paramtres votre image, {largeur, hauteur}, ce qui nous amne 5
paramtres : {variableImage, x, y, largeur,hauteur}.

size(500,250);
PIm age ile;
ile = lo adIm age("ile.jp g");
im age(ile,10,10,20,15);
im age(ile,20,20,50,30);
im age(ile,45,45,100,75);
im age(ile,95,95,1000,750);

45

Notez que nous avons import qu'une seule fois l'image dans notre
variable ile et que celle-ci peut tre dornavant utilise pour le
restant de notre programme. Notez galement que nous avons
respect les proportions {x,y} de notre image dans le changement
de la taille, mais que celles-ci auraient pu prendre n'importe quelle
valeur, ce qui reviendrait tirer l'image sur un de ces deux axes.

Rendre transparent l'arrire-plan d'une image

Souvent nous avons besoin d'importer des images qui ne sont ni
carres, ni rectangulaires, comme dans le cas d'un petit jeu vido
utilisant des silhouettes de personnages en deux dimensions : nous
ne voulons pas voir en permanence un carr blanc autour du prol
de notre hros. Malheureusement, ce jour, les images base de
pixels doivent tre importes dans un format carr.
Pour lever cette contrainte, certains formats de chiers font appel
une couche alpha pour grer la transparence de certaines zones de
l'image et ainsi laisser apparatre les lments qui sont situs
derrire elles (un fond color ou illustr par exemple). Cette couche
se superpose aux couches rouge, vert, bleu utilises pour composer
l'image et indique l'intensit de la transparence pour chaque pixel,
avec mme la possibilit de pixels semi-transparents dans le cas du
format PNG.
Si vous voulez sauvegarder votre image avec une couche alpha,
vous avez trois possibilits qu'il faut choisir lors de l'exportation de
votre image dans votre logiciel de traitement d'image prfr :

46

Chaque logiciel exportera les images sa manire. Sachez juste qu'il

existe une dirence par exemple entre GIF, PNG-8, et PNG-24,
notamment sur la faon dont chaque format va traiter cette couche
alpha. Le plus sr des trois, et qui vous donnera plus d'options, c'est
le PNG-24.
Voici une image du philosophe Jean-Jacques Rousseau avec un fond
transparent.

Quel que soit le fond sur lequel elle sera place, cette image s'y
intgrera parfaitement parce qu'elle contient justement une couche
alpha dcrivant les parties transparentes et non transparentes du
carr de pixels qui la composent. Notez que les pixels autour de
Rousseau sont transparents, alors que son front et son cou sont
opaques.
N'hsitez pas copier cette image au format png sur votre
ordinateur depuis la version en ligne de ce manuel :
http://fr.flossmanuals.net/processing/, chapitre Les images (conue
partir d'une illustration mise disposition sur le site Commons de
Wikimedia, cette image est libre de droit).
Dans notre programme Processing, nous allons pouvoir constater
que les pixels situs autour du personnage sont eectivement
transparents en superposant l'image de Rousseau (au format png)
avec celle du paysage prcdemment utilise (au format jpg) :

47

size(400,300);
PIm age ile;
ile = lo adIm age("ile.jp g");
PIm age ro usseau;
ro usseau = lo adIm age("ro usseau.p ng");
im age(ile,0,0);
im age(ro usseau,20,20);

Colorier les images

On peut galement colorier les images. Autrement dit, on peut
changer la couleur des pixels, soit dans leur ensemble, soit
individuellement. La plus simple de ces mthodes concerne le
coloriage de l'ensemble des pixels. Cette mthode de coloriage
ressemble peu prs au coloriage de rectangles, mais ncessite une
nouvelle instruction, tint() , pour le distinguer du coloriage direct des
pixels l'intrieur du rectangle. Dans le cas de tint() , Processing va
modier la couleur de chaque pixel au moment o celui-ci est
dessin dans l'espace de dessin.

size(500,130);
PIm age ile;

48

ile = lo adIm age("ile.jp g");

tint(255,0,0);
im age(ile, 10,10, 110,110);
tint(255,255,0);
im age(ile, 130,10, 110,110);
tint(255,255,255,127);
im age(ile, 250,10, 110,110);
tint(0,0,255,127);
im age(ile, 320,10, 110,110);

T out comme les instructions fill() et stro ke() , l'instruction tint() peut
prendre une, deux, trois, ou quatre valeurs, selon ce que nous
voulons faire. En indiquant trois paramtres, par exemple, nous
pouvons augmenter/diminuer l'intensit de la couche rouge, vert,
o u bleu de notre image. En indiquant quatre paramtres, nous
pouvons augmenter/diminuer, en plus de ces trois couleurs, la
valeur de transparence/opacit de l'image.

49

Les styles de bordures

Le style des traits et des bordures des formes gomtriques peut
tre ajust an d'viter l'apparition d'eets graphiques indsirables
sur les lignes obliques, aux intersections ou en bout de ligne.
Direntes commandes permettant d'aner le rendu sont
prsentes ci-dessous.

smooth
La mthode sm o o th() permet d'activer le lissage des contours. Elle
permet d'viter l'eet d'escalier qui apparat sur les lignes
diagonales.
line(10, 0, 100, 90);

// Ligne sans lissage

//O n active le lissage

sm o o th();
line(0, 10, 90, 100); // Ligne lisse

strokeWeight
La mthode stro keWeight() permet de varier l'paisseur d'une ligne ou
d'un contour.
line(10, 0, 100, 90); // Ligne de 1 p ixel d'p aisseur
stro keWeight(5); //O n dfinit l'p aisseur 5 p ixels
line(0, 10, 90, 100); // Ligne de 5 p ixels d'p aisseur

strokeCap
La mthode stro keCap () permet de dnir l'apparence des extrmits
d'une ligne. Cette mthode n'est pas utile pour les formes. Elle peut
avoir les valeurs SQ U ARE (extrmit carr), PRO JECT (extrmit avec 2
petits angles briss) ou RO U N D (extrmit arrondie). Par dfaut c'est le
mode RO U N D qui est utilis. Cette mthode ne fonctionne pas avec P3D
ou O p enG L .
stro keWeight(10); // O n dfinit l'p aisseur des traits 10 p ixels
stro keCap (RO U N D ); // extrm it arro ndie
line(20, 40, 60, 80);

50

stro keCap (PRO JECT); // extrm it avec 2 p etits angles briss

line(20, 20, 80, 80);
stro keCap (SQ U ARE); // extrm it carr
line(40, 20, 80, 60);

strokeJoin
La mthode stro keJo in() permet de modier l'aspect des jointures.
Elle peut avoir les valeurs M ITER , B EVEL ou RO U N D . Par dfaut c'est le
mode M ITER qui est utilis. Cette mthode ne fonctionne pas avec P3D
ou O p enG L .
size(300, 100); // O n m o difie la taille du sketch
stro keWeight(10); // O n dfinit l'p aisseur 10 p ixels
stro keJo in(M ITER); // Jo inture carr
rect(20, 20, 60, 60);
stro keJo in(B EVEL); // Jo inture brise
rect(120, 20, 60, 60);
stro keJo in(RO U N D ); // Jo inture arro ndie
rect(220, 20, 60, 60);

51

La typographie
Ce chapitre va vous permettre de personnaliser l'usage des textes
dans Processing en utilisant des polices de caractres alternatives.

La forme des mots

Si nous voulons dessiner avec une autre forme typographique que
celle dfinie par dfaut, il faut effectuer quelques tapes pralables :
1. Convertir une police de caractres en un format de chier
compatible avec Processing ;
2. importer ce chier dans le code du programme (ce chier
comporte toutes les informations graphiques dcrivant
l'apparence de la police utilise) ;
3. slectionner cette police et l'activer dans notre
programme ;
4. dessiner du texte dans notre sketch l'aide des
instructions appropries pour que le rsultat s'ache dans
la fentre de visualisation de Processing.

Importer une police de caractres

Pour dessiner du texte dans notre fentre de visualisation, il faut
choisir tout d'abord son apparence, en indiquant sa police de
caractres. Pour bien russir cette tape, nous vous recommandons
de sauvegarder d'abord votre sketch dans votre dossier de travail
(voir chapitre Bases de Processing). Une fois notre sketch
sauvegard, nous allons slectionner, dans le menu Tools, l'action
Create Font...

A priori nous devrions maintenant voir une fentre Create Font qui
permet de convertir quasiment n'importe quelle police de caractre
en une forme utilisable dans notre sketch. Cette police doit tre
installe au pralable dans notre ordinateur pour qu'elle apparaisse
dans cette liste.

52

Cette fentre est dcompose en quatre parties :

1. La liste des polices actuellement installes sur notre
ordinateur,
2. Une prvisualisation de la police actuellement
slectionne, ache la taille indique dans le prochain
champ (la zone numrote 3 dans la copie d'cran cidessus),
3. A peu prs la taille maximale laquelle nous voulons
dessiner cette police,
4. Le nom du chier de cette police, une fois convertie dans
le format natif de Processing (.vlw).
Vous avez peut-tre not qu'il existe galement une case cocher
Smooth qui active/dsactive l'anti-aliasing (fonction de lissage des
polices pour viter un eet de crnelage), ainsi qu'un bouton
Characters... qui permet de prciser les caractres spciaux qui
doivent tre inclus lors de la conversation de la police. Pour ne pas
compliquer les choses, nous allons laisser ces deux options avec
leurs valeurs par dfaut.

53

Dans l'illustration ci-dessus nous avons slectionn la police

Georgia. C'est partir du nom de cette police et de sa taille que
Processing gnrera le chier de la police importer, ex : GeorgiaItalic-48.vlw . Notons enn que l'extension .vlw associe
l'intitul du chier sera rajoute toutes les polices que nous
importerons de cette manire. Si par curiosit vous vous intressez
l'origine de cette extension, son nom fait rfrence sous forme d'un
acronyme au Visual Language Workshop (vlw) du MIT Media
Lab. C'est ce laboratoire qui historiquement est l'origine d'un
certain nombre de principes et de travaux qui ont permis
Processing de voir le jour.
Si nous voulons savoir o Processing a sauvegard notre police, il
sut de slectionner, dans le menu Sketch, l'action Show Sketch
Folder.
Cette action fera apparatre le dossier data dans lequel notre
police a t sauvegarde. Son chier s'appelle Georgia-Italic48.vlw . C'est ce nom que nous devons retenir pour intgrer la
police dans notre programme.

Dessiner une phrase

Nous allons enn dessiner avec notre police. Pour cela, il faut faire
trois choses :
1. Importer le chier Georgia-Italic-48.vlw dans une variable
an que notre programme connaisse le nom de la police
utilise et sache la dessiner lorsqu'il achera du texte. Ce
chier contient en eet les informations dcrivant la
structure gomtrique de la police pour pouvoir la
reproduire ;
2. Slectionner cette variable dans notre programme
comme police active ;
3. Dessiner un caractre ou une phrase quelque part dans
notre sketch l'aide des instructions appropries pour le
voir ensuite s'acher dans la fentre de visualisation de
Processing.
En option, il est possible de choisir la taille laquelle nous voulons
dessiner avec notre police, mais comme nous avons dj paramtr
cet aspect lors de la cration du chier, il ne sera pas ncessaire de
l'indiquer ici.

54

Voici le code complet d'un programme simple qui runit toutes ces
tapes pour dessiner une phrase dans la fentre de visualisation. Par
tradition, nous allons faire nos premiers pas dans l'criture en
crivant Salut tout le monde ! .
size(500,150);
PFo nt p o lice;
p o lice = lo adFo nt("G eo rgia-Italic-48.vlw");
textFo nt(p o lice,48);
text("Salut to ut le m o nde !", 20, 75);

Tout d'abord, nous avons x la taille de notre fentre de

visualisation (l'espace de dessin), comme dans quasiment n'importe
quel programme Processing.
Ensuite, nous avons import notre fichier dans une variable
Processing (dnomme police). A quoi sert une variable ? Et bien
dans ce cas prcis, il s'agit d'un nom interne notre programme qui
fait rfrence au chier de la police Georgia-Italic-48.vlw que nous
souhaitons utiliser. A chaque fois que nous crirons par la suite le
m o t p o lice dans notre programme, Processing comprendra qu'il
s'agit de faire appel la police Georgia Italic 48 contenue dsormais
dans ce mot.
Vous avez peut-tre galement not un mot trange en tout dbut
de cette phrase, le mot PFo nt . Celui-ci indique Processing le genre
de la variable et lui permettra d'ouvrir assez de mmoire pour
contenir l'ensemble des donnes de ce genre. Dans le cas de
n'importe quelle variable, la syntaxe utiliser est {type de la
variable} {nom de la variable} = {les valeurs de la variable}.
Par exemple, si par un tour de force il tait possible d'importer un
petit chaton tout mignon dans Processing il surait d'crire
p etitChato n m io um io u = lo adPetitChato n("m io um io u.chat"); On crit d'abord
le type de la chose, le nom de la chose, et enn on lui donne sa
valeur. Ici, cette valeur est donne par la fonction lo adFo nt() qui va
aller chercher la structure gomtrique de la police dans le chier
et l'importera dans notre variable nomme p o lice .
La suite de notre programme est probablement un peu plus intuitive.
Nous slectionnons la police avec laquelle nous voulons dessiner.
Mme s'il n'existe qu'une seule police actuellement dans notre
programme, il faut nanmoins passer par cette tape. Notez que
vous pouvez importer autant de polices que vous voulez et passer de
l'un l'autre, l'image de ce qu'il est possible de faire avec les
couleurs.
Dans cet exemple, nous avons indiqu la taille de la police juste pour
vous montrer qu'il est possible de la changer en cours de route.
Enn, nous dessinons une petite phrase et indiquons la position {x,y}
o notre texte doit se dessiner. On obtient le rsultat suivant :

55

Point d'origine
Pour rendre plus clair le rapport entre la position {x,y} de notre
message et sa forme typographique, nous avons galement dessin
dans l'illustration ci-dessus une petite croix pour rendre plus
explicite la faon dont Processing positionne l'criture :
size(500,150);
PFo nt p o lice;
p o lice = lo adFo nt("G eo rgia-Italic-48.vlw");
textFo nt(p o lice);
text("Salut to ut le m o nde !", 20, 75);
// indiquer la p o sitio n d'o rigine du texte
stro ke(255,0,0);
line(15,70,25,80);
line(15,80,25,70);

Tout comme les rectangles, qui peuvent se dessiner depuis leur

point suprieur gauche, depuis leur centre, ou depuis ses quatre
extrmits, lcriture du texte peut galement tre positionne
partir de plusieurs points d'origine. Par dfaut, le texte s'crit depuis
la ligne de base du texte, c'est--dire le point en bas gauche du
texte, mais au-dessus des caractres descendants comme les lettres
y ou j .
Vous pouvez changer la faon dont Processing alignera ce texte, en
se servant de la fonction textAlign() :
size(500,250);
PFo nt p o lice;
p o lice = lo adFo nt("SansSerif-24.vlw");
textFo nt(p o lice,24);
line(250,0,250,500);
line(0,125,500,125);
textAlign(RIG HT,TO P);
text("right+to p ", 250, 125);
textAlign(RIG HT,B ASELIN E);
text("right+baseline", 250, 125);

56

textAlign(LEFT,CEN TER);
text("left+center", 250, 125);

57

Les transformations
Jusqu' prsent, nous avons dessin des formes dans la fentre de
notre application, en nous reprant toujours par rapport au coin
suprieur gauche de la fentre.
Grce aux transformations, il va tre possible de dplacer cette
origine, mais aussi de rednir l'orientation des axes et mme de
changer la graduation de ces axes (on parle de changement
d'chelle).
Par dfaut, lorsque l'on dessine une forme (dans notre exemple un
rectangle), Processing dfinit le repre suivant :

size(200, 200);
no Stro ke();
fill(0);
rect(0, 0, 100, 100);

Dplacer
Le changement de la position de l'origine se fait par la commande
translate(). Nous pouvons nous dplacer sur l'axe x
( horizontalement ) et sur l'axe y ( verticalement ) et nous
allons indiquer translate() de combien nous voulons nous
dplacer sur chacun des axes. Dans l'exemple suivant, nous
dplaons l'origine de notre repre de 50 pixels en x et de 50 pixels
en y. Notons que translate() va seulement aecter les formes
gomtriques qui sont dessines aprs cette instruction.

58

size(200, 200);
no Stro ke();
fill(0);
translate(50, 50);
rect(0, 0, 100, 100);

Enchaner les translate() permet d'accumuler les dplacements

comme le montre l'exemple suivant.

size(200,200);
// N o ir
fill(0);
translate(20,20);
rect(0,0,40,40);
// G ris
fill(128);
translate(60,60);
rect(0,0,40,40);
// B lanc
fill(255);
translate(60,60);
rect(0,0,40,40);

Tourner
Nous avons pu dplacer l'origine du repre de dessin. Nous allons
maintenant appliquer une rotation sur les axes de notre repre.
Grce la commande rotate(), les axes x et y peuvent changer
d'orientation. rotate() prend en paramtre un nombre qui va
reprsenter l'angle de rotation, c'est--dire de combien nos axes
vont tourner par rapport notre fentre. Des valeurs positives
indiquent une rotation dans le sens des aiguilles d'une montre.

59

Deux systmes de mesure existent pour mesurer un angle : les

radians et les degrs. Par dfaut, Processing travaille en radians mais
pour nous il est d'habitude plus facile de raisonner en degrs. Par
exemple tourner de 180, c'est faire un demi-tour.
Processing permet de passer de transformer une unit en une autre
grce aux fonctions radians() et degrees().
flo at d = degrees(PI/4); // transfo rm e des radians en degrs
flo at r = radians(180.0); // transfo rm e des degrs en radians

Illustrons la fonction rotate() par un exemple simple. Nous allons

faire pivoter un carr autour de l'origine.

size(200, 200);
no Stro ke();

60

fill(0);
ro tate(PI/4);
rect(0, 0, 100, 100);

Comme pour translate(), rotate() se place avant les formes

gomtriques dessiner. Il est possible de combiner ces
changements d'orientations, qui vont s'accumuler.

size(200,200);
sm o o th();
translate(width/2, height/2);
fo r (int i=0;i<360;i+=30){
ro tate(radians(30));
quad(0, 0, 30, 15, 70, 60, 20, 60);
}

Mettre l'chelle
La mise l'chelle permet de redimensionner les objets par la
commande scale(). Cette fonction permet d'agrandir ou de diminuer
la taille des formes gomtriques. Elle accepte un ou deux
paramtres. Par exemple, scale(0.5) va diminuer de moiti la taille
des formes gomtriques tandis que scale(2.0) va la doubler, scale(1)
n'a aucun effet.
L'criture avec deux paramtres permet de dcoupler le
redimensionnement en x et en y. Par exemple, scale(0.5, 2.0) va
craser la forme sur les x de moiti tandis que sur les y sa taille sera
double.

size(200,200);
scale(1.5);

61

rect(0,0,100,100);

size(200,200);
scale(1.0,1.5);
rect(0,0,100,100);

Comme pour rotate() et translate(), l'enchainement de scale()

permet d'accumuler les mises l'chelle. Illustrons cette proprit
par le sketch suivant, qui reprend l'ide des poupes russes en
emboitant des carrs par le jeu des scale() successifs.

size(200,200);
no Stro ke();
// N o ir
fill(0);
scale(1);
rect(0,0,200,200);
// G ris
fill(128);
scale(0.5);
rect(0,0,200,200);
// B lanc
fill(255);
scale(0.5);
rect(0,0,200,200);

62

L'ordre des transformations

Il est possible de combiner plusieurs types de transformations.
Comme nous l'avons vu dans les exemples prcdents, les
transformations s'accumulent au fur et mesure des appels
successifs translate(), rotate() ou scale() et chacune des
transformations tient compte des transformations prcdentes.
Lorsqu'on utilise plusieurs types de transformations, leur ordre
d'criture va tre important. Lorsque vous tes en voiture, tourner
gauche puis continuer tout droit est dirent de continuer
tout droit puis tourner gauche . Vous n'arrivez pas forcment
au mme endroit en suivant successivement ces deux instructions.
C'est la mme chose pour les transformations dans Processing.
Illustrons ceci par un exemple en inversant un translate() et un
rotate().

size(200,200);
sm o o th();
fill(0);
translate(100,0);
ro tate(PI/5);
rect(0,0,100,100);

size(200,200);
sm o o th();
fill(0);
ro tate(PI/5);
translate(100,0);
rect(0,0,100,100);

63

rect(0,0,100,100);

Isoler les transformations

Nous venons de voir que les transformations s'accumulaient au fur
et mesure de l'utilisation des commandes translate(), rotate() et
scale(). Nous allons voir prsent comment sauvegarder les
transformations un moment donn et comment les restaurer
ensuite, au cours d'une animation interactive faisant appel la
mthode draw().
Nous allons utiliser pour cela deux fonctions qui s'utilisent toujours
par paire : pushMatrix() et popMatrix(). Nous verrons en n de
chapitre pourquoi ces deux fonctions portent un nom si bizarre.
Pour les deux exemples qui suivent, nous allons identier les
transformations suivantes :
A : origine en haut gauche de la fentre.
B : origine au centre de l'cran.
C : origine au centre de l'cran, rotation de PI/4.

size(200,200);
sm o o th();
rectM o de(CEN TER);
// Rep re au centre de l'cran
translate(width/2,height/2);
// Sauvegarde de A
p ushM atrix();
// Transfo rm atio n B
ro tate(PI/4);
// D essin du carr no ir
fill(0);
rect(0,0,120,120);
// Restauratio n A
// A ce p o int-l, no tre rep re revient au centre de l'cran
p o p M atrix();
// D essin du carr blanc qui ne tient p as co m p te de la ro tatio n
fill(255);
rect(0,0,50,50);

64

Il est possible d'imbriquer les sauvegardes de transformations, c'est-dire

qu' l'intrieur de
n'importe
quelle
paire
de
pushMatrix()/popMatrix() nous pouvons rappeler ces fonctions pour
sauver l'tat de la transformation courante.
Reprenons l'exemple prcdent en plaant une paire
pushMatrix()/popMatrix() qui encadre la premire transformation
translate(width/2, height/2).

size(200,200);
sm o o th();
rectM o de(CEN TER);
no Stro ke();
// Sauvegarde de A
p ushM atrix();
// Transfo rm atio n B
translate(width/2,height/2);
// Sauvegarde de B
p ushM atrix();
// Transfo rm atio n C
ro tate(PI/4);
// D essin du carr no ir
fill(0);
rect(0,0,120,120);
// Restauratio n de B
p o p M atrix();
// D essin du carr blanc qui ne tient p as co m p te
// de la ro tatio n ro tate(PI/4)
fill(255);
rect(0,0,50,50);
// Restauratio n de A
p o p M atrix();
// D essin du carr gris
fill(128);
rect(0,0,100,100);

65

Transformer en 3D
Toutes les transformations que nous venons d'aborder sont
applicables en trois dimensions (3D). Processing permet de passer
en 3D au moment de l'appel size() :
size(300,300,P 3 D );

Dans ce mode, Processing dnit un axe z qui pointe vers le fond de

l'cran.

Les transformations de dplacement et de mise l'chelle vont

s'crire en intgrant un troisime paramtre. Par exemple, pour se
dplacer au centre de l'cran le long de x et y puis dessiner les
formes comme si elles taient loignes de nous, nous pourrions
crire la ligne de code suivante :
translate(width/2, height/2, -100);

Pour les rotations, nous disposons de trois fonctions : rotateX,

rotateY et rotateZ qui permettent respectivement de tourner autour
des axes x, y et z.
Processing intgre des fonctions de dessin de formes simples en 3D,
notamment les cubes et les sphres. Nous allons crer un cube
dont la rotation autour des axes x et y va tre paramtr par la
position de la souris.

66

flo at rx = 0;
flo at ry = 0;
flo at z = 100;
vo id setup () {
size(200,200,P3D );
}
vo id draw() {
backgro und(128);
rx = m ap (m o useX, 0,width,-PI,PI);
ry = m ap (m o useY, 0,height,-PI,PI);
translate(width/2,height/2,z);
ro tateX(rx);
ro tateY(ry);
bo x(30);
}

Dans ce sketch, nous avons introduit une nouvelle fonction map(),

qui permet de transformer une valeur d'une plage de valeurs une
autre plage de valeurs. Voici un exemple simple pour expliquer ce
concept :
flo at v = 100;
flo at m = m ap (v,0,200, 0,1); // m vaut 0.5

Dans cet exemple, map()va transformer la valeur 100 qui est dans
l'intervalle [0;200] et calculer la valeur quivalente dans l'intervalle
[0;1]. La valeur 0.5 est retourne dans m.
Dans notre sketch, cette fonction permet de transformer la valeur
de mouseX dans l'intervalle situ entre 0 et width en une valeur
quivalente dans l'intervalle entre -PI et PI.
Les concepts de pushMatrix() et popMatrix() sont aussi applicables
en 3D pour sauvegarder et restaurer les transformations. C'est le
meilleur moyen pour dessiner des univers en 3D, contenant
plusieurs objets en mouvement les uns par rapport aux autres sans
avoir recours des concepts mathmatiques complexes.
Toutes les transformations dans Processing sont stockes dans un
tableau de 16 nombres qui est appel matrice ou matrix en anglais.
Ces nombres sont directement modis par des appels aux
fonctions de transformations. Si vous tes curieux, vous pouvez
imprimer ce tableau par la fonction printMatrix().

67

PROGRAMMER

68

Les variables
Une variable est une donne que l'ordinateur va stocker dans
l'espace de sa mmoire. C'est comme un compartiment dont la
taille n'est adquate que pour un seul type d'information. Elle est
caractrise par un nom qui nous permettra d'y accder facilement.

Il existe dirents type de variables : des nombres entiers (int) , des

nombres virgule (flo at) , du texte (String) , des valeurs vrai/faux
(bo o lean) . Un nombre dcimales, comme 3,14159, n'tant pas un
nombre entier, serait donc du type flo at . Notez que l'on utilise un
point et non une virgule pour les nombres dcimales. On crit
donc 3.13159 . Dans ce cas, les variables peuvent tre annonces de
cette manire :
flo at x = 3.14159;
int y = 3;

Le nom d'une variable peut contenir des lettres, des chires et

certains caractres comme la barre de soulignement. chaque fois
que le programme rencontre le nom de cette variable, il peut lire ou
crire dans ce compartiment. Les variables qui vont suivre vous
donneront des exemples simples de leur utilisation. Pour rsumer,
une variable aura un type, un nom et une valeur qui peut tre lue ou
modifie.

int
Dans la syntaxe de Processing, on peut stocker un nombre entier,
par exemple 3, dans une variable de type int .
int entier;
entier = 3;
p rint(entier);

float
Il s'agit d'un nombre avec dcimales, par exemple 2,3456.
flo at decim al;
decim al = PI;
p rint(decim al);

double
Il s'agit galement de nombre avec dcimales, mais qui fournissent
davantage de prcision que le type float.

69

do uble lo ng_decim al;

lo ng_decim al = PI;
p rint(lo ng_decim al);

boolean
Il s'agit d'un type de variable qui ne connat que deux tats : Vrai
(true ) ou Faux (false ). Elle est utilise dans les conditions pour
dterminer si une expression est vraie ou fausse.
bo o lean vraifaux;
vraifaux = true;
p rintln(vraifaux);

char
Cette variable sert stocker un caractre typographique (une
lettre). Notez l'usage de ce qu'on appelle des guillemets simples.
char lettre;
lettre = 'A';
p rint(lettre);

string
Cette variable sert stocker du texte. Notez l'usage des guillemets
doubles.
String texte;
texte = "B o njo ur!";
p rint(texte);

color
Sers stocker une couleur. Cette variable est utile lorsqu'on veut
rutiliser souvent les mmes couleurs.

no Stro ke();
co lo r blanc = co lo r(255, 255, 255);
co lo r no ir = co lo r(0, 0, 0);
fill(blanc); rect(0, 0, 25, 25);

70

fill(no ir);

rect(25, 0, 25, 25);

fill(blanc); rect(50, 0, 25, 25);

fill(no ir); rect(75, 0, 25, 25);
fill(no ir); rect(0, 25, 25, 25);
fill(blanc); rect(25, 25, 25, 25);
fill(no ir); rect(50, 25, 25, 25);
fill(blanc); rect(75, 25, 25, 25);
fill(blanc); rect(0, 50, 25, 25);
fill(no ir); rect(25, 50, 50, 25);
fill(blanc); rect(50, 50, 75, 25);
fill(no ir); rect(75, 50, 100, 25);
fill(no ir); rect(0, 75, 25, 25);
fill(blanc); rect(25, 75, 25, 25);
fill(no ir); rect(50, 75, 25, 25);
fill(blanc); rect(75, 75, 25, 25);

71

Les conditions
Les conditions donnent une part d'autonomie votre ordinateur.
Elles lui permettent de modifier le comportement du programme en
fonction de diverses conditions de votre choix. Par exemple, si vous
vouliez changer l'apparence de votre programme en fonction de
l'heure, vous pourriez lui demander d'avoir un fond noir entre 10
heures du soir et 6 heures du matin et un fond blanc le reste du
temps. C'est ce questionnement Quelle heure est-il ? qui
constitue la condition. S'il fait nuit, je dois dessiner un fond noir,
sinon je dessine un fond blanc pourrait constituer en quelque sorte
le dialogue interne de Processing lorsqu'il rencontre une condition.

Comparaison
La base de la condition, c'est la comparaison. Avant de pouvoir agir
selon une condition, il faut d'abord formuler la question que
Processing doit se poser. Cette question sera quasiment toujours une
question de comparaison.

Si le rsultat de la question est oui , Processing excutera une

suite d'instructions. Si la rponse est non, il excutera une autre.
Dans Processing, ce oui/non s'crit true et false .
La syntaxe d'une condition est la suivante: if (TEST) { } . Le TEST
correspond l'opration (galit, plus petit, plus grand) que vous
aurez choisie pour comparer deux valeurs et dterminer si la
rponse la question est true ou false . Si la rponse est true ,
Processing excutera les instructions entre les deux accolades.
L'instruction else permet de grer le cas de gure dans lequel la
condition n'est pas valide. Elle excute elle aussi tout ce qui se
trouve l'intrieur de ses accolades. Vous pouvez mettre autant
d'instructions que vous voulez entre ces deux types d'accolades.

72

Egalit
Pour vrier l'galit de deux valeurs, on utilise la formule suivante:
if (valeur1 == valeur2) { } . L'exemple suivant crit "Il est midi" dans la
console si la mthode ho ur() donne la valeur 12.
if (ho ur() == 12) {
p rintln("Il est m idi !");
} else {
p rintln("Ce n'est p as m idi !");
}

Rsultat de l'application excute entre 12h00 et 12h59 est :

Plus petit que et plus grand que

On peut vrier qu'une valeur est plus petite ou plus grande qu'une
autre en utilisant les oprateurs < et > . L'exemple suivant va crire
dans la console si nous sommes le matin ou non.
if (ho ur() < 12) {
p rintln("C'est le m atin !");
} else {
p rintln("Ce n'est p as le m atin !");
}

Rsultat de l'application excute aprs 12h59 :

Combiner les dcisions

Le s if et else peuvent tre combins pour grer plusieurs cas de
figure.
if (ho ur() < 12) {
p rintln("C'est le m atin !");
} else if (ho ur() == 12) {
p rintln("Il est m idi !");
} else {
p rintln("Ce n'est p as le m atin !");
}

Rsultat de l'application excute avant 12h00 :

73

Combiner les tests

Plusieurs tests peuvent tre combins au sein d'une mme dcision
pour rendre le choix plus prcis. Les oprateurs & & (et) ainsi que ||
(ou) permettent de combiner des tests. Par exemple pour
dterminer si nous sommes la nuit ou le jour, nous avons besoin de
trier les heures qui sont tard le soir et tt le matin de celles du reste
de la journe :
if (ho ur() < 6 & & ho ur() > 20) {
p rintln("Il fait nuit !");
} else {
p rintln("Il ne fait p as nuit !");
}

Rsultat de l'application excute 16h50 :

74

Les rptitions
Les rptitions permettent d'excuter une srie d'instructions
plusieurs fois de suite. Elles vitent de dupliquer inutilement des
portions de code. Attention ! les rptitions ne permettent pas de
crer des animations dans le temps (d'autres instructions existent
pour cela) ! Lorsque l'ordinateur lit le programme et rencontre une
boucle, il va excuter instantanment autant de fois de suite le code
crit dans le bloc de la boucle qu'on lui a indiqu.
L'exemple ci-dessous va nous permettre d'illustrer simplement cette
notion. L'objectif est de raliser un dessin achant dix lignes noires
horizontales. Le premier code contient dix fois l'instruction line() , le
second code est ralis partir d'une boucle. Le rsultat des deux
codes est le mme, la dirence se situant au niveau de la longueur
du code, l'un tant plus rapide saisir (et ultrieurement modier)
que l'autre.

line(0, 0, 100, 0);

line(0, 10, 100, 10);
line(0, 20, 100, 20);
line(0, 30, 100, 30);
line(0, 40, 100, 40);
line(0, 50, 100, 50);
line(0, 60, 100, 60);
line(0, 70, 100, 70);
line(0, 80, 100, 80);
line(0, 90, 100, 90);

...ou plus simplement:

fo r (int i = 0; i < 100; i = i + 10) {
line(0, i, 100, i);
}

La boucle for
Ce type de boucle permet de rpter une srie d'instructions un
nombre de fois dni. Elle incorpore une variable qui va
s'incrmenter chaque passage dans la boucle. On utilise souvent i
comme nom pour la variable interne de la boucle. Elle comprend :
un nombre de dpart, un nombre maximal et une incrmentation. Sa
syntaxe est la suivante : fo r (int i = N o m breD eD p art; i < N o m breM axim al; i
= i + IN CREM EN T) { } .

75

L'exemple ci-dessous va acher des rectangles blancs cte cte

qui auront chacun 10 pixels de large sur toute la largeur de l'espace
de dessin. Ils seront espacs de 5 pixels. Nous allons acher le
premier rectangle aux coordonnes 0,0. Les suivants seront achs
aux coordonnes 15,0 puis 30,0 et ainsi de suite. Notre boucle va
incrmenter sa variable de 15 pixels chaque tape. Comme nous
voulons remplir toute la largeur de l'espace de dessin, la valeur
maximale sera gale la largeur (width ) de cette fentre de
visualisation.

fo r (int i = 0; i < width; i = i + 15) {

rect(i, 0, 10, 10);
}

Les compteurs
Jusqu' maintenant, nous avons utilis les boucles fo r de manire
ce que la variable interne de la boucle soit directement exploitable.
Dans l'exemple prcdent, elle nous donne immdiatement la
valeur exacte de la position sur l'axe x du rectangle dessiner.
Les boucles fo r peuvent aussi tre utilises comme des compteurs.
On leur donne un minimum, un maximum et on incrmente la
variable seulement de 1 chaque tape de la boucle : ceci permet de
compter le nombre de fois que les instructions seront excutes,
d'o l'expression de compteur.
Cette mthode implique davantage de calculs mathmatiques pour
exploiter la variable au sein de la boucle.

fo r (int i = 0; i < 5; i = i + 1) {
rect(i, 0, 10, 10);
}

Nous voyons dans l'exemple ci-dessus que les rectangles sont

empils les uns sur les autres. Puisque notre variable i aura des
valeurs de 0 5 et que nous l'utilisons telle quelle pour placer les
rectangles dans l'espace, ceux-ci seront placs aux coordonnes 0,0
; 1,0; 2,0; 3,0; 4,0. Seul le dernier sera entirement visible. Pour
obtenir le mme rsultat que l'exemple prcdent, il faut multiplier
la variable. Dans le cas prsent nous allons la multiplier par 15 (10
pour la largeur du rectangle et 5 de marge). Ils sont ainsi disposs
tous les 15 pixels. Nous pourrions galement utiliser le chire du
compteur pour raliser d'autres oprations.

76

fo r (int i = 0; i < 5; i = i + 1) {
rect(i * 15, 0, 10, 10);
}

Imbriquer des boucles

Les boucles peuvent s'imbriquer les une dans les autres. Cette
technique permet de rapidement passer des visualisations deux,
voir trois dimensions. Lorsqu'on imbrique des boucles, il faut prendre
garde au nom que l'on donne la variable de chaque boucle. En eet
si elles se nomment toutes i, le programme va mlanger les
boucles. Chaque variable de chaque boucle doit avoir un nom
propre. Par exemple : i, j, k , etc. ou si elles sont lies des
dimensions : x, y et z.

Boucle de dpart

translate(7, 7);
fo r (int x = 0; x < 6; x = x + 1) {
rect(x * 15, 0, 10, 10);
}

Deux boucles

translate(7, 7);
//Prem ire bo ucle (hauteur)
fo r (int y = 0; y < 6; y = y + 1) {
//Seco nde bo ucle (largeur)
fo r (int x = 0; x < 6; x = x + 1) {
rect(x * 15, y * 15, 10, 10);
}
}

77

Trois boucles
Dans cet exemple nous introduisons un espace 3D. Pour placer nos
rectangles dans la profondeur, nous devons utiliser la mthode
translate() .

size(100, 100, P3D );

translate(7, 7);
//Prem ire bo ucle (p ro fo ndeur)
fo r (int z = 0; z < 6; z = z + 1) {
translate(0, 0, z * -15); //O n recule l'o bjet sur l'axe z
//Seco nde bo ucle (hauteur)
fo r (int y = 0; y < 6; y = y + 1) {
//Tro isim e bo ucle (largeur)
fo r (int x = 0; x < 6; x = x + 1) {
rect(x * 15, y * 15, 10, 10);
}
}
}

Variations
Voici une srie de variations des exemples ci-dessous qui utilisent les
mthodes fill() , scale() ou ro tate() . A vous d'exprimenter les
transformations au sein de boucles.

78

Les listes
On peut mettre de nombreux genres de choses dans une variable : un
chire, un chire virgule, la phrase d'un texte, voire mme toute
une image ou tout un morceau de son. Mais bien que les variables
puissent thoriquement contenir presque tout type de valeur, elles
ne peuvent contenir qu'une seule de ces valeurs la fois. Dans
certains cas, il serait pratique d'avoir plusieurs choses regroupes, au
moins du mme genre, dans une seule entit. C'est pour cette raison
qu'un genre trs particulier de variables t invent, les listes.
Les listes permettent de stocker un nombre x d'avance de
donnes ou d'objets dans une mme variable. Au lieu de crer 20
variables pour stocker 20 valeurs direntes d'un mme genre, nous
pouvons crer un seul contenant pour ces 20 valeurs et y accder
une par une via cette seule et unique variable.

Crer une liste

Si nous utilisons des lments dits fondamentaux, comme les
chiffres, il est trs facile de fabriquer une liste :
int[] num bers = {90,150,30};

Le signe du double crochet signie qu'il ne s'agit plus d'une variable

avec un seul entier l'intrieur, mais d'une liste d'entiers avec
plusieurs valeurs l'intrieur. Ensuite nous remplissons cette liste
dnomme numbers (nous aurions trs bien pu lui donner un autre
nom) avec les valeurs notes entre les accolades.
L'ordinateur crera assez d'emplacements dans la mmoire et
placera chacune des valeurs dans les cases correspondantes :

C'est d'ailleurs pour cette raison qu'il faut indiquer le mot int , car
Processing a besoin de connatre la taille de chaque case de la liste
(dans ce cas prcis, nous lui indiquons l'aide de cette instruction
qu'il s'agit de nombres entiers). S'il s'agissait d'images, comme on le
verra plus loin, chaque case de la liste aurait besoin de davantage de
place.
Notez que sur certains claviers francophones ou sur certaines
plates-formes, il est parfois dicile de localiser le crochet
d'ouverture [ et de fermeture ] . Sur un clavier franais
d'ordinateur Apple, par exemple, il faut appuyer en mme temps sur
les 3 touches {alt} + {maj} + ( pour le crochet d'ouverture, et {alt} +
{maj} + ) pour le crochet de fermeture. Par ailleurs, on doit taper
{alt} + ( pour l'accolade d'ouverture et {alt} + ( pour l'accolade de
fermeture.

79

Crer une liste vide

Bien qu'elle soit lisible, cette mthode de cration directe ne
marchera pas avec des lments comme les sons ou les images. A
cause de cette limitation, vous risquez d'utiliser rarement cette
mthode.
Dclarer une liste se fera donc le plus souvent de la manire
suivante : typ e[] no m D eLaListe = new typ e[N O M B RE D 'LM EN TS]. L'exemple cidessous cre une liste de trois nombres entiers. Attention ! Au
moment o la liste dnomme numbers est cre, celle-ci est
constitue d'une suite de cases vides qui ne contiennent aucune
valeur.
int[] num bers = new int[3];

Le chire 3 entre accolades indique que nous crons une liste de 3

cases actuellement vides.

Remplir la liste
Placer des valeurs dans une liste fonctionne de la mme manire
qu'assigner une valeur une variable. Il faut en plus prciser quelle
position de la liste on ajoute la valeur.
num bers[0] = 90;
num bers[1] = 150;
num bers[2] = 30;

La premire position de la liste commenant par 0, si nous crons

une liste de 3 valeurs, les cases les contenant seront donc
numrotes de 0 2. On passe d'une position de la liste une autre
en l'incrmentant de 1.

Utiliser le contenu d'une liste

Utiliser l'lment d'une liste est similaire galement l'utilisation
d'une variable. Il faut juste prciser la position de l'lment en
question :
p rintln( num bers[0] );

A nouveau, notez que l'ordinateur commence compter la

position 0 et non pas 1. Si nous demandons la valeur num bers[2],
Processing nous donnera la valeur la troisime position et non pas
la deuxime. Un bon moyen pour se rappeler cette particularit,
c'est de considrer que Processing compte de la manire suivante :
zrotime, premier, deuxime, troisime, etc. La zrotime valeur
concerne la valeur au dbut de la liste.

80

Dans l'exemple ci-dessous nous utilisons une boucle pour calculer la

somme de tous les lments de la liste dclare prcdemment :
int[] num bers = new int[3];
num bers[0] = 90;
num bers[1] = 150;
num bers[2] = 30;
int so m m e = 0;
fo r (int i = 0; i < 3; i++) {
so m m e = so m m e + num bers[i];
}
p rintln(so m m e);

Le programme devrait acher le rsultat suivant dans votre

console, tout en bas de la fentre Processing :

Quelques lments supplmentaires d'explication pour mieux

comprendre le fonctionnement de ce programme. Tout d'abord,
nous crons une variable qui contiendra la somme de toutes les
valeurs. Elle dbute zro.

81

Ensuite, nous enclenchons une boucle qui se rptera 3 fois, en

additionnant chaque fois la prochaine valeur la somme. Ici nous
pouvons voir la relation troite qui existe entre une liste et une
boucle fo r() . La valeur i permet de passer une une dans chacune
des valeurs de la liste, en commenant avec la position zro,
ensuite la position 1, et enfin la position 2.
Si vous vous mettez analyser le code de programmes consultables
en ligne, par exemple dans les sketchs librement mis disposition
sur OpenProcessing, vous verrez beaucoup de code avec
quelqueCho se[i] .

Une suite d'images

Un des usages les plus pratiques des listes concerne l'importation de
mdias dans Processing. Imaginons que nous voulons importer cinq
images dans Processing destines ensuite tre utilises dans un
sketch. Sans employer les listes, il faudrait crire quelque chose
comme ceci :
PIm age p ho to 1;
p ho to 1 = lo adIm age("p ho to _1.p ng");
im age(p ho to 1,0,0);
PIm age p ho to 2;
p ho to 2 = lo adIm age("p ho to _2.p ng");
im age(p ho to 2,50,0);
PIm age p ho to 3;
p ho to 3 = lo adIm age("p ho to _3.p ng");
im age(p ho to 3,100,0);
PIm age p ho to 4;
p ho to 4 = lo adIm age("p ho to _4.p ng");
im age(p ho to 4,150,0);
PIm age p ho to 5;
p ho to 5 = lo adIm age("p ho to _5.p ng");
im age(p ho to 5,200,0);

Certes, cet exemple reste encore relativement grable dans la

mesure o vous faites appel seulement 5 images. Cela tant, les
occasions d'erreurs de saisie sont nombreuses. En crivant ces
quelques lignes pour ce manuel, nous-mmes avons plusieurs fois
eectu des erreurs de frappe, notamment en oubliant de changer
un chiffre que nous venions de copier d'une ligne prcdente !
Une meilleure faon d'crire cet exemple serait d'utiliser des listes :
PIm age[] im ages = new PIm age[5];
im ages[0] = lo adIm age("im age_0.p ng");
im ages[1] = lo adIm age("im age_1.p ng");
im ages[2] = lo adIm age("im age_2.p ng");
im ages[3] = lo adIm age("im age_3.p ng");
im ages[4] = lo adIm age("im age_4.p ng");
im age( im ages[0], 0, 0);
im age( im ages[1], 50, 0);
im age( im ages[2], 100, 0);
im age( im ages[3], 150, 0);

82

im age( im ages[4], 200, 0);

En utilisant une liste, on peut mettre toutes nos images dans une
seule variable qui doit tre initialise qu'une seule fois : PIm age[] im ages
= new PIm age[5]. Ensuite, il sut de remplir chaque valeur de chier
pour chacun des emplacements dans la liste.
Mais mme cette criture est trop longue. Comment allez-vous
faire, par exemple, lorsque vous aurez 200 images, voire 2.000 ?
Allez-vous vraiment crire 200 fois toutes ces lignes ? Et comment
ferez-vous lorsque vous voudrez changer le nom des chiers
imports ?
Voici la meilleure manire d'importer une suite d'images :
size(500,500);
PIm age[] im ages = new PIm age[20];
fo r(int i=0; i<im ages.size(); i++) {
im ages[i] = lo adIm age("im age_" + i + ".p ng");
im age( im ages[i], rando m (width), rando m (height) );
}

En utilisant une rptition fo r() , nous pouvons dsormais importer

autant d'images que nous voulons.
Tout d'abord, nous crons la liste d'images. Il s'agit au dpart d'une
liste vide :
PIm age[] im ages = new PIm age[20];

Ensuite nous rcuprons la longueur de cette liste en demandant

la liste elle-mme combien d'lments elle contient via im ages.size()
et utilisons cette longueur dans la rptition fo r() .
fo r(int i=0; i<im ages.size(); i++)

Nous pouvons mme automatiser l'importation des images en

utilisant la valeur i pour composer le nom du chier des images
dans le dossier data. En utilisant le signe + , on peut concatner
deux mots ensemble, ce qui veut dire que nous allons assembler
deux mots/signes en un seul message.
im ages[i] = lo adIm age("im age_" + i + ".p ng");

En concatnant les mots image_ , la valeur de la variable i, et

.png , nous obtenons un message qui ressemblerait quelque
chose comme image_42.png . De cette manire, nous pouvons
utiliser une seule ligne de code pour faire rentrer autant d'images
que nous voulons. Si la variable i contient la valeur de 9, le nom du
chier import sera image_9.png. Si la variable i contient la valeur
101, le nom du fichier import sera image_101.png.
Pour que cette technique marche, il faut juste prparer au pralable
des chiers d'images dans votre dossier data. Voici, par exemple, un
dossier data contenant 20 fichiers d'images :

83

Une fois chacune de ces images importes dans notre programme,

nous dessinons l'image quelque part dans le sketch en crivant :
im age( im ages[i], rando m (width), rando m (height) );

A l'aide de l'instruction rando m , cette ligne de code ache une image

(0, 1, 2, 3, ...) qui sera place chaque fois de faon alatoire sur l'axe
x et sur l'axe y de l'espace de dessin. Les deux valeurs width et height
permettent de connatre automatiquement la taille de la fentre de
visualisation utilise par le sketch. En faisant appel elles, on
prcise les limites verticales et horizontales maximales o doivent
se positionner les images, l'instruction rando m () ayant pour fonction
de gnrer un nombre au hasard ne dpassant pas la valeur
mentionne entre ses parenthses.

Une suite de pixels

Il se trouve que vous connaissiez dj les listes et que vous vous en
serviez dj sans le savoir. Par exemple, si vous avez lu le chapitre
sur les images vous savez dj qu'une variable de type PIm age ne
contient pas une seule valeur mais plusieurs, moins que votre
image ne fasse qu'un pixel de large et un pixel de haut. A part cette
exception rare, votre image contient un ensemble de valeurs qui
reprsentent l'ensemble des pixels qui doivent former l'image. C'est
cet ensemble qui s'appelle une liste.
Vous pouvez accder directement aux pixels d'une image en
demandant un accs direct sa sous-variable nomme pixels .

84

Imaginons que nous avons au dpart l'image d'une mystrieuse

dame dans un fichier nomm lhooq.png

Si nous importons cette image dans Processing, nous pouvons

l'utiliser pour rcuprer la couleur d'un pixel en particulier en
entrant l'intrieur de sa liste de couleurs. Cette liste s'appelle
p ixels[]

size(512,256);
PIm age lho o q;
lho o q = lo adIm age("lho o q.p ng");
im age(lho o q,0,0);
int x = 119;
int y = 119;
in t in d e x = x + ( y * lh o o q . w id t h ) ;
c o lo r c = lh o o q . p ix e ls [in d e x ];
no Stro ke();
fill(c);
rect(256,0,256,256);
stro ke(0);
line(x-5,y,x+5,y);
line(x,y-5,x,y+5);

Les deux lignes les plus importantes sont soulignes en gras dans le
code :

85

in t in d e x = x + ( y * lh o o q . w id t h ) ;
c o lo r c = lh o o q . p ix e ls [in d e x ];

Nous vous rappelons qu'une image n'est rien d'autre qu'une liste de
pixels, une image tant notamment compose non pas d'une mais
de plusieurs couleurs. Dans Processing, les variables de type PIm age
servent d'ailleurs stocker les valeurs de ces pixels dans une longue
liste linaire.

Ce que nous voyons comme une liste deux {x,y} dimensions, PIm age
la voit en une seule dimension. Si nous voulons trouver une valeur
la position {2,1}, en ralit il faut indiquer que nous voulons la
position 17 de l'image. En eet, entre un point sur une ligne et le
point correspondant sur la prochaine ligne, il existe 16 pixels.
Autrement dit, PIm age doit compter 16 pixels chaque fois qu'il veut
descendre une ligne.
C'est pour cette raison que la formule pour identier un pixel dans
une image s'crit {x + (largeur image} * y}. Pour chaque ligne y, il
existe une largeur de valeurs x qu'il faut dpasser.

Colorier les pixels dans une image

Nous pouvons aller encore plus loin dans l'utilisation du principe de
listes appliqu la description interne d'une image dans Processing.
Il est possible en eet de crer nos propres variables de type PIm age
et d'assigner ses pixels des couleurs, l'aide de variables de type
co lo r . Les pixels de l'image sont accessibles au moyen d'un chire
numrot partir de zro, comme dans n'importe quelle liste.

Dans cet exemple, on dessine une grille de trois pixels par trois.
Nous allons dessiner cette image plus grande en l'tirant 80 x 80
pixels afin de mieux la voir.
PIm age im g = createIm age(3, 3, ARG B );
im g.lo adPixels();
im g.p ixels[0] = co lo r(255, 0, 0);
im g.p ixels[1] = co lo r(0, 255, 0);
im g.p ixels[2] = co lo r(0, 0, 255);

86

im g.p ixels[3] = co lo r(255, 0, 255);

im g.p ixels[4] = co lo r(255, 255, 0);
im g.p ixels[5] = co lo r(0, 255, 255);
im g.p ixels[6] = co lo r(0, 0, 0);
im g.p ixels[7] = co lo r(127, 127, 127, 255);
im g.p ixels[8] = co lo r(255, 255, 255, 0);
im g.up datePixels();
im age(im g, 10, 10, 80, 80);

Notez qu'il faut indiquer Processing que nous allons modier une
image via lo adPixels() et que nous avons termin de modier l'image
via up datePixels() . En l'absence de ces instructions, on risque de ne pas
voir les rsultats de notre modification dans la liste.
Notez galement que vous pourriez aussi raliser ce genre de
peinture numro en utilisant des rptitions.
Les applications cratives des listes sont multiples. Il ne vous reste
plus qu' laisser le champ libre votre imagination.

87

Les mthodes
Une mthode est un bloc qui contient une srie d'instructions que
l'on souhaite rutiliser. L'intrt des mthodes rside dans la
possibilit de rutiliser du code : nous aimerions crire une seule fois
une action tout en pouvant la rpter autant de fois que ncessaire.
En englobant notre code dans une mthode, il devient possible
d'appeler celle-ci diffrents moments de notre programme.
Vous connaissez dj plusieurs mthodes, mais uniquement en tant
qu'utilisateur. Par exemple, rect() , ellip se() , line() stro ke() sont toutes
des mthodes. En crant nos propres mthodes, nous nous
rapprochons d'une certaine manire du rle cratif des concepteurs
de Processing : libert nous est donne d'inventer des formes ou des
fonctionnalits qu'ils n'ont pas pu ou voulu crire l'origine.
Voici un exemple purement thorique de ce que la structuration d'un
sketch l'aide de mthodes pourrait ventuellement donner au nal
si nous devions dessiner un joli paysage.
backgro und(255);
jo liPaysage();
arbre(cyp res, 0,300);
lune(400,100);
gazo n(0,300,width,100);
m o uto n(50,133);
m o uto n(213,98);
m o uto n(155,88);

L'objectif, c'est de regrouper des lments complexes du

programme dans des mots cls que vous pouvez appeler autant de
fois que vous le voulez, tout en les mlangeant avec les mots cls
Processing. Ce procd appel encapsulation vous loigne
apparemment de votre code, mais c'est pour vous en donner un
nouvel accs simpli en le rendant davantage lisible. Cela permet
galement d'viter les rptitions inutiles. Un peu plus d'ordre, pour
un peu moins de copier-coller.

88

Mots cls
Lorsque nous crons nos propres mthodes, il faut donner
chacune d'entre elles un nom. Une fois la mthode dnie, on peut
s'en servir dans le programme. Il suffit de l'appeler par son nom.
Processing nous fournit dj plusieurs mthodes que nous pouvons
remplacer par nos propres versions. Ce sera le cas des mthodes
draw() , setup () , m o usePressed() ... que vous dcouvrirez dans d'autres
chapitres. Nous pouvons galement crer des mthodes sur mesure
en leur donnant le nom de notre choix. Dans ce cas, il faut
simplement viter d'utiliser un nom qui est dj pris.

Dcomposer
Jusqu'ici, nous avons programm dans Processing directement, en
commenant saisir du code depuis le haut du programme et en
laissant celui-ci s'excuter jusqu'en bas. Lorsque nous voulons
construire nos propres mthodes, nous devons commencer
dcomposer nos programmes en plusieurs parties spares. Cela
nous permettra par exemple d'indiquer les parties qui doivent
s'excuter tout de suite lorsque nous appuyons sur le bouton run de
celles qui seront appeles par nos propres soins l'intrieur du
programme.
Par contre, en utilisant ce procd de programmation, nous ne
pourrons plus crire des instructions directement dans Processing
sans au pralable les avoir intgres au sein d'une mthode ou d'une
classe. Avec les mthodes, c'est tout ou rien.

void setup()
Processing nous ore une instruction ayant pour fonction de
contenir le code de dbut de notre programme. Il s'agit de la
mthode setup () :
vo id setup () {
}

C'est l'intrieur des accolades de la mthode setup () que nous

allons placer tout le code qui doit tre excut au dbut de notre
programme. Pour l'instant, ne cherchez pas savoir quoi sert le
mot vo id , sachez juste qu'il faut l'crire, suivi du mot setup , puis de
parenthses, et enfin les accolades.
La plupart du temps, nous nous servirons de la mthode setup () pour
dnir la taille de notre sketch. Cette taille ne peut tre dnie
qu'une seule fois ce qui tombe bien, car le dmarrage n'a lieu
qu'une seule fois dans le vie d'un programme.
vo id setup () {
size(500,500);
}

89

Crer des mthodes sur mesure

Dans l'exemple qui suit, nous allons crer une mthode
dessinerM o uto n() qui contient des instructions pour dessiner un
mouton.

En fait, ce mouton est cach dans une bote, alors on ne voit qu'une
bote ! On y dessine galement des trous, an que le mouton puisse
respirer. Nous appelons plusieurs fois cette mthode pour dessiner
plusieurs moutons.
Voici le code de ce dessin :
vo id setup () {
size(600, 220);
backgro und(153,204,255);
sm o o th();
// l'ap p el no tre m tho de de dessin d'un m o uto n
dessinerM o uto n();
translate(120, 60);
dessinerM o uto n();
translate(120, 60);
dessinerM o uto n();
translate(140, -60);
dessinerM o uto n();
}

// la m tho de p o ur dessiner le m o uto n

vo id dessinerM o uto n() {
stro keWeight(3);
stro keJo in(RO U N D );
stro ke(0);
fill(255);
rect(20, 40, 80, 40);
beginShap e();
vertex(20, 40);
vertex(40, 20);
vertex(120, 20);
vertex(120, 40);
endShap e(CLO SE);

90

beginShap e();
vertex(100, 40);
vertex(120, 20);
vertex(120, 60);
vertex(100, 80);
endShap e(CLO SE);
fill(0);
ellip se(40, 60, 5, 5);
ellip se(60, 60, 5, 5);
ellip se(80, 60, 5, 5);
}

Le dbut de ce programme se dcrit l'intrieur de la mthode

setup () . En eet, puisque nous utilisons une mthode pour dessiner
notre mouton, le reste du programme doit galement tre plac
quelque part dans une mthode. En dbut du programme, nous
allons donc saisir :
vo id setup () {
}

Ensuite, au sein des accolades de la mthode setup () , nous

dfinissons la taille de notre sketch et sa couleur de fond.
size(600, 220);
backgro und(153,204,255);

Vous vous tes peut-tre pos la question du rle de sm o o th() dans

notre programme. Optionnelle, cette ligne de code permet
toutefois d'amliorer le rendu des lignes en lissant leur trac : elles
apparaissent ainsi plus jolies sur l'cran de l'ordinateur.
sm o o th();

Enfin, nous dessinons notre mouton, en faisant appel une mthode

que nous avons dfinie plus bas dans le programme.
dessinerM o uto n();

Chaque fois que Processing tombe sur le mot dessinerM o uto n() , il
vrie si ce mot existe en tant que mthode quelque part dans le
programme. Si cette mthode existe, il fait un dtour par cette
mthode et fait tout ce qui s'y trouve.

91

S'il ne trouve pas cette mthode et qu'elle n'existe pas ailleurs

dans la liste des fonctionnalits proposes directement par
Processing , votre programme s'arrtera avec une erreur
d'excution.
Notez que vous pouvez crire le mot cl dessinerM o uto n() autant de
fois que vous voulez. Ici, dans ce programme, dessinerM o uto n() est
crit au final 4 fois :
dessinerM o uto n();
translate(120, 60);
dessinerM o uto n();
translate(120, 60);
dessinerM o uto n();
translate(140, -60);
dessinerM o uto n();

Nous avons plac entre chaque appel la mthode dessinerM o uto n() ,
une instruction translate( x,y ) . Cette instruction nous permet de ne
pas dessiner quatre fois le mme mouton au mme endroit. Ce n'est
pas le rle de ce chapitre de vous expliquer les transformations
comme translate() ; sachez nanmoins que translate() sert dplacer
le point d'origine o dbutera le trac d'un dessin.
vo id dessinerM o uto n() {
/* ... */
}

92

Enn nous arrivons notre mthode dessinerMouton() proprement

dite. C'est ici que nous dessinons les lignes et formes ncessaires
pour obtenir le trac de notre animal. Nous ne commenterons pas
cette partie, puisqu'il s'agit uniquement d'instructions que vous
trouverez davantage dcrites dans le chapitre sur les formes.
Notez l'usage du mot-cl vo id devant le nom de notre mthode.
Cela signie qu'elle ne retourne rien. En faisant appel elle, nous
savons qu'elle n'a pas pour fonction de nous fournir des donnes.

La valeur de retour d'une mthode

Une mthode peut avoir une valeur de retour. Jusqu'ici, nous n'avons
pas expriment cette particularit. Ni la mthode setup () , ni la
mthode draw() ne retournent une valeur de retour. Le mot vo id a t
plac devant chacune de ces deux mthodes pour bien prciser
Processing que rien ne doit tre retourn lorsque l'on fera appel
elles.
L'emploi d'une mthode avec une valeur de retour suppose que nous
cherchons obtenir quelque chose d'elle en l'invoquant. Quand nous
voulons savoir quelle heure est-il, nous demandons aux mthodes
seco nd() , m inute() , ou ho ur() de nous donner en retour leurs valeurs
sous forme d'un chire entier (int ). Si ces mthodes ne nous
donnaient rien (vo id ) en retour, elles ne serviraient pas grande
chose.
Pour les mthodes qui doivent retourner une valeur celle qui
l'appelle, on indique un mot-cl avant pour indiquer le type de
valeur qui doit tre retourn. Une mthode dont le type est int nous
retourne une valeur de type int correspondant un nombre entier,
une mthode dont le type est flo at nous retourne une valeur de type
flo at (nombre virgule), et ainsi de suite.
Voici un exemple de mthode qui nous donne le nombre secondes
depuis 00:00:00 ce matin.
int seco ndesAujo urdhui() {
return ho ur() * 3600 + m inute() * 60 + seco nd();
}
vo id draw() {
p rintln( seco ndesAujo urdhui() );
}

Mme si vous ne connaissez pas la mthode draw() , amusez-vous

nanmoins excuter
ce mini-programme et regardez les
informations qui s'achent dans la console situe en bas de votre
fentre d'dition de Processing. Vous verrez que la mthode draw()
appelle en permanence la mthode seco ndesAujo urdhui() et utilise le
rsultat de cette mthode pour nous afficher les secondes.

Les paramtres d'une mthode

Une mthode peut accepter des paramtres. La plupart du temps,
on les appelle des arguments. Ces paramtres doivent avoir chacun
un type et un nom, tout comme les variables.

93

Pour appeler une mthode, on crit son nom, et on le fait suivre

d'une parenthse ouvrante et d'une autre fermante. Entre ces
parenthses, on place les paramtres de la mthode. Ce qu'on y
met sera envoy dans la mthode.
m ultip lier(2, 2);

Une fois arriv dans le corps de la mthode, Processing peut

accder leur valeur, comme il le fait avec les variables.
Ainsi dans l'exemple ci-aprs, lorsque cette mthode est appele
avec les argument 2 et 2, la valeur de a = 2 , et celle de b = 2
galement. La valeur de retour de cette mthode sera donc 4 (2 fois
2 gale 4).
int m utlip lier(int a, int b) {
return a * b;
}

Notez que c'est la position des arguments qui dtermine quelle

valeur sera affecte quel argument.

Pour rsumer notre exemple, on a cr une mthode qui retourne le

rsultat de la multiplication de ses deux arguments. Un
commentaire prcde la dnition de la mthode (une bonne
pratique de programmation pour se rappeler ultrieurement de la
fonction d'un morceau de code).
/*
* Reto urne le rsultat de la m ultip licatio n de ses
* deux argum ents.
*/
int m ultip lier(int a, int b) {
return a * b;
}
vo id setup () {
int resultat = m ultip lier(2, 2);
p rint(resultat);

94

La console de Processing affichera :

La porte des variables

Protons de ce chapitre sur les mthodes et les variables pour vous
mettre en garde contre une erreur classique qui peut survenir
lorsque l'on utilise des variables et des mthodes dans un
programme.
Les variables que ce soit des objets ou des types fondamentaux de
donnes ne sont pas forcement accessibles l'ensemble de votre
programme ! Tout dpend de l'endroit o elles ont t dclares.
Une variable dclare l'intrieur d'une mthode ne sera accessible
que dans celle-ci :
vo id setup () {
int x = 10;
}
vo id draw() {
/* Le p ro gram m e gnrera une erreur car la variable x
* n'existe qu' l'intrieur de la m tho de setup ()
*/
x = x + 1;
}

En lanant l'excution du programme ci-dessus, la console de

Processing affichera le message d'erreur suivant :

Pour qu'une variable soit accessible tout votre programme il faut

la dclarer en en-tte comme ceci :
int x;
vo id setup () {
x = 10;
}
vo id draw() {
x = x + 1;
}

95

Les objets
La programmation oriente objet (POO) permet de structurer son
programme partir des lments concrets prsents dans l'espace
de dessin (balles, murs, personnages, etc.). Un objet est un modle
qui peut tre dupliqu et dont chaque copie est unique. Ces 2
notions constituent les briques de base d'une application structure.
Un objet est compos de caractristiques (proprits) et d'actions
(mthodes). Chaque instance (chaque copie unique) d'un objet
possde sa vie propre avec des caractristiques spciques tout en
pouvant eectuer potentiellement les mmes actions que ses
surs (les autres instances du mme objet).
Ne vous inquitez pas si ces dnitions vous paraissent obscures
premire lecture. Au l de ce chapitre, nous allons dtailler ces
notions l'aide d'un exemple simple et concret : le trac d'une puis
de deux balles (de simples cercles) l'cran. Pour raliser ce dessin,
nous faisons appel un modle de balle (l'objet) et ses copies (les
instances) qui possdent chacune des caractristiques diffrentes.
Le modle de la balle est compos des caractristiques (variables)
suivantes :
position sur l'axe x
position sur l'axe y
couleur
Le modle de balle contiendra l'action (mthode) suivante :
afficher

Quand crer un objet

Comment faire pour dessiner plusieurs balles l'cran? La solution
la plus vidente semble tre de dupliquer les variables qui
caractrisent la balle et les instructions permettant de l'acher et
de la grer. La taille du code sera proportionnelle au nombre
d'lments visibles l'cran. Plus j'ai de balles plus mon code sera
long.
Ce procd pose deux problmes :
si l'on veut modier ou ajouter des actions l'ensemble
de ces balles, on devra modier autant de fois le code qu'il y
a d'lments affichs,
au fur et mesure que l'on rajoute des lments l'cran
le programme s'allonge au point de devenir ingrable (et si
notre programme comportait 1'000'000 de balles ?).
Pour pallier ces limitations, nous allons transformer notre balle
e n objet. Ds qu'une entit (balle, avatar, forme, etc.) de votre
programme devient trop complexe ou qu'elle doit exister en
plusieurs exemplaires, il faut en faire un objet.

96

Crer un objet
La cration d'un objet se passe en deux tapes : la dnition du
modle de l'objet et la cration d'une copie unique de l'objet
(instance).

Le modle
Processing utilise le mot cl class pour dnir un objet. Sa syntaxe
s'apparente la dnition d'une mthode : class no m O bjet {} . Toutes
l e s caractristiques et les actions sont crites l'intrieur. En
gnral on va crire la dnition d'un objet tout la n de notre
code. ventuellement si l'objet est complexe, on crera un nouvel
onglet dans la fentre d'dition de Processing (un nouveau chier)
afin de le sparer du reste du code.
class B alle {
}

L'instance
Une fois le modle dni, il faut crer une copie de ce modle qui
sera unique. Processing utilise le mot cl new pour crer une
instance d'un objet : new no m O bjet(); . Il faut stocker cet objet dans
une variable afin de pouvoir le manipuler ultrieurement.
B alle m aB alle = new B alle();

Dans l'exemple ci-dessus, nous dclarons une variable m aB alle et

nous lui assignons une copie de l'objet Balle. m aB alle fait rfrence
cet objet et permet d'agir sur lui dans la suite du programme. An
de rendre l'objet disponible dans tout le programme, nous plaons
la dclaration en en-tte de l'application.

Les caractristiques
L e s objets ont des caractristiques qui les dnissent et les
rendent uniques. Ce sont des variables qui sont dclares au dbut
de l'objet.
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
co lo r co uleur;
}

Pour modier une caractristique aprs la cration de l'objet, il

faut
procder
de
la
manire
suivante:
no m D eLInstance.no m D eLaCaractristique = valeur; Par exemple :
m aB alle.x = 100;

97

Le constructeur
Le constructeur est une mthode appele lorsque l'objet est cr.
Il est l'quivalent de la mthode setup () de l'application. Il porte
toujours le nom de l'objet. Le constructeur va prendre un certain
nombre de variables en paramtre et les assigner l'objet :
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
co lo r co uleur;
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

}
}

Lorsque nous allons crer l'instance (une copie) de l'objet, nous

allons directement lui donner ses caractristiques propres en
paramtre. L'exemple ci-dessous cre une balle blanche place aux
coordonnes 100, 100 de la fentre de visualisation.
m aB alle = new B alle(100, 100, co lo r(255));

Attention ! Nous venons uniquement de crer une copie du modle

de l'objet. Il n'est pas encore affich l'cran.

Les actions
Les actions d'un objet reprsentent les direntes choses qu'il peut
eectuer. Ce sont des mthodes mentionnes (dclares)
l'intrieur de l'objet. Appeler une action sur une instance d'un objet
se fait de la manire suivante: no m D eLInstance.no m D eLaM etho de();
Dans notre exemple, notre balle comportera une seule action : tre
ache. Nous allons utiliser les instructions fill() et ellip se () pour
la dessiner.
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
co lo r co uleur;
B all (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

}
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
}

98

Pour acher notre balle, il faut appeler sa mthode

sa copie dans la mthode draw() du programme.

disp lay()

depuis

vo id draw() {
m aB alle.disp lay();
}

Programme final

//D claratio n et cratio n d'une instance de l'o bjet B alle

B alle m aB alle = new B alle(100, 100, co lo r(255));
vo id setup () {
sm o o th(); //Lissage des dessins
size(400, 200); //Taille de la fentre
}
vo id draw() {
backgro und(0); //O n dessine un fo nd no ir
no Stro ke(); //O n sup p rim e le co nto ur
m aB alle.disp lay(); //Affichage de la balle
}
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
}

99

Multiplier les balles

Crer une seconde balle devient, grce au systme des objets, un jeu
d'enfant. Il sut de dclarer une deuxime balle, par exemple
m aB alle2 et de l'afficher.

//D claratio n et cratio n de p lusieurs instances de l'o bjet B alle

B alle m aB alle1 = new B alle(100, 100, co lo r(255));
B alle m aB alle2 = new B alle(200, 100, co lo r(128));
vo id setup () {
sm o o th(); //Lissage des dessins
size(400, 200); //Taille de la fentre
}
vo id draw() {
backgro und(0); //O n dessine un fo nd no ir
no Stro ke(); //O n sup p rim e le co nto ur
m aB alle1.disp lay(); //Affichage de la balle 1
m aB alle2.disp lay(); //Affichage de la balle 2
}
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
}

N'hsitez pas vous approprier ce programme en ajoutant autant

de balles que vous voulez.

100

Les commentaires
Commenter et documenter son programme sont essentiels pour
maintenir un code clair et pour faciliter la collaboration avec
d'autres personnes. Cette pratique de programmation permet
galement de se rappeler ultrieurement l'utilit de telle ou telle
variable, mthode, etc. Au moment de la conception d'un
programme, on possde une vue d'ensemble du code et parfois
commenter notre sketch peut nous sembler inutile. Pourtant,
lorsqu'on veut retravailler ou rutiliser ce code quelques jours, voire
quelques mois plus tard, l'usage de commentaires nous permet de
nous y replonger plus rapidement.
Processing ore deux manires distinctes de commenter son code :
les commentaires en ligne, et les blocs de commentaires multilignes.

Commentaires en ligne
Pour crire un commentaire qui ne prend qu'une seule ligne, il sut
de placer les caractres // au dbut du commentaire. Tout le texte
qui est crit sa droite sur la mme ligne sera considr comme
commentaire et donc ne sera pas pris en compte par le programme
lors de son excution. Exemples de commentaires en ligne :
vo id setup () {
// D finit la taille du p ro gram m e
size(400, 300);
sm o o th(); // Active le lissage des co nto urs
}

Blocs de commentaires
Si une explication ncessite un commentaire plus long, on peut
l'crire sur plusieurs lignes en le plaant entre les caractres /* et
*/. Par exemple :
/*
La m tho de setup initialise le p ro gram m e,
o n p eut y dfinir la taille de la fentre,
dfinir l'tat initial du p ro gram m e, etc.
*/
vo id setup () {
}

On peut commenter un bloc de ligne en allant dans le menu edit de

Processing puis en cliquant sur comment/uncomment. On peut
procder de mme pour enlever le commentaire sur un bloc.

101

Utilisation judicieuse des commentaires

Commenter un programme ne signie pas qu'il faille crire le but de
chaque ligne ! De manire gnrale, on inscrira un bloc de
commentaires avant les mthodes pour expliquer leur utilit et
ventuellement la faon de s'en servir. On vitera de commenter les
mthodes de base de Processing telles que setup () {} , draw() {} , etc.
On ne commentera pas non plus les instructions gnriques telles
que size() , fill() , ellip se() , etc. Leur utilit est vidente ds lors que
vous tes relativement familiaris avec Processing.
Lorsqu'un ensemble de lignes eectue une action commune (par
exemple modier deux variables x et y), on vitera de mettre un
commentaire pour chaque ligne et on utilisera de prfrence un bloc
de commentaires. Par exemple :
x = x + 10; //Ajo ut de 10 la co o rdo nne x
y = y + 10; //Ajo ut de 10 la co o rdo nne y

pourrait tre crit :

//M o dificatio n des co o rdo nnes x et y
x = x + 10;
y = y + 10;

102

ANIMER

103

La mthode draw
Jusqu'ici, nous avons cr ce que nous pouvons appeler des
programmes linaires : on dmarre le programme, celui-ci excute
notre dessin, et tout s'arrte la n des instructions de notre
sketch, en bas de la fentre d'dition.
Mais Processing n'est pas uniquement un environnement de dessin
crit, c'est galement un environnement interactif. Et pour qu'il y ait
interactivit, il nous faut du temps, en d'autres termes, un moyen de
prolonger notre dessin pour que celui-ci puisse se modier en
suivant chronologiquement certaines tapes, selon dirents
facteurs et conditions. C'est le rle de la boucle innie, appele en
permanence par la machine pour ractualiser notre dessin. Dans
Processing, cette boucle innie s'crit draw() . Elle est souvent
accompagne par la mthode setup () qui permettra de prparer la
fentre de visualisation (l'espace de dessin), par exemple en lui
donnant une taille au dpart.
C'est l'absence de ces deux mthodes qui rend Processing inerte. Si
votre code ne dispose pas de mthode draw() , l'excution du
programme s'arrtera la fin du code de votre programme.

draw()
Commencez un nouveau programme Processing vide, tapez les
lignes suivantes dans la fentre d'criture et appuyez sur le bouton
run :
vo id draw() {
backgro und( rando m (255) );
}

a y est, vous avez activ l'animation dans Processing. Vous devriez

maintenant voir une fentre qui clignote 30 fois par seconde avec
une couleur grise alatoire quelque part entre le noir et le blanc.
C'est la mthode rando m (255) qui donne en retour une valeur alatoire
entre 0 et 255. C'est cette valeur qui est ensuite rcupre par les
parenthses de la mthode backgro und() et applique sur le fond de la
fentre de visualisation de l'espace de dessin. Comme le tout se
passe de manire rpte, on a l'impression d'assister une
animation.

104

Par dfaut, les instructions qui se trouvent entre les deux accolades
de la mthode draw() seront appeles 30 fois par seconde. 30 fois par
seconde Processing ouvrira cette mthode et regardera ce qui est
crit dedans pour l'excuter. Nous pouvons mettre autant
d'instructions que nous voulons l'intrieur de cette mthode. Ces
instructions seront joues par Processing de manire cyclique, tel un
mtronome.
Attention aux erreurs d'criture, car ds que Processing en
rencontrera une, votre programme s'arrtera net c'est la n de
votre animation. En revanche, si vous avez crit une mthode draw()
sans erreurs, elle sera appele en boucle, 30 fois par seconde,
jusqu' ce que l'utilisateur arrte le programme, qu'une panne
d'lectricit arrive, ou que la n du monde se produise. C'est donc
grce cette mthode excutant du code en rptition que nous
allons pouvoir crer des animations.

Frquence d'excution
Il est possible de spcier une valeur dirente notre mtronome
en utilisant la mthode frameRate().
Si vous modiez l'exemple prcdent comme suit, vous remarquerez
que la vitesse de l'animation a t diminue (divise par 3).
vo id draw() {
fram eRate(10);
backgro und( rando m (255) );
}

Nombre de fois o draw() a t appele

Processing peut aussi compter le nombre de fois que cette mthode
draw() a t appele, depuis le lancement du programme via la
variable frameCount.

105

setup()
Souvent, voire la plupart du temps, il est ncessaire de placer
certaines instructions au tout dbut du programme. C'est la nature
et la porte de ces instructions sur le programme qui nous incitent
les placer cet endroit. Par exemple, dans Processing, la taille de la
fentre de visualisation du dessin ne peut tre dnie qu'une seule
fois dans un sketch ; ce paramtrage de l'espace de dessin ne peut
donc tre plac l'intrieur de la mthode draw() car cette mthode
s'excute plusieurs fois durant le droulement du programme.
A moins de se satisfaire de la dimension par dfaut de 100x100 pixels,
dnir la taille de la fentre de visualisation peut s'avrer trs utile.
C'est pour toutes ces raisons qu'une deuxime mthode
complmentaire a t cre : la mthode setup () .
vo id setup () {
}

Les subtilits des dirents signes qui composent cette mthode

sont pour l'instant sans importance. Sachez simplement qu'il faut
crire vo id setup () tout au dbut, suivi d'une ouverture d'accolades,
saisir ensuite les instructions que vous voulez excuter, et enn
terminer avec la fermeture des accolades.
vo id setup () {
size(500, 500);
}
vo id draw() {
backgro und(rando m (255));
}

106

Lorsque ce sketch est lanc, Processing excute tout d'abord les

instructions qui se trouvent l'intrieur de la mthode setup () .
Ensuite, la mthode draw() commencera tre appele de manire
rpte, telle un mtronome.
Ce principe de fonctionnement est illustr par le schma suivant :

Background()
Voici un programme qui remplit progressivement l'cran avec des
ellipses.

107

vo id setup () {
size(200, 200);
fill(0);
}
vo id draw() {
ellip se(rando m (200), rando m (200), 20, 20);
}

Comme vous pouvez le constater dans les captures d'cran, cette

animation nira par remplir notre espace de dessin compltement
par du noir. C'est peut-tre luvre conceptuelle ultime de toute
notre carrire artistique ; nanmoins il serait bien utile d'apprendre
animer une seule ellipse, la voir voluer dans l'espace ou changer de
forme, sans que ses positions antrieures soient aches en mme
temps.
Dans ce cas, il sut d'ajouter un nettoyage de fond de l'espace de
dessin l'aide de la mthode backgro und() . Celle-ci prend une trois
valeurs de couleur, comme pour la mthode fill() ou stro ke() .
Voici une modication du programme qui permettra d'acher
maintenant une seule forme anime :
vo id setup () {
size(200, 200);
fill(0);
}
vo id draw() {
backgro und(255);
ellip se( 100, 100, rando m (100), rando m (100));
}

En ralit, ce que nous demandons au programme, c'est 30 fois par

seconde d'eacer l'intgralit de notre dessin et de tracer une
nouvelle forme par dessus avec un nouveau fond blanc.

108

Ajouter un fondu
Il existe une astuce, souvent utilise dans la communaut des
utilisateurs de Processing, qui consiste eacer le fond de l'image
l'aide d'un rectangle semi-transparent plutt qu'avec l'instruction
backgro und() . Ce procd permet d'obtenir un eet d'eacement
graduel, de fondu.

vo id setup () {
size(200,200);
backgro und(0);
no Stro ke();
}
vo id draw() {
fill(0, 0, 0, 20);
rect(0, 0, 200, 200);
fill(255);
ellip se(100 + rando m (-20,20), 100 + rando m (-20,20), rando m (50),
rando m (50));
}

109

La ligne de temps
Pour crer une animation, il faut qu'il y ait du mouvement. Le
mouvement implique un changement du dessin dans le temps, par
exemple une modication de la position ou de la couleur d'un de ces
lments graphiques. Les informations lies ces changements
peuvent tre stockes dans des variables.
Pour crer des animations, il faut savoir quel moment nous nous
trouvons par rapport une ligne de temps. Pour ce faire, nous
pouvons soit utiliser l'heure qu'il est, soit compter (par exemple de
un dix).

Quelle heure est-il?

Nous allons crer une horloge en appelant les mthodes ho ur() ,
m inute() et seco nd() de Processing. Nous allons utiliser le rsultat de
l'appel de ces mthodes pour faire varier la position sur l'axe
horizontal de trois minces rectangles.

Le code pour raliser cette horloge est trs simple :

vo id setup () {
size(60, 60);
no Stro ke();
}
vo id draw() {
backgro und(0);
// Les heures vo nt de 0 23, no us les co nvertisso ns une
// chelle de 0 60
rect((ho ur() / 24.0) * 60, 0, 1, 20);
rect(m inute(), 20, 1, 20);
rect(seco nd(), 40, 1, 20);
}

Les images sont dessines les unes par-dessus les autres. L'appel
l'instruction backgro und(0) remplit l'espace de dessin avec la couleur
dnie en paramtre (le nombre 0 correspondant du noir) ce qui
revient chaque fois effacer l'image prcdente.

110

Mesurer le temps qui passe

On peut obtenir le temps qui s'est coul depuis le dbut de
l'excution d'un sketch en utilisant la mthode m illis() . Celle-ci
retourne un nombre en millisecondes. Cette valeur peut tre
exploite pour crer des animations. Il y a mille millisecondes dans
une seconde : une prcision susante pour animer des formes ou
des sons.
Par ailleurs, vous pouvez galement avoir besoin de crer des
animations cycliques dont la frquence (le nombre d'animations par
cycle) s'adapte en fonction d'autres lments, par exemple la taille
de la fentre de visualisation de l'espace de dessin. Pour dterminer
partir d'une valeur donne ce nombre d'animations par cycle, la
solution la plus simple consiste utiliser l'oprateur modulo % . En
mathmatique, le modulo permet d'obtenir le reste d'une division
par un nombre. Par exemple, l'expression p rintln(109 % 10); achera
9, car 109 divis par 10, donne 10 comme quotient et 9 comme reste.
De manire plus gnrale, si on prend deux nombres x et y, le reste
de la division de x par y est strictement infrieur y. L'oprateur
modulo nous permet donc de compter sans jamais dpasser un
certain nombre (la base du modulo).
Dans le prochain exemple, nous allons utiliser la mthode m illis() et
l'oprateur % pour dessiner un cercle qui parcourt trs rapidement le
sketch selon des trajectoires diagonales. Ce cercle laisse derrire lui
une trane qui s'efface graduellement.

Le code de cette animation est le suivant :

vo id setup () {
size(320, 240);
no Stro ke();
fram eRate(60);
sm o o th();
}
vo id draw() {
fill(0, 0, 0, 10);
rect(0, 0, width, height);
fill(255);
ellip se(m illis() % width, m illis() % height, 20, 20);
}

111

L'eacement du dessin prcdent s'eectue l'aide d'un rectangle

semi-transparent. Ce procd permet d'obtenir un eet de ou de
mouvement contrairement l'instruction backgro und() . La prsence
de l'instruction sm o o th() au dbut du programme s'explique par notre
amour des courbes lisses.
Un conseil : basez vos animations sur la mesure du temps plutt que
sur le dcompte du nombre d'images dessines. La vitesse de rendu
peut trs sensiblement se dgrader lorsque les capacits de
l'ordinateur sont occupes grer un compteur : les animations
deviennent alors moins uides, plus saccades. Ces limitations de
performance n'existent pas lorsque l'on utilise les instructions
associes l'horloge interne de l'ordinateur pour mesurer le temps
qui passe.
Pour satisfaire votre curiosit et malgr notre mise en garde sur
l'utilisation de la mthode du dcomptage du nombre d'images
dessines, nous allons nanmoins voir comment crer des
animations l'aide de compteurs, le principe de mis en oeuvre tant
trs simple

Animer l'aide d'un compteur

Nous allons maintenant voir comment crer une animation en
comptant, mme si, rappelons-le, nous vous dconseillons cette
mthode pour des questions de performance. Dans notre exemple,
l'animation reprsentant une simple ligne qui tourne sans cesse.

Le code est relativement simple, le compteur d'images constituant

l'essentiel du programme. A chaque degr de rotation de la ligne
correspond le numro d'une image dessine.
int co m p teur;
vo id setup () {
size(320, 240);
fram eRate(60);
fill(0, 0, 0, 10);
stro ke(255);
sm o o th();
co m p teur = 0;
}
vo id draw() {
co m p teur = co m p teur + 1;

112

co m p teur = co m p teur + 1;
rect(0, 0, width, height);
translate(width / 2, height / 2);
ro tate(radians(co m p teur));
line(-height, -height, height, height);
}

On dclare un compteur en en-tte de l'application.

int co m p teur;

Dans le setup () on initialise notre compteur.

vo id setup () {
size(320, 240);
fram eRate(60);
fill(0, 0, 0, 10);
stro ke(255);
sm o o th();
co m p teur = 0;
}

A chaque appel de mthode draw() on incrmente notre compte de 1.

co m p teur = co m p teur + 1;

On spcie ensuite le repre de l'espace de dessin pour dessiner au

centre et on gnre un rotation qui dpend de co m p teur .
translate(width / 2, height / 2);
ro tate(radians(co m p teur))

Une traine est visible dans l'animation. La superposition des lignes

en s'effaant graduellement donne un effet moir.

113

L'animation d'un objet

En combinant animation et objet, il devient possible de concevoir
des applications plus ambitieuses. Animer un objet revient ajouter
son modle des actions de type : se dplacer, rebondir, tester les
collisions, etc. Dans ce chapitre, nous allons apprendre comment
animer une balle et la faire rebondir sur les quatre bords de l'cran.
Le rsultat nal se prsentera comme ci-dessous. An de mieux
visualiser la trajectoire de la balle, nous avons intgr dans
l'animation un effet de traine.

Code de base
Comme point de dpart, nous allons reprendre le programme de la
balle du chapitre Les objets qui nous permettait d'acher une
balle l'cran et lui ajouter progressivement des morceaux de code.
Les nouvelles parties du sketch sont signales en gras avec la
mention //AJOUT ou //DEBUT AJOUT et //FIN AJOUT. Pour vous
familiariser avec le fonctionnement de ce nouveau programme,
vous pouvez galement copier tout le bloc du code initial dans votre
fentre d'dition de Processing et progressivement lui ajouter la
classe ou la mthode concerne.

//D claratio n et cratio n d'une instance de l'o bjet B alle

B alle m aB alle = new B alle(100, 100, co lo r(255));
vo id setup () {
sm o o th(); //Lissage des dessins
size(400, 200); //Taille de la fentre
}
vo id draw() {
backgro und(0); //O n dessine un fo nd no ir

114

no Stro ke(); //O n sup p rim e le co nto ur

m aB alle.disp lay(); //Affichage de la balle
}
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
}

Le dplacement
La balle doit pouvoir se dplacer sur les axes x et y. Nous allons
crer deux variables dans le modle de l'objet qui caractriseront sa
vitesse sur les axes x et y. Ensuite nous allons ajouter une nouvelle
mthode bo uge() dans le modle de l'objet qui sera appele depuis la
mthode draw() du programme. Cette mthode va, chaque fois que
l'objet est ach, modier la position de la balle par rapport sa
vitesse. Il faudra aussi initialiser les variables dcrivant la vitesse
dans le constructeur. Pour commencer, nous allons leur donner une
valeur fixe.
class B alle {
//D claratio n des caractristiques de base de la balle
flo at x;
flo at y;
f lo a t v it e s s e X ; / / A J O U T
f lo a t v it e s s e Y; / / A J O U T
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

v it e s s e X = 2 ; / / A J O U T
v it e s s e s Y = 2 ; / / A J O U T
}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}

115

//D EB U T AJO U T
v o id b o u g e ( ) {
x = x + v it e s s e X ;
y = y + v it e s s e Y;
//FIN AJO U T
}

Il faudra ensuite appeler la mthode bo uge() depuis la mthode draw() .

Par ailleurs, nous ajoutons un appel l'instruction backgro und() pour
effacer l'cran chaque nouvelle image.
vo id draw() {
backgro und(0); //O n dessine un fo nd no ir
no Stro ke(); //O n sup p rim e le co nto ur
//D p lacem ent et affichage de la balle
m a B a lle . b o u g e ( ) ; / / A J O U T
m aB alle.disp lay();
}

Les collisions
Pour le moment, ds que la balle touche le bord de l'cran, elle
continue son chemin. Selon l'exemple de la balle qui rebondit sur les
coins de l'cran du chapitre La ligne de temps , nous allons
ajouter une mthode testCo llisio n qui inversera la vitesse de la balle
lorsqu'elle touche les bords de l'cran.
class B alle {
//D claratio n des caractristiques de base de la balle
flo at x;
flo at y;
flo at vitesseX;
flo at vitesseY;
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

vitesseX = 2;
vitesseY = 2;
}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
vo id m o ve() {
x = x + vitesseX;
y = y + vitesseY;
}
//D EB U T AJO U T
v o id t e s t C o llis io n ( ) {
/ / S i la b a lle t o u c h e u n m u r , e lle r e b o n d it

116

if ( x > w id t h - 2 0 || x < 2 0 ) {
v it e s s e X = v it e s s e X * - 1 ;
}
if ( y > h e ig h t - 2 0 || y < 2 0 ) {
v it e s s e Y = v it e s s e Y * - 1 ;
}
}
//FIN AJO U T
}

Il faut ensuite appeler la mthode testCo llisio n() depuis la mthode

draw() .
//O N REM PLACE L'IN STRU CTIO N B ACKG RO U N D () PAR CES D EU X LIG N ES
fill(0, 0, 0, 1); // Co uleur avec transp arence.
rect(0, 0, width, height);

no Stro ke();

//D p lacem ent et affichage de la balle

m aB alle.bo uge();
m aB alle.testCo llisio n();//AJO U T
m aB alle.disp lay();
}

Code Final
Voici le code final, une fois toutes ces modifications effectues.
//D claratio n et cratio n d'une instance de l'o bjet B alle
B alle m aB alle = new B alle(100, 100, co lo r(255));
vo id setup () {
sm o o th(); //Lissage des dessins
size(400, 200); //Taille de la fentre
}
vo id draw() {
fill(0, 0, 0, 1);
rect(0, 0, width, height);
no Stro ke();
//D p lacem ent et affichage de la balle
m aB alle.bo uge();
m aB alle.testCo llisio n();
m aB alle.disp lay();
}
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
flo at vitesseX; //AJO U T
flo at vitesseY; //AJO U T
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

117

vitesseX = 2; //AJO U T
vitesseY = 2; //AJO U T
}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
vo id bo uge() {
x = x + vitesseX;
y = y + vitesseY;
}
vo id testCo llisio n() {
//Si la balle to uche une m ur, elle rebo ndit
if (x > width-20 || x < 20) {
vitesseX = vitesseX * -1;
}
if (y > height-20 || y < 20) {
vitesseY = vitesseY * -1;
}
}
}

N'hsitez pas modier certains paramtres du programme pour

vous approprier davantage son fonctionnement.

118

L'animation
objets

de

plusieurs

Ds lors qu'un objet est cr dans un programme, il est possible de

le multiplier facilement et rapidement. Deux solutions sont
possibles :
Dans le chapitre d'introduction aux objets, nous avons vu
qu'on pouvait obtenir deux balles l'cran en dclarant une
seconde copie de la balle et en l'affichant son tour dans la
mthode draw() . Ce procd devient toutefois lourd lorsque
le nombre d'objets reproduire est suprieur deux.
Lorsqu'il y a plus de deux objets animer, il est prfrable
d'utiliser des listes. Petit rappel du chapitre consacr
cette notion : les listes permettent de grer facilement un
ensemble d'lments semblables que ce soit des chires,
des images et mme des objets.
Dans ce chapitre, nous allons poursuivre l'exemple de la balle
rebondissante. Nous allons ajouter plusieurs balles en utilisant des
listes puis ajouter une mthode permettant de grer les collisions
entre les balles.

Code de base
Comme point de dpart, nous allons reprendre le code de la balle
du chapitre Animer un objet qui nous permettait d'acher une
balle rebondissante l'cran. Tout au long du chapitre, nous allons
ajouter des portions de code l'exemple de base. Les nouvelles
parties sont signales en gras avec la mention //AJOUT ou //DEBUT
AJOUT et //FIN AJOUT. Pour vous familiariser avec le
fonctionnement de ce nouveau programme, vous pouvez
galement copier tout le bloc du code initial dans votre fentre
d'dition de Processing et progressivement lui ajouter la classe ou la
mthode concerne.

119

//D claratio n et cratio n d'une instance de l'o bjet B alle

B alle m aB alle = new B alle(100, 100, co lo r(255));
vo id setup () {
sm o o th(); //Lissage des dessins
size(400, 200); //Taille de la fentre
}
vo id draw() {
fill(0, 0, 0, 1);
rect(0, 0, width, height);
no Stro ke();
//D p lacem ent et affichage de la balle
m aB alle.bo uge();
m aB alle.testCo llisio n();
m aB alle.disp lay();
}
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
flo at vitesseX; //AJO U T
flo at vitesseY; //AJO U T
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

vitesseX = 2; //AJO U T
vitesseY = 2; //AJO U T
}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
vo id bo uge() {
x = x + vitesseX;
y = y + vitesseY;
}

120

vo id testCo llisio n() {

//Si la balle to uche une m ur, elle rebo ndit
if (x > width-20 || x < 20) {
vitesseX = vitesseX * -1;
}
if (y > height-20 || y < 20) {
vitesseY = vitesseY * -1;
}
}
}

Lister les balles

Nous allons maintenant appliquer le concept de listes notre balle
rebondissante. Cela nous permettra d'avoir plusieurs balles
l'cran, sans dupliquer le code !
En premier lieu, nous allons dclarer une liste de balles et non plus
une seule balle. Pour cela, nous allons utiliser une variable nbreB alle
pour stoker le nombre de balles utilises dans le programme.
Nous allons remplacer la dclaration en en-tte suivant
B alle m aB alle = new B alle(100, 100, co lo r(255));

par
/ / D c la r a t io n d ' u n e v a r ia b le c o n t e n a n t le n o m b r e d e b a lle s
in t n b r e B a lle = 3 ;
/ / D c la r a t io n d ' u n e lis t e d ' in s t a n c e s d e l' o b je t B a ll
B a lle [] b a lle s = n e w B a lle [n b r e B a lle ] ;

Comme dans l'exemple des nombres entiers, nous venons

uniquement de dclarer des copies du modle de balle. Il faut
maintenant les crer dans le setup () . Nous allons dessiner trois
balles au centre de l'cran. T outes les trois seront blanches.
vo id setup () {
sm o o th(); //Lissage des dessins
size(400, 200); //Taille de la fentre
//D EB U T AJO U T
/ / C e t t e b o u c le v a c r e t r o is b a lle s
/ / b la n c h e s a u c e n t r e d e l' c r a n
f o r ( in t i = 0 ; i < n b r e B a lle ; i++) {
b a lle s [i] = n e w B a lle ( w id t h / 2 , h e ig h t / 2 ,

c o lo r ( 2 5 5 ) ) ;

}
//FIN AJO U T
}

Dans la mthode draw() , nous allons aussi crer une boucle qui va
parcourir tous les lments de la liste pour les dplacer, tester leurs
collisions et les afficher. Nous allons remplacer
//D p lacem ent et affichage de la balle
m aB alle.bo uge();
m aB alle.testCo llisio n();
m aB alle.disp lay();

par

121

/ / C e t t e b o u c le v a d p la c e r e t a f f ic h e r le s t r o is b a lle s
f o r ( in t i = 0 ; i < n b r e B a lle ; i++) {
b a lle s [i]. b o u g e ( ) ;
b a lle s [i]. t e s t C o llis io n ( ) ;
b a lle s [i]. d is p la y ( ) ;
}

Une dernire opration va consister modier le constructeur du

modle de la balle an que chaque balle ait une vitesse et une
direction spciques. Pour ce faire nous allons utiliser la fonction
rando m () qui permet de gnrer des nombres alatoires. Nous allons
remplacer le constructeur ci-dessous :
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

vitesseX = 2;
vitesseY = 2;
}

par celui-ci
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

v it e s s e X = 2 + r a n d o m ( - 1 , 1 ) ;
v it e s s e s Y = 2 + r a n d o m ( - 1 , 1 ) ;
}

Code final
Voici le programme complet :
//D claratio n d'une variable co ntenant le no m bre de balles
int nbreB alle = 3;
//D claratio n d'une liste d'instances de l'o bjet B alle
B alle[] balles = new B alle[nbreB alle];
vo id setup () {
sm o o th(); //Lissage des dessins
size(400, 200); //Taille de la fentre
//Cette bo ucle va crer tro is balles blanches
//au centre de l'cran
fo r (int i = 0; i < nbreB alle; i++) {
balles[i] = new B alle(width/2, height/2,

co lo r(255));

}
}
vo id draw() {
fill(0, 0, 0, 1); // Co uleur avec transp arence.
rect(0, 0, width, height);
no Stro ke();

122

//Cette bo ucle va dp lacer et afficher les tro is balles

fo r (int i = 0; i < nbreB alle; i++) {
balles[i].bo uge();
balles[i].testCo llisio n();
balles[i].disp lay();
}
}
class B alle {
//D claratio n des p aram tres de base de la balle
flo at x;
flo at y;
flo at vitesseX;
flo at vitesseY;
co lo r co uleur;
//Co nstructeur de la balle
B alle (flo at no uvX, flo at no uvY, co lo r no uvCo uleur) {
x

= no uvX;

= no uvY;

co uleur

= no uvCo uleur;

vitesseX = 2 + rando m (-1,1);

vitesseY = 2 + rando m (-1,1);
}
//D essin de la balle
vo id disp lay() {
fill(co uleur);
ellip se(x, y, 40, 40);
}
//D p lacem ent de la balle
vo id bo uge() {
x = x + vitesseX;
y = y + vitesseY;
}
vo id testCo llisio n() {
//Si la balle to uche un m ur, elle rebo ndit
if (x > width-20 || x < 20) {
vitesseX = vitesseX * -1;
}
if (y > height-20 || y < 20) {
vitesseY = vitesseY * -1;
}
}
}

N'hsitez pas modier certains paramtres du programme pour

vous approprier davantage son fonctionnement.

123

La lecture du son
Processing est un environnement principalement ddi la cration
visuelle. Il n'a pas t conu au dpart pour jouer du son, et encore
moins pour gnrer directement des ondes audio, tel un logiciel
comme Pure Data. Par la suite, de nombreuses bibliothques
externes ont t cres pour tendre les capacits sonores de
Processing. Ainsi vous pouvez n'importe quel moment intgrer ces
bibliothques externes dans vos programmes : des synthtiseurs,
des sampleurs audio, des interfaces MIDI, des squenceurs, etc.
Sachez toutefois que ce n'est pas la mission de base de Processing
davantage centre sur la gnration de formes visuelles.
Dans ce chapitre, nous allons nous familiariser avec un minim de
fonctionnalits audio disponibles par dfaut dans Processing.

Minim
Il a t dcid un moment donn d'intgrer dans toute distribution
Processing la bibliothque audio Minim pour pouvoir par dfaut jouer
des chiers audio ou capter le son entrant par le microphone. A
priori cette bibliothque est dj installe sur votre machine. Pour
vrier sa prsence et l'intgrer dans votre programme, il sut
d'aller dans le menu Sketch > Import Library... > Minim audio.

Selon votre plate-forme et votre version, la suite de cette action,

Processing ajoutera des lignes de code plus ou moins nombreuses
en haut de votre programme. Par dfaut, il faut au moins voir
affiche l'instruction suivante :

im p o rt ddf.m inim .*;

124

C'est cette instruction (que vous pouvez saisir la main si vous le

voulez) qui importera l'ensemble des fonctionnalits de la
bibliothque Minim pour les rendre accessibles notre programme.
C'est partir de cette instruction im p o rt ddf.m inim .*; que notre sketch
va pouvoir jouer du son.

Configurer Minim
Le lancement de notre sketch via le bouton Run ne sut pas pour
jouer un son. Au pralable, il faut prvoir d'activer les fonctionnalits
de gestion audio de Minim (son moteur audio en jargon
informatique). Pour jouer un son, Minim doit en eet auparavant
demander un accs la carte son de votre ordinateur. Ne vous
inquitez pas, Minim s'occupe de toute cette cuisine interne pour
vous, il sut de lui dire de s'activer pour cela. Le fait d'avoir activ
Minim suppose de prvoir de le dsactiver la n de notre
programme.
Si vous ne comprenez pas tout ce que nous venons de dire, ce n'est
pas trop grave. Sachez simplement qu'il faut saisir le code suivant au
dbut de chaque programme utilisant Minim :
im p o rt ddf.m inim .*;
M inim m inim ;
vo id setup () {
m inim = new M inim (this);
}

Et qu'il faut galement crire la n du programme les instructions

suivantes :
vo id sto p () {
m inim .sto p ();
sup er.sto p ();
}

Si par curiosit vous voulez savoir quoi sert le mot this dans ce
programme, sachez qu'il sert indiquer Processing que nos
instructions s'appliquent ce programme. Minim a besoin de
connatre l'adresse de ce programme (le ntre) pour le faire
communiquer avec la carte son de notre ordinateur. Encore une fois,
si vous ne comprenez pas ce que nous venons de dire, ce n'est pas
grave. Sachez seulement que ces mots doivent tre crits au dbut
et la n de chaque programme lorsque nous voulons produire du
son.

Importer un son
Tout comme les images photographiques ou la typographie, nous
allons importer un chier son dans Processing pour pouvoir le jouer
dans notre programme. Pour bien russir cette tape, nous vous
recommandons de sauvegarder d'abord votre sketch.
Nos sons peuvent venir de plusieurs sources : des sons tlchargs,
des sons que vous avez crs vous-mme via un logiciel comme
Audacity, voire des sons que vous pouvez trouver par dfaut dans
votre systme d'exploitation.

125

Identiez et slectionnez prsent le chier son que vous souhaitez

utiliser, et glissez-le directement sur la fentre Processing :

Cette action placera le son de ce chier dans le dossier data de

votre sketch (un message s'achant au niveau de la console de
Processing vous le conrmera). Si vous voulez voir ce que contient
ce dossier, taper sur ctrl-k (Windows/Linux) ou cmd-k (Mac), sinon
choisissez dans le menu Sketch > Show Sketch Folder.

Formats audio
Vous pouvez utiliser trois formats audio avec Minim : WAV, AIFF, et
MP3. Les deux premiers formats peuvent tre exports par dfaut via
des logiciels libres comme Audacity. Le troisime format ncessite
ce jour un plug-in pour Audacity, mais celui-ci est relativement facile
installer.
Comme pour les images, les dirents formats ont leurs avantages
et dsavantages.

126

place mmoire que les fichiers au format MP3.

2. Le format MP3 est un format compress. Il est souvent
beaucoup moins volumineux que les chiers WAV et AIFF.
Par contre, la lecture du format MP3 ncessite plus de
ressources de calcul de votre ordinateur, car le chier doit
tre dcompress lors de sa lecture.

Une horloge
Voici un programme simple, qui anime une ellipse avec les secondes
de l'horloge de votre ordinateur (l'horloge systme). Nous allons
utiliser ce programme comme base pour crer une horloge qui
sonne toutes les minutes. Pour mieux anticiper cet vnement qui se
droule toutes les soixante secondes car il ncessite une certaine
patience nous allons reprsenter les secondes par une ellipse qui
s'agrandit progressivement depuis le centre de l'espace de dessin.

vo id draw() {
backgro und(255);
ellip se(50,50,seco nd(),seco nd());
}

Nous utiliserons la valeur des secondes de l'horloge systme pour

dnir les paramtres {largeur,hauteur} de l'ellipse. Si les secondes
sont gales 42, nous aurons une ellipse de 42 x 42 pixels. Si les
secondes sont gales 2, nous aurons une ellipse de 2 x 2 pixels.
Nous pouvons galement ajouter une condition pour signaler
davantage le changement des minutes : chaque fois que les
secondes reviendront zro, nous marquerons l'vnement avec un
cran rouge.

vo id draw() {
if ( s e c o n d ( ) = = 0 ) {

127

if ( s e c o n d ( ) = = 0 ) {
backgro und(255,0,0);
} e ls e {
backgro und(255);
}
ellip se(50,50,seco nd(),seco nd());
}

La condition if(seco nd() == 0) {} compare les secondes avec la valeur

0. Si les deux sont gales, le fond sera rouge, sinon (else ) le fond sera
blanc.

Une horloge sonore

Nous allons maintenant sonoriser ce programme en jouant un son
chaque fois que les secondes de notre horloge reviennent zro.
Pour commencer, nous allons ajouter autour de notre mthode
draw() de l'horloge, toutes les mthodes ncessaires pour la
sonoriser (lignes de code mentionnes en gras).
im p o r t d d f . m in im . * ;
M in im m in im ;
A u d io S n ip p e t p in g ;
v o id s e t u p ( ) {
m in im = n e w M in im ( t h is ) ;
p in g = m in im . lo a d S n ip p e t ( "p in g . w a v ") ;
}
vo id draw() {
if (seco nd() == 0) {
if ( p in g . is P la y in g ( ) = = f a ls e ) {
p in g . p la y ( ) ;
}
backgro und(255,0,0);
} else {
backgro und(255);
}
ellip se(50,50,seco nd(),seco nd());
}
v o id s t o p ( ) {
p in g . c lo s e ( ) ;
m in im . s t o p ( ) ;
sup er.sto p ();
}

Attardons-nous sur la structuration de ce sketch :

128

Ce programme ncessite de nombreuses tapes pour fonctionner :

1. Importer les fonctionnalits Minim dans notre sketch.
2. Crer deux variables dont l'une qui contiendra le moteur
Minim et l'autre les donnes audio.
3. Dmarrer le moteur Minim au dbut du programme.
4. Copier les donnes du fichier audio dans notre variable.
5. Actions conditionnelles : jouer le son et acher un cran
rouge lorsque les secondes sont gales zro (vrier que
ce son n'est pas dj en train de jouer) .
6. Dessiner une ellipse en fonction de la valeur des
secondes de l'horloge.
7. A la fin du programme, arrter le son.
8. A la fin du programme, arrter Minim.

129

Nous avons dj expliqu le dmarrage et l'extinction du moteur

Minim. Nous n'y revenons pas. Par contre, nous attirons votre
attention sur les parties 2, 4 et 5 du programme qui concernent
l'importation et la lecture du son.
Tout d'abord, nous avons cr une variable de type AudioSnippet. Le
type AudioSnippet est un type de variable dni l'intrieur du code
de Minim. Nous vous rappelons que dans le cas de n'importe quelle
variable, la formule pour la dclarer est de la forme {type de la
variable} {nom de la variable} = {les valeurs de la variable}. Par
exemple, si par un tour de force il tait possible d'importer un petit
oiseau tout mignon dans Processing, il surait d'crire PetitO iseau
p io up io u = lo adB ird("p io up io u.bird"); . En d'autres termes, on crit
d'abord le type de la chose, le nom de la chose, et enfin on lui donne
sa valeur. Pour revenir notre exemple d'horloge sonore, cette
valeur est donne par la fonction lo adSnip p et() qui va aller chercher
les valeurs d'ondes dans le chier audio et les importera dans notre
variable nomme ping .
Pour plus d'informations sur les variables et les dirents types de
variables, reportez-vous au chapitre ddi ce sujet.
Une fois la variable charge avec le son, il sut de le jouer. Dans le
cas du AudioSnippet la commande pour jouer un son s'appelle p lay() .
Enn, il peut tre important de vrier un moment donn si le son
n'est pas dj en train d'tre jou. C'est le rle de la commande
isPlaying() de nous dire si oui (true ) ou non (false ) nous sommes dans
cette situation. Dans notre exemple, si nous avions oubli cette
condition, le son se serait lanc pendant soixante fois durant la
totalit de la seconde o seco nd() est gal zro .

AudioSnippet, AudioSample, AudioPlayer

La bibliothque Minim distingue plusieurs manires de jouer un son
dans Processing. En principe, les instructions utiliser dpendront
de la nature et rle du son dans votre programme. Si l'on se rfre
la documentation dcrivant les fonctionnalits oertes par Minim,
u n Audio Snip p et sera employ pour une lecture simple d'un court
extrait sonore, un Audio Sam p le pour une lecture rapide et rpte
comme une bote rythmes, et enn un Audio Player pour jouer des
chiers audio plus longs (souvent de type MP3) situs directement
sur le disque dur de votre ordinateur pour ne pas alourdir encore
davantage la mmoire interne du programme. Voici un exemple qui
utilise les trois mthodes de lecture du son associes
respectivement trois chiers audio imaginaires dnomms ping,
pop et song.
im p o rt ddf.m inim .*;
M inim m inim ;
Audio Sam p le p ing;
Audio Snip p et p o p ;
Audio Player so ng;
vo id setup () {
m inim = new M inim (this);
p ing = m inim .lo adSam p le("p ing.aiff");
p o p = m inim .lo adSnip p et("p o p .aiff");
so ng = m inim .lo adFile("so ng.m p 3");
}

130

vo id draw() {
}
vo id keyPressed() {
if (key == 'a') p ing.trigger();
if (key == 'b') {
p o p .rewind();
p o p .p lay();
}
if (key == 'c') so ng.p lay();
}
vo id sto p () {
p ing.clo se();
p o p .clo se();
so ng.clo se();
m inim .sto p ();
sup er.sto p ();
}

Notez avant tout que les instructions d'importation et de lectures

changent selon le type choisi. Audio Player et Audio Sam p le utiliseront
tous les deux la mthode p lay() car leur lecture est toujours unique
(un seul son la fois). Par contre, Audio Sam p le ncessite la lecture de
nombreux sons simultans (on peut taper plusieurs fois sur une
batterie) et pour cette raison utilise une autre nomenclature,
trigger() , pour dcrire le lancement d'un son. En anglais, le mot
trigger signifie une gchette.

Documentation
Pour plus d'informations sur les direntes fonctionnalits de
Minim, ainsi qu'un grand nombre d'exemples d'utilisation (avec leur
code source librement mis disposition), reportez-vous au site
http://code.compartmental.net/tools/minim/ ou la documentation
technique (plus dicile lire) consultable l'adresse
http://code.compartmental.net/minim/javadoc/ddf/minim/packagetree.html.

131

SORTIR

132

L'exportation
Pour l'instant, nous avons travaill exclusivement dans
l'environnement de Processing. Nous tapons des lignes de code et
nous les excutons depuis l'interface par le bouton Run. A prsent,
nous allons voir que Processing intgre deux manires d'exporter
notre programme pour le distribuer. L'une, destination du web,
permet d'exposer son animation en ligne, visible sur une page dans
un navigateur. L'autre procd de diusion permet de crer une
application autonome fonctionnant directement sur un ordinateur
utilisant Windows, Mac ou Linux. Dans les deux cas, plus besoin de
l'diteur pour faire tourner votre sketch.

Exporter pour le web

Une fois que votre programme fonctionne et que vous tes satisfait
du rsultat, vous pouvez gnrer un applet, objet intgrable une
page web et lisible par votre navigateur internet habituel. Pour
effectuer cette exportation, il suffit de cliquer sur le bouton Export.

L'opration eectue, Processing ouvre automatiquement un dossier

applet dans l'explorateur de chiers de votre ordinateur. Celui-ci
contient plusieurs fichiers.

index.html est la page web gnre par Processing. En

double cliquant dessus, votre navigateur internet va se
lancer et acher l'animation que vous venez juste
d'exporter.
loading.gif est une icne utilise lors du chargement de
l'applet dans la page web.
{votre nom de sketch}.jar est l'applet proprement parler.
Il s'agit du code source de votre sketch qui a t transform
et sauvegard avec toutes les donnes.
{votre nom de sketch}.java est la version Java de votre
code.
{votre nom de sketch}.pde est le code source original du
sketch que vous avez saisi dans l'diteur de Processing.
Attention!
A
chaque
exportation,
Processing
crase
automatiquement les chiers portant le mme nom. Par prcaution,
si vous eectuez des modications sur le chier{votre nom de
sktech}.html, pensez au pralable le renommer.

133

Si vous disposez d'un espace de stockage sur un serveur web, et que

vous tes familiers des transferts FT P, vous pouvez tlverser le
dossier applet (en le renommant, si besoin est) dans votre espace en
ligne. Vous pourrez ainsi rendre accessibles vos sketchs sur Internet.

Exporter pour l'ordinateur

Votre sketch Processing peut galement tre export sous la forme
d'une application directement excutable sur Windows, Mac et
GNU/Linux. Il sura alors de cliquer dessus pour le lancer comme
n'importe quel autre logiciel prsent sur votre ordinateur. Pour
eectuer cette exportation, il sut de slectionner dans le menu
File > Export Application.

La fentre Export Options suivante devrait s'ouvrir.

Platforms permet de slectionner la plateforme. C'est l

toute la beaut de Processing : nous pouvons exporter une
application dveloppe sur Mac pour GNU/Linux, par
exemple.
Full Screen (Present mode) lancera l'application en plein
cran lors du double-clic.
Show a Stop button , en mode Full Screen, ache un
bouton Stop sur l'cran pour arrter l'application.

134

Une fois l'application assemble, la fentre du dossier du sketch

s'ache avec les dossiers propres chaque plateforme. Le chier
excutable se trouve l'intrieur, prt tre lanc sur votre
ordinateur.

Comme vous pouvez le constater, les procdures d'exportation sont

vraiment trs simples raliser.

135

L'impression
Pour l'instant, nous avons travaill sur l'cran en gnrant des
images et des animations. Nous allons maintenant nous intresser
aux possibilits qu'ore Processing en matire d'impression : nous
allons crer un document PD F (Portable Document Format)
contenant des formes gomtriques vectorielles, document qui
pourra ensuite tre imprim sur du papier ou un autre mdium.

Mode direct
Dans ce premier exemple, nous allons gnrer 500 cercles
alatoirement et les dessiner dans un document PDF, qui sera sauv
dans notre dossier de travail.

im p o rt p ro cessing.p df.*;
size(400, 400, PD F, "Cercles.p df");
fo r (int i = 0; i < 500; i++)
ellip se(rando m (width),rando m (height), 50, 50);
exit();

Comment fonctionne ce programme ? Tout d'abord, nous

commenons par importer toutes les classes de la librairie
p ro cessing.p df . Nous utilisons la mthode size() qui permet de dnir
les caractristiques de notre espace de dessin : cette fois-ci, nous
mentionnons quatre paramtres. Notez le mot-cl PD F qui indique
Processing que nous allons dessiner dans le document "Cercles.p df",
pass en quatrime paramtre de la mthode.

136

Avec ce mode direct de trac, puisque nous dessinons directement

dans le document et non plus sur l'cran, nous n'avons plus besoin
de la fentre de visualisation de Processing. Le programme se
termine par la commande exit() , qui indique au logiciel de terminer le
programme tout seul, exactement comme si nous avions appuy
sur le bouton stop de l'interface.
Le document gnr au format pdf se trouve dans le dossier de
sketch de votre application. Vous pouvez double-cliquer dessus pour
l'ouvrir.

Mode enregistrement
Nous allons voir maintenant comment dessiner la fois sur l'cran
et dans un chier .pdf l'aide des commandes beginReco rd() et
endReco rd() . Ces deux mthodes vont nous permettre de dmarrer et
arrter l'enregistrement des commandes graphiques dans un chier
PDF.
Comme prcdemment, le chier gnr est sauvegard dans le
dossier du sketch.
Dans l'exemple suivant, nous allons raliser un outil graphique, une
sorte de pinceau numrique dont la taille du trac dpend de la
vitesse laquelle nous dplaons la souris. Au dmarrage de
l'application, dans le setup () , nous indiquons le dbut de
l'enregistrement par la commande beginReco rd() qui prend en
paramtres le type d'export (pour l'instant Processing ne supporte
que l'extension PD F ) et le nom du chier en second paramtre.
Lorsqu'on appuie sur la touche ESPACE , l'enregistrement est stopp et
l'application s'arrte. Comme prcdemment, le chier gnr est
sauvegard dans le dossier du sketch.

137

im p o rt p ro cessing.p df.*;
bo o lean drag = false;
vo id setup ()
{
size(400, 400);
sm o o th();
beginReco rd(PD F, "Cercles.p df");
}
vo id draw() {
if (drag)
{
flo at r = dist(p m o useX, p m o useY, m o useX, m o useY) + 5;
ellip se(m o useX, m o useY, r, r);
}
}
vo id m o useD ragged() {
drag = true;
}
vo id m o useReleased() {
drag = false;
}
vo id keyPressed() {
endReco rd();
exit();
}

La ligne suivante :
flo at r = dist(p m o useX, p m o useY, m o useX, m o useY) + 5;

... permet de calculer la vitesse de la souris grce la mthode dist

et aux variables p m o useX , p m o useY et m o useX et m o useY. Nous ajoutons 5
pour ne pas avoir des cercles de rayon 0 sur l'cran (ce qui
reviendrait avoir des cercles invisibles).

138

La variable drag sert savoir si l'utilisateur est en train de dplacer la

souris en maintenant le clic appuy, ce qui active l'aide de draw()
l'action de dessiner des cercles sous le pointeur de la souris.

Un gnrateur de livres
Au lieu de gnrer un document d'une seule page, nous allons
prsent raliser un livre de plusieurs pages. Nous allons crer
dynamiquement
un
folioscope
(http://fr.wikipedia.org/wiki/Folioscope)
dont chaque page
reprsentera une image de l'animation un instant donn. C'est la
mthode nextPage() qui va crer une page vierge chaque fois que
cette instruction sera appele durant l'enregistrement.

im p o rt p ro cessing.p df.*;
PG rap hicsPD F p df;
flo at x = 0;
flo at y = 75;
vo id setup () {
size(400, 150);
sm o o th();
p df = (PG rap hicsPD F) beginReco rd(PD F, "B ulle.p df");
}
vo id draw() {
backgro und(255);
fill(0);
ellip se(x, y, 30, 30);
x = x + rando m (5);
y = y + rando m (-5, 5);
if (x - 30 > width) {
endReco rd();
exit();
}
p df.nextPage();
}

139

Nous avons introduit la variable p df pour stocker une rfrence au

document que nous gnrons. Lorsque nous avons ni de dessiner
une image dans draw() , nous passons l'image suivante par la
commande p df.nextPage() . Le programme est conu pour s'arrter
lorsque la bulle sort de l'cran. Aprs l'excution du programme, le
chier sauvegard du folioscope se trouve dans le dossier du sketch
et porte le nom B ulle.p df . En l'ouvrant, vous pourrez constater qu'il
comporte 164 pages, chacune d'entre elles prsentant notre balle
en un instant donn de son mouvement dans l'espace de dessin.

Pixel versus vectoriel

Lorsque nous dessinons sur l'cran, un rectangle par exemple, nous
remplissons les pixels d'une zone de l'cran avec une couleur
particulire. Lorsque nous sauvegardons cette image dans un chier,
la premire mthode consiste utiliser des formats d'image
particuliers (JPEG , G IF , TIFF par exemple) qui enregistrent
individuellement chaque pixel qui compose l'illustration. Avec ce
type de format, si nous voulons agrandir l'image, l'ordinateur sera
dans l'impossibilit de crer des pixels intermdiaires et d'ajouter du
dtail, car il ne possde aucune information dans le chier lui
permettant d'extrapoler les modications lies cet
agrandissement de formes.
En enregistrant la mme image au format vectoriel, Processing ne
va plus sauver chaque pixel un un, mais plutt les caractristiques
de chaque forme dessine : sa forme, sa position et sa couleur. Ainsi,
lorsque nous agrandissons l'image, l'ordinateur est capable de
dessiner avec prcision les dtails d'une image qu'il n'aurait pas t
possible de produire avec une image pixelise. Le pdf est un format
de sauvegarde vectoriel.

Importer les fonctionnalits PDF

Dans les exemples prcdents, nous avons employ im p o rt
p ro cessing.p df.* qui permet d'importer la librairie relative la cration
de document PDF. Une librairie est un ensemble de fonctionnalits
qui tend les possibilits de Processing et chaque fois que nous
aurons utiliser l'export PDF dans notre sketch, nous utiliserons
cette commande d'importation.

Si jamais vous essayez d'utiliser les mthodes relatives l'export

PDF sans avoir import la librairie, vous allez rencontrer des erreurs
qui s'acheront dans la console et le programme ne pourra
dmarrer. Au lieu de taper cette ligne de code, vous pouvez l'ajouter
automatiquement en cliquant dans le menu Sketch > Import
Library... > PDF Export.

140

La vido
Processing vous ore la possibilit d'exporter votre sketch anim ou
interactif sous forme d'animation vido au format QuickT ime. Pour
crer des vidos, nous allons utiliser un objet prdni M o vieM aker de
la librairie o rg.p ro cessing.video . Attention, pour les utilisateurs sous
Linux, cette fonction n'est ce jour pas disponible.

L'objet MovieMaker
L'objet M o vieM aker est une classe prdnie de Processing qui permet
de crer un chier vido, et de lui ajouter des images au fur et
mesure de l'excution de votre programme. Pour pouvoir l'utiliser
dans votre sketch, il faut importer la librairie vido de Processing :

Il faut ensuite dclarer une variable en en-tte de notre programme

qui stockera notre objet vido. Dans le setup () du sketch, il faut crer
l'objet en lui donnant un certain nombre de paramtres :
Une rfrence au sketch
La largeur de la vido
La hauteur de la vido
Le nom du fichier de sortie
im p o rt p ro cessing.video .*;
M o vieM aker m m ; //D claratio n de la variable qui recevra no tre o bjet
vo id setup () {
size(size(300,300);
/*
* Cratio n de l'o bjet M o vieM aker. La vido aura
* la m m e taille que no tre esquisse
*/
m m = new M o vieM aker(this, width, height, "Esquisse.m o v");
}

141

Ajouter des images

A chaque appel de la mthode draw() de Processing, il faut indiquer
l'objet M o vieM aker qu'il doit enregistrer l'image actuellement l'cran
dans le fichier vido.
vo id draw() {
ellip se(m o useX,m o useY,20,20); //O n dessine une ellip se
m m .addFram e(); //O n ajo ute une im age la vido
}

Finaliser la vido
A ce stade, l'enregistrement de la vido se termine lorsque l'on
quitte le programme. On peut indiquer l'objet M o vieM aker d'arrter
l'enregistrement tout moment. Dans notre exemple, nous allons
ajouter une action qui stoppe l'enregistrement vido lorsqu'on
appuie sur n'importe quelle touche du clavier de votre ordinateur.
vo id keyPressed() {
m m .finish();
}

Personnaliser l'enregistrement
Par dfaut, l'objet M o vieM aker enregistre une vido non compresse
15 images par seconde. Pour des applications interactives
ncessitant un temps de raction trs rapide de l'ordinateur, cette
qualit d'enregistrement peut s'avrer trop lourde. A l'inverse, pour
d'autres types de cration, on peut avoir besoin de produire des
vidos encore plus uides (comportant davantage d'images par
seconde). Avec l'objet M o vieM aker , il est possible de personnaliser les
caractristiques de l'enregistrement en prcisant notamment un
format particulier ainsi que le nombre d'images par seconde.
Les paramtres sont les suivants :
Une rfrence au sketch
La largeur de la vido
La hauteur de la vido
Le nom du fichier de sortie
Nombre d'images par seconde
Codec de compression
Qualit
m m = new M o vieM aker(this, width, height, "sketch.m o v", 30,
M o vieM aker.H263, M o vieM aker.HIG H);

(Pour des raisons de lisibilit, le code de la ligne prcdente a t rparti

sur deux lignes. Si vous devez le copier pour le rutiliser dans un sketch,
supprimer le retour chariot pour placer l'ensemble des instructions sur
une seule ligne).
Avec ces paramtres, l'enregistrement de la vido est beaucoup plus
fluide.
Voici quelques autres codecs vido intressants :

142

M o vieM aker.H264 : Lent encoder et dcoder. Occupe par

contre trs peu d'espace-disque sur votre ordinateur.
M o vieM aker.M O TIO N _JPEG _B : Trs rapide encoder et dcoder.
Occupe galement peu d'espace-disque.
M o vieM aker.AN IM ATIO N : Supporte le canal alpha permettant
la gestion de la transparence, trs utile pour certaines
images. Occupe normment d'espace-disque, la vido
tant compresse sans perte.

143

INTERAGIR

144

Les vnements clavier

Capter les actions de l'utilisateur sur le clavier de votre ordinateur
(les vnements clavier) et s'en servir pour faire ragir votre
programme constitue une premire forme d'interactivit. Nous
allons dcouvrir dans ce chapitre comment rcuprer les
informations lies au clavier en fabriquant une machine crire trs
simple qui nous permettra d'imprimer du texte sur l'cran.

Actions
La valeur de la dernire touche appuye est stocke dans la variable

propose par dfaut dans Processing. Cette variable ne peut

stocker qu'un seul caractre la fois, symbolis par l'criture
key

, 'b' , 'c' , ... Attention, key est sensible la casse, c'est--dire qu'il
fait une diffrence entre les minuscules et majuscules.
'a'

Dans l'exemple suivant, nous allons acher dans la fentre de

visualisation le caractre correspondant la touche qui aura t
appuye sur le clavier de votre ordinateur. Pour ce faire, nous
employons la mthode text() .

vo id draw() {
backgro und(204);
fill(0);
textSize(70);
text(key,30,70);
}

Par ailleurs, nous pouvons capter dans notre programme le

moment o l'utilisateur a appuy ou relch une touche du clavier,
par le biais des mthodes keyPressed() et keyReleased() . Ces deux
mthodes vont tre automatiquement appeles par Processing au
moment o l'tat d'une touche change.
Dans l'exemple suivant, keyPressed() et keyReleased() changent la valeur
de la variable y , utilise pour positionner le caractre l'cran selon
que la touche est appuye ou relche.

145

int y = 0;
vo id setup () {
size(130,200);
textSize(80);
stro ke(0);
fill(0);
}
vo id draw() {
backgro und(204);
line(10,100,120,100);
text(key,35,y);
}
vo id keyPressed(){
y = 180;
}
vo id keyReleased(){
y = 80;
}

Touches spciales
Les touches spciales comme les ches (U P , D O WN , LEFT, RIG HT) ou ALT,
CO N TRO L , SHIFT sont quant elles stockes dans la variable keyCo de . Le
test if (key == CO D ED ) permet de vrier si la touche appuye est une
touche spciale ou non. Dans un programme, il faudra distinguer les
deux cas en fonction du type de touche appuye que l'on veut tester.
Dans l'exemple suivant, nous allons crer une machine crire un
peu particulire, puisqu'il sera possible de dplacer le texte grce aux
flches.
A chaque fois qu'une touche sera appuye, elle sera stocke dans
une chane de caractre, pour pouvoir tre ache dans le draw()
l'aide de la mthode text() .

146

String s = "";
int x = 50;
int y = 50;
vo id setup () {
size(200,200);
}
vo id draw() {
backgro und(255);
fill(0);
text(s, x, y);
}
vo id keyPressed() {
if (key == CO D ED ){
if (keyCo de == LEFT)

if (keyCo de == RIG HT)

x = x + 1;

= x - 1;

if (keyCo de == U P)

y = y - 1;

if (keyCo de == D O WN )

y = y + 1;

}
else {
s = s + key;
}
}

Notons l'omission des accolades aprs chaque if . Cette syntaxe est

possible si le if ne s'applique qu' une seule instruction. Nous
utilisons par ailleurs une variable de type String dnomm dans cet
exemple "s" dont la fonction est de stocker une suite de caractres,
comme des phrases, par exemple.

Vrification spcifique de l'appui d'une touche

Processing nous permet galement de faire appel la variable
keyPressed et de la dnir. Attention
! Bien que la syntaxe soit
identique, elle n'est pas confondre avec la mthode keyPressed()
aborde au dbut de ce chapitre. Cette variable va nous informer en
permanence si une touche est appuye ou non et pourra tre
utilise dans la mthode draw() notamment.
Dans l'exemple suivant, nous allons dessiner un cercle si la touche
appuye est 'c' , un carr si la touche appuye est 'r' .

147

vo id draw()
{
rectM o de(CEN TER);
backgro und(128);
if (keyPressed == true)
{
if (key == 'c') {
ellip se(50,50,90,90);
}
else if (key == 'r') {
rect(50,50,90,90);
}
}
}

148

Les vnements souris

Dans ce chapitre, nous allons voir comment interagir avec la souris,
en rcuprant des informations comme sa position ou bien les
actions de clics. Pour illustrer ces fonctionnalits, nous allons crer
un petit logiciel de dessin, base de cercles, en introduisant mme
du mouvement alatoire !

Position de la souris
Les coordonnes de la souris dans la fentre sont accessibles par les
deux variables m o useX
et m o useY, disponibles par dfaut dans
Processing. Elles permettent de connatre la position de la souris
par rapport notre fentre de dessin, en prenant pour origine le
coin gauche suprieur de la fentre. Dans l'exemple suivant, nous
allons crer un programme qui va dessiner un cercle partir de la
position de la souris.

vo id setup () {
size(200,200);
sm o o th();
}
vo id draw() {
ellip se(m o useX,m o useY,15,15);
}

A prsent, nous allons modier trs lgrement l'exemple

prcdent en changeant dynamiquement le rayon du cercle. Celui-ci
est choisi au hasard grce la mthode rando m () , qui gnre un
nombre alatoirement au sein d'une plage de valeur. A chaque fois
que Processing va excuter draw() , la variable r sera remplie avec un
nombre au hasard compris entre 3 et 30 : 12 , 25 , 23 , 11 , 22 , 4 , 10 , 11 , 25 ...
Le changement de valeur du rayon va provoquer le tremblotement
du cercle autour du curseur de la souris.

149

vo id setup () {
size(300,300);
sm o o th();
}
vo id draw() {
flo at r = r a n d o m ( 3 , 3 0 ) ;
ellip se(m o useX,m o useY,r ,r );
}

Ds que la souris sort de la fentre, la position de la souris n'est plus

relaye notre programme. Les cercles se dessinent et
s'accumulent la dernire position capte par notre sketch.

Clics de souris
Nous pouvons intercepter les clics de souris grce aux mthodes
m o usePressed() et m o useReleased() .
Ces deux mthodes permettent de savoir si l'utilisateur a appuy ou
relch un des boutons de la souris. Reprenons l'exemple prcdent
en changeant la couleur de remplissage de notre cercle lorsque
l'utilisateur appuie sur un des boutons de la souris. Nous allons
choisir un niveau de gris pris au hasard au moment du clic que nous
appliquerons au cercle l'aide de la commande fill() .

150

flo at to n_de_gris = 255;

vo id setup () {
size(300, 300);
sm o o th();
}
vo id draw() {
flo at r = rando m (10, 80);
fill(grey);
ellip se(m o useX, m o useY, r, r);
}
vo id m o usePressed() {
grey = rando m (255);
}

Processing nous permet d'identier quel bouton de la souris a t

appuy. Pour cela, nous pouvons utiliser la variable m o useB utto n qui va
contenir soit LEFT, RIG HT ou CEN TER correspondant au bouton droit,
gauche et central (si la souris dispose de tous ces boutons). Utilisons
cette variable dans un exemple pour dessiner un cercle qui change
de couleur en fonction du type de bouton press.

vo id setup () {
size(200,200);
sm o o th();
}
vo id draw() {
backgro und(255);

151

ellip se(100,100,200,200);
}
vo id m o usePressed() {
if (m o useB utto n == LEFT)

fill(0);

if (m o useB utto n == RIG HT)

fill(255);

if (m o useB utto n == CEN TER) fill(128);

}

Autres vnements
Processing permet de capter deux autres vnements souris,
notamment lorsqu'elle est en mouvement au-dessus de la fentre.
va permettre de dtecter le mouvement de la souris
lorsque celle-ci se dplace au dessus de la fentre de dessin. Si le
pointeur de souris sort de la zone de la fentre ou s'il ne bouge plus,
alors la mthode n'est plus appele.
m o useM o ved()

est appele lorsque l'utilisateur a cliqu sur un bouton

tout en bougeant la souris au dessus de la fentre. Cette instruction
permet notamment de grer le glisser-dposer, par exemple.
m o useD ragged() continue d'tre actif mme si la souris sort de la
fentre.
m o useD ragged()

Dans l'exemple suivant, nous allons utiliser ces mthodes. Lorsque

m o useM o ved() est appel suite l'action de l'utilisateur, on change la
couleur de remplissage du cercle et quand c'est m o useD ragged() qui
l'est, on ajuste sa taille.

int r = 100;
int c = 100;
vo id setup () {
size(255, 255);
sm o o th();
}
vo id draw() {
backgro und(255);
fill(c);
ellip se(width/2, height/2, r, r);

152

}
vo id m o useM o ved() {
c = m o useY;
}
vo id m o useD ragged() {
r = m o useX;
}

Curseur
Parfois il est bien pratique de cacher le curseur de la souris, par
exemple dans le cas d'une installation artistique o le pointeur
pourrait venir malencontreusement parasiter l'achage de votre
animation. Dans Processing, il existe fort heureusement une
instruction pour masquer le pointeur :
no Curso r();

Il est galement possible de modier la forme du curseur pour

signaler certains vnements l'utilisateur, par exemple changer la
forme du curseur au survol d'un lment. Il sut pour cela d'utiliser
curso r() avec comme paramtre une des valeurs suivantes : ARRO W ,
CRO SS , HAN D , M O VE , TEXT, WAIT. L'exemple ci-aprs ache une forme
dirente de curseur (une che, une croix, une main, un sablier)
selon la zone de dessin survole par la souris.

vo id setup () {
fill(255);
rect(10, 10, 20, 80);
fill(175);
rect(40, 10, 20, 80);
fill(100);
rect(70, 10, 20, 80);
}
vo id draw() {
// N o us vrifio ns si o n survo le un des 3 rectangles
// et m o difio ns le curseur en co nsquence
if (m o useX > 10 & & m o useX < 30 & & m o useY > 10 & & m o useY < 90) {
c u r s o r ( H A N D ) ; // Affiche une m ain
}
else
if (m o useX > 40 & & m o useX < 60 & & m o useY > 10 & & m o useY < 90) {
c u r s o r ( A R R O W ) ; // Affiche une flche
}
else
if (m o useX > 70 & & m o useX < 90 & & m o useY > 10 & & m o useY < 90) {
c u r s o r ( W A I T) ; // Affiche un sablier
}
else {
c u r s o r ( C R O S S ) ; // Affiche une cro ix si o n ne survo le rien
}

153

154

L'entre Microphone
Si votre sketch peut tre programm pour tre sensible l'appui
d'une touche du clavier ou au clic de la souris, ce n'est pas la seule
forme d'interactivit oerte par Processing. Vous pouvez galement
donner votre programme le sens de l'oue en vous servant d'un
microphone comme oreille et en faisant correspondre des actions
du sketch certains paramtres du son capt.
Nous allons tout d'abord rappeler certaines notions abordes dans
le chapitre consacr la lecture du son pour ensuite nous
concentrer plus spciquement sur l'ajout d'une source sonore
l'aide d'un microphone.

Minim
Il a t dcid un moment donn d'intgrer dans toute distribution
Processing la bibliothque audio Minim pour pouvoir jouer au moins
des chiers audio ou capter le son entrant par le microphone. A
priori cette bibliothque (galement appel librairie en jargon
informatique) est dj installe sur votre ordinateur. Pour vrier sa
prsence et l'intgrer dans votre programme, il sut d'aller dans le
menu Sketch > Import Library... > Minim audio.

Selon votre plate-forme et votre version, la suite de cette action,

Processing ajoutera des lignes de code plus ou moins nombreuses
en haut de votre programme. Par dfaut, il faut au moins voir
affiche l'instruction suivante :

im p o rt ddf.m inim .*;

155

C'est cette instruction (que vous pouvez saisir la main si vous le

voulez) qui importera l'ensemble des fonctionnalits de la
bibliothque Minim pour les rendre accessibles notre programme.
C'est partir de cette instruction im p o rt ddf.m inim .*; que notre sketch
va pouvoir jouer du son.

Configurer minim
Le lancement de notre sketch l'aide du bouton Run ne sut pas
pour jouer un son. Au pralable, il faut prvoir d'activer les
fonctionnalits de gestion audio de Minim (son moteur audio en
jargon informatique). Pour jouer un son, Minim doit en eet
auparavant demander un accs la carte son de votre ordinateur.
Ne vous inquitez pas, Minim s'occupe de toute cette cuisine interne
pour vous, il sut de lui dire de s'activer pour cela. Le fait d'avoir
activ Minim suppose de prvoir de le dsactiver la n de notre
programme.
Si vous ne comprenez pas tout ce que nous venons de dire, ce n'est
pas trop grave. Sachez simplement qu'il faut saisir le code suivant au
dbut de chaque programme utilisant M inim :
im p o rt ddf.m inim .*;
M inim m inim ;
vo id setup () {
m inim = new M inim (this);
}

Et qu'il faut galement crire la n du programme les instructions

suivantes :
vo id sto p () {
m inim .sto p ();
sup er.sto p ();
}

Ajouter une source sonore

Pour exploiter l'entre microphone, nous devons crer un objet
source sonore qui permettra d'accder au son capt par le
microphone.
im p o rt ddf.m inim .*;
M inim m inim ;
Audio Inp ut in;
vo id setup () {
m inim = new M inim (this);
in = m inim .getLineIn(M inim .STEREO , 512);
}

Il faut galement prvoir d'arrter la capture du son ainsi que la

librairie Minim la n de l'excution du programme. A cet eet,
nous employons la mthode sto p ();
vo id sto p () {
in.clo se();
m inim .sto p ();

156

sup er.sto p ();

}

Visualiser le niveau sonore

L'objectif prsent est de faire varier la couleur du fond de la fentre
de l'espace de dessin en fonction des sons capts par le micro. Plus
le son sera fort, plus le fond sera blanc. Nous allons utiliser l'objet
source audio (in ). qui comporte trois sous objets : left , right et m ix .
Dans le cas d'un microphone stro, ces trois lments
reprsentent le canal gauche, droit et la moyenne des deux. A partir
de ces canaux, il est possible de connatre le niveau sonore du son
capt l'aide de la mthode level() qui retourne au programme cette
information sous la forme d'une valeur chiffre.
vo id draw() {
backgro und(in.m ix.level()*2550);
}

Une capture d'cran de l'espace de dessin avec un niveau sonore

moyen :

Un petit jeu
Nous allons prsent crer un jeu trs simple qui va exploiter
davantage les possibilits d'interaction avec un microphone. Le jeu
sera compos d'une balle partant de la gauche de l'cran et qui subit
une force d'attraction lente, mais permanente vers cette partie de
l'espace de dessin. En faisant du bruit, l'utilisateur va la pousser vers
la droite, son but tant de passer la ligne d'arrive.
Pour commencer, nous allons changer la taille de notre fentre de
visualisation de l'espace de dessin, activer le lissage du trac et
dnir le contour des formes en lui appliquant la couleur blanche. Le
code concern est signal en gras.
vo id setup () {
s iz e ( 6 0 0 , 1 0 0 ) ;
sm o o th();
stro ke(255);
m inim = new M inim (this);
in

= m inim .getLineIn(M inim .STEREO , 512);

Nous allons ensuite crer une variable qui stockera la position de la

balle. Elle sera dclare en en-tte du programme pour tre
disponible dans l'ensemble du sketch. Nous lui assignons la valeur 0.
f lo a t b a llX = 0 ;
vo id setup () {
...

157

Dans la mthode draw() , nous allons dnir un fond noir et dessiner

une balle qui ragit en fonction du niveau du son. A chaque appel de
la mthode draw() nous ajoutons le niveau sonore du microphone
la coordonne x de la balle. Elle va se mettre en mouvement au fur
et mesure que nous faisons du bruit.
vo id draw() {
backgro und(0);
ballX = ballX + in.m ix.level()*20;
ellip se(25 + ballX, height - 25, 50, 50);
}

Pour viter que la balle ne sorte de l'cran, nous allons ajouter deux
conditions qui vont corriger sa position si la variable ballX est plus
petite que 0 ou plus grande que la largeur du sketch.
vo id draw() {
backgro und(0);
ballX = ballX + in.m ix.level()*20;
if ( b a llX < 0 ) {
b a llX = 0 ;
}
if ( b a llX > w id t h - 2 5 ) {
b a llX = w id t h - 2 5 ;
}
ellip se(25+ballX, height-25, 50, 50);
}

Nous allons ajouter une ligne d'arrive ainsi qu'une condition qui
spcifie que si la balle l'a franchi, elle change de couleur.
vo id draw() {
backgro und(0);
ballX = ballX + in.m ix.level()*20;
if (ballX < 0) {
ballX = 0;
}
if (ballX > width-25) {
ballX = width-25;
}
if ( b a llX > 5 0 0 ) {
f ill( 2 5 5 , 0 , 0 ) ;
} e ls e {
f ill( 2 5 5 ) ;
}

158

lin e ( 5 0 0 , 0 , 5 0 0 , 1 0 0 ) ;
ellip se(25+ballX, height-25, 50, 50);
}

An de compliquer le jeu, nous allons ajouter un comportement la

balle qui la fait revenir en arrire en permanence. A chaque appel de
la fonction draw() nous allons diminuer lgrement sa position sur
l'axe x.
vo id draw() {
backgro und(0);
b a llX = b a llX - 0 . 5 ;
ballX = ballX + in.m ix.level()*20;
if (ballX < 0) {
ballX = 0;
}
if (ballX > width - 25) {
ballX = width - 25;
}
if (ballX > 500) {
fill(255, 0, 0);
} else {
fill(255);
}
line(500, 0, 500, 100);
ellip se(25 + ballX, height - 25, 50, 50);
}

A prsent, il ne vous reste plus qu' faire appel votre imagination

pour utiliser du son dans vos projets et en exploiter les nombreuses
possibilits : analyse des frquences d'un son, cration d'eets
sonores sur mesure l'aide de fonctionnalits de synthse audio,
etc.

159

L'entre vido
Processing permet de capturer les images provenant d'une camra
vido connecte votre ordinateur par un cble ou distance via le
Wi ou mme Internet. Ces images peuvent ensuite tre aches
dans la fentre de visualisation de votre sketch et le cas chant,
modies en fonction de vos besoins. Les applications cratives de
l'entre vido sont multiples.

Les types de camras supportes

Les camras les plus simples utiliser sont les camras USB,
souvent appeles camras Web. Il est galement possible
d'employer des camras que l'on branche sur un port IEEE1394
(Firewire) comme les camras DC1394 et les camras DV.
Pour exploiter l'entre vido, vous pouvez utilisez la librairie video de
Processing qui fait appel la librairie QuickT ime, de la compagnie
Apple Computer. Toutes les camras supportes par QuickT ime
devraient donc fonctionner sans aucune dicult. Apple fournit
cette librairie uniquement pour les systmes d'exploitation Mac OS X
et Microsoft Windows. Sur GNU/Linux, il est prfrable d'utiliser la
librairie GSVideo. Celle-ci fait usage de l'excellente GStreamer.

Capturer des images avec la librairie vido

Sous rserve que vous soyez sur Mac OS X ou Windows, voyons
prsent comment utiliser la librairie video . Tout d'abord il faut
importer la librairie vido en cliquant dans le menu: Sketch > Import
Library >... > Video. Une ligne de code s'achera au dbut de votre
programme :
im p o rt p ro cessing.video .*;

Ensuite nous allons dclarer une variable qui stockera notre objet
Cam era . Dans la mthode setup () , il faut prciser laquelle des camras
prsentes sera utilise. Notez que vous devez dj avoir connect et
installer cette camra vido sur votre ordinateur pour faire
fonctionner cet extrait de code. Si le code gnre une erreur au
moment de crer la camra, essayez d'autres numros de devices[].
Cap ture cam era;
vo id setup () {
size(640, 480);
backgro und(0);
String[] devices = Cap ture.list();
p rintln(devices);
cam era = new Cap ture(this, 320, 240, devices[0]);
}

160

L'tape suivante consiste prciser, dans la mthode draw() , que

nous achons la dernire image obtenue par la camra en vriant
qu'une nouvelle est bien disponible. En eet, les images sont reues
de la camra vido une certaine frquence, par exemple 30 fois par
seconde, ce qui ne correspond pas forcment celle de notre
sketch. Dans l'exemple ci-aprs, nous avons demand notre
programme d'appliquer sur l'image capte un ltre de solarisation
(inversion des valeurs d'ombre et de lumire de l'image).
vo id draw() {
if (cam era.available()) {
cam era.read();
cam era.filter(IN VERT);
im age(cam era, 160, 100);
}
}

La variable de type Cap ture peut tre utilise de la mme manire

qu'une variable de type PIm age : il est possible de lire les pixels de
l'image, la transformer, l'acher plusieurs fois l'cran, et bien
d'autres choses encore.

Le programme complet de notre exemple :

im p o rt p ro cessing.video .*;
Cap ture cam era;
vo id setup () {
size(640, 480);
backgro und(0);
String[] devices = Cap ture.list();
p rintln(devices);
cam era = new Cap ture(this, 320, 240, devices[0]);
}

161

vo id draw() {
if (cam era.available()) {
cam era.read();
cam era.filter(IN VERT);
im age(cam era, 160, 100);
}
}

162

ANNEXES

163

Les astuces
Pour vous viter certaines erreurs de base et aller plus loin dans
l'utilisation de Processing, ce chapitre prsente plusieurs astuces et
morceaux de code qui permettent de rsoudre une srie de
problmes frquemment rencontrs. N'hsitez pas les utiliser
dans vos programmes.

Augmenter la mmoire
Si vous crez des sketchs qui utilisent de la vido, de nombreuses
images ou qui travaillent avec des donnes volumineuses, il peut
arriver que votre programme gnre une erreur pour cause de
mmoire insusante. Voici l'erreur ache par Processing dans la
console.

Pour rsoudre ce problme, vous devez ouvrir les prfrences de

Processing et changer la quantit de mmoire alloue votre
sketch.

Inverser la valeur d'un boolen (vrai/faux)

Voici un mcanisme permettant d'inverser la valeur d'un boolen
sans avoir tester l'aide de la condition if/ then si sa valeur est
vraie ou fausse . Cette astuce repose sur le fait qu'en prcdant la
valeur boolenne d'un point d'exclamation, on obtient son contraire.
bo o lean afficheInfo ;
vo id setup () {
afficheInfo = false;
}
vo id draw() {
backgro und(0);
// Si vrai, o n affiche le texte
if (afficheInfo ) text("Info ", 10, 20);
}
vo id keyPressed() {
// o n affecte afficheInfo l'inverse de sa valeur actuelle
afficheInfo = ! afficheInfo ;
}

164

Intervalomtre avec frameRate(), frameCount et

modulo
Si l'on souhaite eectuer une action intervalle rgulier, le procd
le plus simple consiste utiliser les mthodes de comptage
d'images de Processing : fram eRate() , fram eCo unt ainsi que la commande
% (modulo). Notez que cette astuce ne permet de grer qu'un seul
intervalle de temps par programme. Dtaillons chacune des ces
fonctions :
la variable fram eCo unt permet de connatre le nombre de
fois o draw() a t appel depuis le lancement du
programme.
fram eRate() xe la frquence des appels draw() par
seconde (par dfaut 30).
l'oprateur % (modulo) retourne le reste de la division de
deux nombres, ce reste tant strictement infrieur au
nombre diviseur (c'est une rgle mathmatique!). Ainsi 7% 3
retourne 1 ou encore 8 % 2 retourne 0 . L'oprateur modulo
permet de compter sans jamais dpasser un certain
nombre (la base du modulo).
Ainsi, si l'on veut eectuer une action toutes les secondes, on la
dclenchera dans le cas o le reste de la division de frameCount par
la valeur passe fram eRate() est bien gal zro. Dans l'exemple qui
suit, nous changeons la couleur de fond chaque seconde en
vrifiant que notre compteur est un multiple de 24.
co lo r co uleur;
vo id setup () {
co uleur = 0;
fram eRate(24);
}
vo id draw() {
backgro und(co uleur);
if (fram eCo unt % 24 == 0) {
co uleur = (int) rando m (255);
}
}

Exercice : modiez le code ci-dessus pour que le changement de

couleur ait lieu toutes les 3 secondes.

165

Crer une classe intervalomtre

Dans l'astuce prcdente, nous avons vu comment crer un
intervalomtre simple, trs utile pour excuter une action
intervalle rgulier, mais qui comporte certaines limitations. A
prsent, nous allons apprendre programmer un intervalomtre
grant plusieurs intervalles de temps au sein d'un mme sketch, et
ce, avec prcision (sans variation de vitesse lorsque votre ordinateur
est occup excuter simultanment de nombreuses tches). A titre
d'illustration, nous allons crer un objet Intervalo m etre charg
d'excuter un bloc de code un intervalle rgulier. Le systme de
comptage fonctionne sur le principe suivant : mmoriser le moment
auquel l'objet a t excut pour la dernire fois et chaque appel
de la mthode draw() de vrier si le temps actuel est plus grand que
ce moment de temps antrieur auquel on a ajout un intervalle
donn. Nous allons nous aider de la mthode m illis() qui retourne le
nombre de millisecondes depuis le lancement du programme.
Notre classe sera compose de deux caractristiques et d'une
action :
L'intervalle de temps (un intervalle que vous aurez
dtermin votre convenance)
Le temps de la dernire vrification de l'intervalomtre
Une action qui vrie si le prochain intervalle a t
franchi.
class Intervalo m etre {
int intervalle;
int dernier_tic;
Intervalo m etre(int intervalle_initial) {
intervalle = intervalle_initial;
dernier_tic = m illis();
}
bo o lean verifierIntervalle() {
if (m illis() > dernier_tic + intervalle) {
dernier_tic = m illis();
return true;
} else {
return false;
}
}
}

Ici, la mthode verifierIntervalle() vrie si l'intervalle de temps est

coul depuis la dernire fois. Elle retourne vrai ou faux. En d'autres
termes, cela revient dcider d'excuter une certaine action
chaque fois que notre horloge fait tic.
La dernire tape de programmation de notre sketch va consister
dclarer une variable qui stockera notre intervalomtre. Chaque
appel de la mthode draw() excutera verifierIntervalle() de notre
objet Intervalo m etre . Si cette mthode nous retourne vrai, nous allons
faire apparatre un rectangle positionn au hasard sur l'cran.
L'intervalle de temps choisi dans cet exemple est de 100
millisecondes.
Intervalo m etre intervalo m etre;

166

vo id setup () {
intervalo m etre = new Intervalo m etre(100);
}
vo id draw() {
if (intervalo m etre.verifierIntervalle()) {
rect(rando m (0, width), rando m (0, height), 10, 10);
}
}

Suspendre la rptition de draw()

Tant que l'on n'a pas quitt le programme, et sauf indication
expresse de notre part, la fonction draw() est appele en boucle
durant toute l'excution du programme. Il existe cependant un
moyen d'interrompre ce cycle l'aide de la fonction noLoop(). La
fonction lo o p () a l'effet inverse.
L'exemple suivant montre comment interrompre et reprendre ce
mouvement l'aide de la touche 's' et de la barre d'espacement.
int p o sitio n = 0;
int increm ent = 1;
vo id setup () {
}
vo id draw() {
backgro und(0);
ellip se(50, p o sitio n, 5, 5);
// o n dp lace le p o int de 1 p ixel
p o sitio n += increm ent;
// si o n to uche les bo rds
if (p o sitio n > height || p o sitio n < 0) {
// alo rs o n inverse la valeur d'incrm ent
increm ent *= -1;
}
}
vo id keyPressed() {
if (key == ' ') {
// o n relance le cycle
lo o p ();
}
else if (key == 's' || key == 'S') {
// o n arrte le cycle
no Lo o p ();
}
}

Quitter le programme
Pour quitter un programme en utilisant du code plutt qu'une
intervention utilisateur, vous pouvez appeler la mthode exit() .
// Vo us p o uvez ajo uter ce co de l'exem p le p rcdent
else if (key == 'e' || key =='E') {
exit(); // o n quitte le p ro gram m e
}

167

Les erreurs courantes

Processing ache un certain nombre de messages d'erreur dans la
bande grise de la console (qui dans ce cas de gure change de
couleur en devenant rouge fonc). Voici une liste des erreurs les plus
courantes.

Unexpected token
Cette erreur se produit frquemment lorsque vous oubliez un ;
en n de ligne ou que vous n'avez pas correctement ferm un bloc
d'accolades. Le programme voit une instruction qui fait deux lignes
et dont la syntaxe est par consquent errone.
int no m breEntier

= 1

flo at no m breVirgule = 0.1;

Le code correct est :

in t n o m b r e E n t ie r

= 1;

flo at no m breVirgule = 0.1;

Cannot find anything named

Cette erreur se produit lorsque vous appelez une variable qui n'existe
pas. Vriez que vous avez bien dclar votre variable et que vous
avez respect la porte des variables.
int no m bre2 = no m bre1 + 5;

Le code correct est :

in t n o m b r e 1 = 1 0 ;
int no m bre2 = no m bre1 + 5;

Found one too many...

Cette erreur se produit lorsque vous n'avez pas correctement ferm
un bloc par une accolade.
vo id draw() {
}
vo id setup () {

Le code correct est :

vo id draw() {

168

}
v o id s e t u p ( ) {
}

ArithmeticException: / by zero
int diviseur = 0;
p rintln(1 / diviseur);

Dans Processing, on ne peut jamais diviser un nombre par zro. Au

besoin, vrier que le diviseur n'est pas zro avant de faire la division.
C'est la fonction du morceau de code suivant :
int diviseur = 0;
if (diviseur != 0) {
p rintln(1 / diviseur);
} else {
p rintln("O n ne p eut p as diviser p ar zro !");
}

Cannot convert ... to ...

Cette erreur survient quand vous essayez d'aecter une valeur qui ne
correspond pas au type d'une variable.
int a = 10;
flo at b = 10.5;
a = b;

Dans le cas prsent, pour que nous puissions aecter un nombre

virgule une variable qui est prvue pour stocker un nombre entier,
il faut forcer Processing la transformer. Le code correct est :
int a = 10;
flo at b = 10.5;
a = in t ( b ) ;

ArrayIndexOutOfBoundsException
Cette erreur survient lorsque vous tentez d'accder un lment en
dehors des limites d'un tableau. Dans l'exemple suivant, le tableau
une taille de 3 (case 0, 1 et 2) et nous essayons d'accder la case 4.
int[] no m bres = new int[3];
no m bres[0] = 1;
no m bres[1] = 20;
no m bres[2] = 5;
p rintln(no m bres[4]);

169

Le code correct est le suivant (la 3e case correspond au rang 2 et

non pas au rang 3 ou 4 puisqu'un tableau commence toujours
partir d'une case de rang 0) :
int[] num bers = new int[3];
num bers[0] = 1;
num bers[1] = 20;
num bers[2] = 5;
p r in t ln ( n u m b e r s [2 ]) ;

NullPointerException
Cette erreur se produit lorsque vous tentez d'accder un lment
qui n'existe pas en mmoire. Par exemple en essayant d'accder un
objet qui n'a pas encore t initialis.
B alle m aB alle;
vo id setup () {
m aB alle.x = 10;
}
class B alle {
int x;
int y;
}

Le code correct est :

B a lle m a B a lle = n e w B a lle ( ) ;
vo id setup () {
m aB alle.x = 10;
}
class B alle {
int x;
int y;
}

170

Les librairies externes

La vie est pleine de problmes intressants rsoudre. Quand on
crit un bout de code original qui propose de nouvelles
fonctionnalits ou une plus grande rapidit d'excution, on peut
vouloir le partager et en faire bncier d'autres personnes. Si on le
publie sous une licence libre, par exemple la Licence publique
gnrale de GNU (GPL), d'autres programmeurs pourront par la
suite amliorer ce code, plutt qu' chaque fois tre oblig de partir
de zro en rinventant la roue .
Une librairie, c'est une collection de classes que l'on peut rutiliser
dans chacun de nos projets. Mise disposition sur Internet, une
multitude de librairies intressantes existe pour Processing. Pour
pouvoir en utiliser une, il sut de la tlcharger de son site internet,
de dcompresser l'archive et de le placer dans le dossier libraries. Le
dossier libraires se trouve dans le dossier de travail de Processing
(menu Sketch puis Show Sketch Folder).
Par ailleurs, plusieurs librairies sont dj installes par dfaut dans
ce dossier lors de l'installation de Processing.
Dans tous les cas, pour les utiliser dans un de vos sketchs, choisir
son nom dans le menu Sketch > Library. Ces librairies sont libres :
les utilisateurs ont la libert d'excuter, de copier, de distribuer,
d'tudier, de modifier et d'amliorer leur code.

O trouver des librairies

La majorit des librairies ne sont pas installes par dfaut avec
Processing, mais doivent plutt tre tlcharges via le site web de
leur auteur. Cette pratique permet d'obtenir en tout temps la
version la plus jour d'une librairie et simplie grandement sa
distribution.
On peut, sur le site de Processing, accder un annuaire des
principales
librairies

l'adresse
suivante
:
http://processing.org/reference/libraries/.

Installer une librairie

Nous allons maintenant
tlchargeons de l'internet.

installer

une

librairie

que

nous

Nous utiliserons la librairie ShapeTween, car celle-ci est trs simple

utiliser. Elle fournit une varit de moyens d'animer des lments.
Ce genre d'outil est fort utile pour crer des animations fluides.
Pour dsigner des animations et des transitions, le mot tween est
souvent utilis. Ce mot vient de l'anglais in between et dsigne les
images que l'on dessine entre chacune des images-cls dans le
cinma d'animation traditionnel. Il s'agit donc d'interpolation de
mouvements. L'interpolation consiste dduire des positions
intermdiaires entre des points connus.

171

On peut trouver un lien vers la page du projet ShapeT ween partir

de la page Libraries sur le site de Processing l'adresse
http://www.leebyron.com/else/shapetween/. Sur cette page, vous
trouverez le lien intitul shapetween.zip :

Tlchargez l'archive et dcompressez le chier zip. Placez son

contenu dans le rpertoire libraries de votre rpertoire de sketch.
Vous pouvez ouvrir ce dossier en utilisant le menu Sketch > Show
sketch folder. Le dossier libraries se trouve dans le mme dossier que
vos sketchs. Vous devez y placer le rpertoire extrait de l'archive
tlcharge ayant le nom de la librairie. Si ce dossier libraries
n'existe pas dj, crez le tout simplement. Une fois ces oprations
effectues, quittez l'application Processing et lancez-la nouveau.

Essayer un exemple
Une bonne librairie fournit galement une documentation de
chacune des fonctionnalits et instructions oertes (classes,
mthodes et attributs). Elle comporte galement le plus souvent
des exemples. Si c'est le cas, il sut d'y accder en parcourant le
menu File > Sketchbook > Examples. Le nom de notre librairie
devrait s'y trouver. Notez que cette procdure fonctionne
uniquement sur Mac OS X et Windows. Sur GNU/Linux, les exemples
des librairies installes par nous-mmes ne s'achent pas dans ce
menu.

172

Si la librairie ne contient pas d'exemples, nous pouvons essayer d'en

trouver sur la Toile an de le copier-coller directement de la page
du site vers la fentre d'dition de Processing. Comme exercice, nous
allons copier-coller un exemple prsent sur le site internet de
ShapeT ween.
Sur le site Web de la librairie, on peut voir une liste d'exemples sous
la rubrique Example Code. Cliquez sur Basic Tween an de voir un
exemple trs simple de mouvement contrl l'aide de cette
librairie. Copiez le code propos sur la page et collez-le dans votre
fentre d'dition de Processing. Avec la librairie ShapeT ween, il est
galement possible de crer des mouvements qui acclrent, puis
dclrent, mais les autres exemples proposs sur le site de cette
librairie contiennent des erreurs au moment d'crire ces lignes (le
rpertoire consacr aux exemples comporte la mention en cours
de construction ).
Aprs avoir vri que l'exemple propos fonctionne, vous pouvez
modier l'exemple, le simplier et l'utiliser comme base pour des
dveloppements ultrieurs.

im p o rt m egam u.shap etween.*;

Tween ani;
vo id setup (){
size( 200, 200 );
ani = new Tween(this, 2, Tween.SECO N D S);
ani.start();
}
vo id draw(){
backgro und(200);
flo at x1 = 20;
flo at y1 = 30;
flo at x2 = 180;
flo at y2 = 190;
flo at x = lerp ( x1, x2, ani.p o sitio n() );
flo at y = lerp ( y1, y2, ani.p o sitio n() );
fill(0);
ellip se( x, y, 8, 8 );
}
vo id m o usePressed(){
ani.start();
}

173

Les librairies propritaires

Parfois on tlcharge une librairie et on constate que l'archive ne
contient pas de code source (des chiers Java). Puis parcourant le
site web, on voit soudain que celui-ci contient la mention Tous
droits rservs , sans plus d'explication. Dans ce cas, cela signie
que la librairie n'est pas libre : elle est propritaire. Vous pouvez
l'utiliser gratuitement, mais sans avoir accs son code ! Vous ne
pouvez pas la modifier, ni tudier son fonctionnement. Il se peut fort
bien qu'elle ne soit pas compatible avec la prochaine version de
Processing, et dans ce cas, vous ne serez pas en mesure de rgler ce
problme.
Si ces considrations sont importantes pour vous, soyez vigilants.
Vriez toujours que le code source est inclus avec une librairie, et
que son code comporte bien un en-tte avec la mention d'une
licence libre. Le site de la Free Software Foundation fournit une liste
de
licences
libres
compatibles
avec
la
GPL
http://www.gnu.org/licenses/license-list.fr.html.

174

La documentation en ligne
Le site web de Processing propose de nombreux contenus pour
dbuter : tutoriaux, exemples de programmes, etc. On y trouve
galement une page listant l'ensemble des instructions
informatiques (mthodes) utilises par ce logiciel : leur
fonctionnement y est dcrit prcisment et illustr par des
exemples. D'autres sources d'information trs utiles existent sur
Internet.

Les tutoriaux
La
section
"learning"
du
site
de
Processing
(http://www.processing.org/learning/) propose deux types de
contenus : un apprentissage du logiciel pas pas travers des
exemples basiques et une srie de codes plus complets qui illustrent
des cas pratiques.

Les codes de ces exemples sont, pour la plupart, fournis avec le

logiciel. On les retrouve via le menu File > Examples.

Les rfrences
La
section
"reference"
du
site
(http://www.processing.org/reference/) propose une liste complte
des mthodes disponibles sous Processing. Elles sont regroupes
par thme. Chacune d'elles est dcrite au moyen d'un visuel et d'un
texte prcisant notamment sa syntaxe et la liste de ses arguments.
Dans ces pages de rfrence, ce sont d'ailleurs les rubriques Syntax
e t Parameters qui sont les plus intressantes. Elles permettent de
savoir ce qu'il faut mettre dans les ( ) pour faire fonctionner la
mthode et sa syntaxe.
Vous pouvez aussi accder aux rfrences directement depuis
l'environnement de Processing. Pour ce faire, au niveau de la fentre
d'dition du logiciel, slectionnez une instruction dont vous
souhaitez connatre davantage la syntaxe et les fonctionnalits
(attention le mot recherch doit tre slectionn en entier) puis
cliquez dans le menu Help > Find in Reference. Vous pouvez
galement eectuer cette opration avec le raccourci clavier CT RL
+ MAJ + F (Windows & Linux) ou MAJ + CMD + F (Mac Os).

175

Le forum de processing.org
Le forum du site Processing (http://forum.processing.org/) constitue
une autre source d'aide et de contribution. De nombreuses
personnes l'utilisent pour exposer leurs problmes et obtenir des
rponses. On y trouve aussi de nombreux morceaux de code que
vous pourrez intgrer vos programmes.
Mentionnons
galement
le
site
OpenProcessing
(http://www.openprocessing.org) qui propose galement un espace
de partage de morceaux de code entre utilisateurs.

Les ressources francophones

En
plus
du prsent
manuel
consultable
en
ligne
(http://fr.flossmanuals.net),
il
existe
plusieurs
ressources
francophones sur la T oile. En voici une liste non exhaustive :
Consacr aux langages de programmation ddis la
cration d'images, de vido, de son et de musique, le forum
Codelab comporte une section consacre Processing :
http://codelab.fr
Articles d'introduction Processing de Jean-Nol
Lafargue
(Universit
Paris
8)
:
http://www.hyperbate.com/dernier/?page_id=2482
Cours en ligne de Douglas Edric Stanley (cole dArt dAixen-Provence) : http://www.ecole-art-aix.fr/rubrique81.html
Cours en ligne de Je Guess (cole nationale suprieure
dart de Paris-Cergy) : http://www.guess.fr/processingtutoriaux/fr/
Cours en ligne de Marc Wathieu (Ecole de Recherche
Graphique - ERG Bruxelles et Haute Ecole Albert Jacquard HEAJ

Namur)
:
http://www.multimedialab.be/cours/logiciels/processing.ht
m
Cours en ligne de Stphane Nol (Ecole de Recherche
Graphique - ERG et Ecole Suprieure des Arts - ESA
Bruxelles)
: http://arts-numeriques.codedrops.net/-CodeProcessing-?
PHPSESSID=a75396a479ef2ce4a6cb08f85c1602be
Cours en ligne de Jean-Paul Roy (Universit de Nice):
http://deptinfo.unice.fr/~roy/Java/L1/L1Java.html

176

Processing
l'enseignement

dans

Processing est un formidable environnement pour lenseignement.

Il est aujourdhui utilis par de nombreuses institutions, centres de
ressources, associations et donne lieu divers scnarii
pdagogiques : cours, formations, ateliers. Nous nous
concentrerons principalement sur lintrt de Processing dans les
cursus artistiques et cratifs, tels que lart, le design, le design
graphique ou larchitecture. Les contributions d'enseignants d'autres
domaines sont les bienvenues, le processus continu de co-rdaction
de ce manuel permettant l'ajout de nouveaux paragraphes.
Encore marginaux dans le paysage francophone au dbut de
laventure Processing, les initiatives autour de la cration
algorithmique se sont considrablement dveloppes ces dernires
annes dans les coles. Certains tablissements dont l'identit
repose sur un positionnement arm douverture au numrique
comme l'Ecole d'Art d'Aix en Provence, ou encore l'Ecole de
Recherche Graphique Bruxelles, proposent leurs tudiants des
programmes o les technologies et des outils tels que Processing
sont au coeur des apprentissages. Mais de plus en plus dcoles
dart et de lires gnralistes commencent intgrer ces pratiques
leurs cursus, alors que dans un premier temps priorit avait t
donne aux grands logiciels propritaires dans la mise en place de
lapprentissage des outils numriques de cration.

Apprendre programmer dans une cole dart ?

T out dabord, et pour le plus grand nombre des tudiants qui ne vont
pas forcment par la suite poursuivre dans ce champ de pratiques,
aborder la programmation avec Processing, cest approcher un
langage auquel ils nont gnralement pas accs, celui de la
machine.

Lenvers du dcor
Les outils numriques de cration sont devenus trs prsents sinon
majoritaires dans la pratique de nombre de cratifs aujourdhui, et il
en est de mme pour les tudiants. Les initier la programmation
avec pour objet la cration visuelle ou graphique, cest leur faire
apprhender concrtement la nature de limage numrique ainsi que
les transformations quelle subit lors de ses multiples traitements
par les algorithmes des ordinateurs. Les faire programmer, cest
leur montrer lenvers du dcor.
Par ailleurs, les grands logiciels propritaires sont massivement
utiliss et enseigns dans les coles, sans forcment susciter un
accompagnement critique ni une rexion sur ces derniers. Initier
les tudiants la programmation, cest aussi rendre possible un
questionnement sur leurs autres pratiques de cration numrique en
favorisant une mise en perspective.

177

Une alternative ouverte

Outil libre, Processing ore une alternative de choix aux grands
logiciels propritaires. Si l'on ne fait pas toujours les mmes choses
et qu'on ne les fait pas de la mme faon, il n'en demeure pas moins
important de donner aux tudiants la possibilit d'apprhender et de
pratiquer cet autre type d'outils.
Dun point de vue plus critique, apprendre programmer ses images
au lieu de les coproduire avec des logiciels sur lesquels on possde
trs peu de prise en terme de conguration, et au nal une maitrise
partielle, redonne aux cratifs dont la production s'exprime sous
forme numrique une grande part dintentionnalit, laquelle ils
avaient renonc sans toujours en avoir conscience en travaillant
avec les solutions logicielles dominantes.
Apprendre programmer dans une cole dart, cest en quelque
sorte reprendre le contrle de sa propre production numrique.
Dautre part, la nature libre de Processing dtermine aussi la vitalit
de sa communaut dutilisateurs, et des changes gnrs sur le
web autour de cette plateforme. Enseigner Processing, cest aussi
initier un tat desprit, un mode de fonctionnement ouvert,
collaboratif et favorisant lauto-apprentissage.

Un vaste champ de possibles

Apprendre programmer avec Processing ouvre un champ de
cration trs vaste, puisque lutilisateur nest pas limit aux
possibilits oertes par un logiciel, mais seulement par sa propre
capacit mettre en oeuvre ses ides dans lcriture dun logiciel.
Ce retournement de situation invite lexprimentation et la
recherche. Lutilisateur doit trouver les moyens, de mettre en ouvre
ses intentions.
Dans les coles dart, de design ou encore darchitecture qui
dispensent des cours de programmation crative, cest le
dveloppement de cette capacit inventer ses moyens qui est
enseigne par lapprentissage dun langage, de sa syntaxe, de son
vocabulaire, et de ses mthodologies spciques. Pour les tudiants
qui poursuivent plus loin dans ce champ, lapprentissage de la
programmation pourra leur permettre dinventer leurs propres
outils de cration graphique an qu'ils rpondent spciquement
leurs besoins et intentions.

Une plateforme souple et intuitive

La simplicit d'utilisation de Processing en fait un mdium idal pour
initier la programmation un public qui a priori n'y tait pas
prdestin. Conu ds le dpart pour favoriser une dmarche de
recherche et d'exprimentation par la pratique, voire l'expression
plastique (le terme sketch servant dsigner les programmes crs
dans Processing renvoie bien la notion d'esquisse), ce logiciel ore
un environnement adapt l'apprentissage et la capacit des
cratifs utiliser du code informatique.

178

Le langage de programmation utilis est relativement

comprhensible pour qui parle anglais et sa syntaxe relativement
aise apprendre, y compris pour un non-anglophone. D'autre part,
la prsence de nombreuses ressources sur le web et la dynamique
de la communaut des utilisateurs de Processing favorise une
attitude d'auto-apprentissage de la part de l'apprenant qui n'attend
pas tout de l'enseignant.

OpenProcessing, un site de ressources pdagogiques

Pour terminer, prsentons la plate-forme OpenProcessing
(http://www.openprocessing.org), trs bon exemple de la vitalit de
la communaut des utilisateurs de ce logiciel. Ce site permet de
crer des porte-folios pour publier en ligne ses sketchs, les discuter
avec d'autres utilisateurs, mais aussi de visualiser les rsultats, de les
tlcharger, ou de les inclure dans une page web.
Si nous citons cette ressource en ligne dans ce chapitre, c'est pour
sa rubrique intitule Classes o sont regroups des porte-folios
de projets raliss en classes ou en ateliers ainsi que des cours.
Cette initiative permet la fois de se rendre compte du nombre
croissant de contenus pdagogiques et de rsultats d'activits
d'apprentissage ddis Processing, mais encore et surtout de la
diversit des approches.

179

Arduino
Arduino est une plate-forme libre de cration d'objets lectroniques
des ns artistiques, ducatives ou de recherche via la conception
de prototypes. Elle repose sur l'utilisation d'un circuit lectronique
(un
mini-ordinateur,
appel
galement micro-contrleur)
comportant des entres et sorties (des ports) sur lesquelles on peut
brancher diffrents appareils :
ct entres, des capteurs, appareils qui collectent des
informations sur leur environnement comme la variation de
temprature via une sonde thermique, le mouvement via un
dtecteur de prsence, le contact via un bouton poussoir,
etc.,
ct sorties, des actuateurs, des appareils qui agissent
sur le monde physique, telle une petite lampe qui produit de
la lumire, un moteur qui actionne un bras articul, etc.
Arduino comporte galement un environnement de dveloppement
logiciel calqu sur celui-ci de Processing, qui permet de programmer
le circuit lectronique. Arduino tant un projet driv de Processing,
il apparat donc comme une ouverture logique la cration
interactive. Une fois que vous matrisez Processing, Arduino vous
sera dj familier.

L'appareil Arduino

180

L'appareil Arduino est une plaquette lectronique que l'on peut

connecter par USB un ordinateur an de tlverser du code sur le
micro-contrleur qui s'y trouve. Un micro-contrleur, c'est un
processeur (un mini-ordinateur) de petite taille qui fournit des
entres et sorties analogiques et qui fonctionne selon le programme
que l'on aura enregistr dessus.
Cet appareil est autonome. Aprs avoir reu le programme que vous
aurez conu, vous pouvez le dconnecter de votre ordinateur et il
fonctionnera tout seul (sous rserve de l'alimenter en nergie
lectrique avec une pile ou mieux une cellule photovoltaque).
Comme le logiciel Arduino, ce circuit lectronique est libre. On peut
donc tudier ses plans, et crer des drivs. Plusieurs constructeurs
proposent ainsi dirents modles de circuits lectroniques
programmables utilisables avec le logiciel Arduino.

Le logiciel Arduino

L'environnement de programmation vous est certainement familier.

On y retrouve les lments de la fentre de travail de Processing :
intituls des menus, boutons, zone d'dition, console, etc.
Comme dans Processing, le programme est constitu d'une srie
d'instructions saisie dans la fentre du logiciel. La spcicit
d'Arduino se situe au niveau de la sauvegarde du code qui s'enregistre
et s'excute habituellement depuis le micro-contrleur et non pas
sur votre ordinateur. Le programme se lance ds que l'appareil
Arduino est mis sous tension.
Une fois que vous matrisez la programmation Arduino, vous pouvez
aller plus loin en connectant le micro-contrleur d'autres
logiciels, notamment un sketch Processing que vous aurez conu
pour interagir avec cet appareil lectronique.

181

Un dialogue entre le virtuel et le physique

Le circuit lectronique Arduino comporte des entres et sorties sur
lesquelles on peut brancher dirents appareils. Les capteurs
servent mesurer des informations sur le monde, alors que les
actuateurs permettent d'agir sur celui-ci. On peut utiliser des
capteurs an d'inuencer ce qui se passe dans un sketch Processing.
l'inverse, on peut utiliser des actuateurs pour que les instructions
qui s'excutent dans le sketch influencent le monde extrieur.
Par exemple, notre programme pourrait lire les informations
obtenues de capteurs mtorologiques, de capteurs de mouvement
ou de simples boutons de contrle. Ensuite, partir de ces
informations et du traitement qu'en ferait notre sketch, on pourrait
contrler des lumires, des moteurs, ou mme des radiateurs ou des
ventilateurs. Les applications sont multiples. Tout dpend de
l'objectif vis et de l'exprience interactive recherche.

La communication srielle
Les ordinateurs communiquent entre eux l'aide d'impulsions
lectriques travers des ls. Les impulsions sont envoyes les unes
aprs les autres, dans une srie de bits. Un bit peut tre soit vrai, soit
faux. C'est le chire un ou zro. Les bits sont souvent groups en
paquets de huit. On appelle ces paquets des octets. Un caractre de
texte utilisant le jeu de caractres ASCII est exprim sur huit bits.
Pour pouvoir changer ces informations sous forme de bits avec
l'extrieur, votre ordinateur utilise une ou plusieurs entres
physiques (des ports en jargon informatique) lui permettant de se
connecter des appareils priphriques (imprimante, souris, clavier,
modem, etc.).
Tout cela pour vous dire que les impulsions lectriques et les
instructions informatiques ne sont pas si loignes que cela dans un
ordinateur et qu'il est possible de communiquer facilement avec un
Arduino l'aide de simples caractres textuels.

Exemple de communication au moyen de lettres

Voici un exemple trs simple d'envoi et de rception de caractres
avec un Arduino : en appuyant sur la barre d'espace de votre clavier
d'ordinateur, vous allumez une diode lectroluminescente (led)
connecte la sortie numrique 13 de l'Arduino. Pour leur part, les
variations lectriques captes au niveau de l'entre analogique 0
d'Arduino font varier la taille du rectangle ache par votre sketch
dans la fentre de l'espace de dessin de Processing.

182

Cet exemple suppose notamment d'avoir appris connecter votre

Arduino votre ordinateur, procdure qui n'est pas prsente ici.
L'objectif de ce chapitre est davantage de vous faire comprendre les
potentialits oertes par cet appareil lectronique et les capacits
d'interaction avec Processing. Pour en savoir plus, nous vous
invitons par la suite consulter les sources d'information
disponibles notamment sur Internet.

Le code pour Processing

Envoyer et recevoir du sriel avec Processing est assez facile avec la
librairie p ro cessing.serial. Il faut spcier le bon numro de port srie
(le numro de ce port, peut tre 0, 1, 2, 3...) , ainsi que la bonne
vitesse. Ici, notre vitesse est de 9600 bits par seconde.
/**
* Co de Pro cessing p o ur co m m uniquer avec l'Arduino sim p lem ent.
*/
im p o rt p ro cessing.serial.*;
// A t t e n t io n : C h a n g e z c e n u m r o p o u r le b o n p o r t a u b e s o in
int num ero _du_p o rt = 0 ;

// ...o u 1, 2, 3...

Serial m o n_p o rt; // L'o bjet qui gre le p o rt srie

char dernier_envo ye = ' ';
char dernier_recu = ' ';

// D ernier o ctet envo y

// D ernier o ctet reu

vo id setup () {
size(200, 150);
p rintln("Liste des p o rts: \n" + Serial.list());
String no m _du_p o rt = Serial.list()[num ero _du_p o rt];
m o n_p o rt = new Serial(this, no m _du_p o rt, 9600);
}
vo id draw() {
if (m o n_p o rt.available() != 0) {
// Co nversio n du int en char
dernier_recu = char(m o n_p o rt.read());
}
backgro und(231);
fill(0);
text("D ernier o ctet reu: " + dernier_recu, 10, 50);
text("D ernier o ctet envo y: " + dernier_envo ye, 10, 70);
int largeur = int(dernier_recu - 'a');
int m ultip licateur = 5;
stro ke(0);
no Fill();
rect(10, 90, 26 * m ultip licateur, 10);
no Stro ke();
fill(0);
rect(10, 90, largeur * m ultip licateur, 10);
}
vo id keyPressed() {
if (key == ' ') {
m o n_p o rt.write('1');
dernier_envo ye = '1';
}
}

183

vo id keyReleased() {
if (key == ' ') {
m o n_p o rt.write('0');
dernier_envo ye = '0';
}
}

Les donnes sont envoyes sous la forme d'une seule lettre. En

eet, la valeur lue de l'entre analogique zro du Arduino est
convertie en une lettre alphabtique comprise entre a et z. En
utilisant une chelle de 25 lettres, on perd un peu de prcision par
rapport la valeur chire d'origine, mais cela permet galement
de dmontrer comment les lettres sont en fait encodes avec des
chiffres.

Le code pour Arduino

Ct Arduino, on exprime donc la valeur lue au niveau de son entre
analogique zro au moyen d'une lettre comprise entre a et z. On
allume galement la diode (Led) associe la sortie 13. Cette petite
lumire est intgre directement l'Arduino, aussi nul besoin de
souder ou de monter un circuit sur une planche de prototypage.
Cet exemple fonctionnera donc avec un Arduino sans aucun
montage particulier. Vous pouvez toutefois connecter un
potentiomtre l'entre analogique zro si vous souhaitez acher
autre chose que des donnes alatoires issues du bruit
environnant. Notez que par bruit, nous dsignons non pas des sons,
mais les variations lectrostatiques de l'environnement dans lequel
se trouve votre Arduino. Mme si l'entre analogique zro n'est
connecte aucun l, des phnomnes lectriques se produisent
travers l'air entre ce port et le port Gnd de l'Arduino. Idalement
sur une carte Arduino, tous les ports analogiques inutiliss devraient
tre connects directement la borne Gnd (Terre) pour viter
ce type d'effets.
Pour tlverser le code qui suit sur un Arduino, il faut installer le
dernier logiciel Arduino, et se munir d'une carte (Duemillanove, Uno,
etc.). Pour explorer le potentiel de cette interface, il est utile d'en
apprendre le fonctionnement, ainsi que ses caractristiques
techniques sur le site officiel : http://www.arduino.cc.
/**
* C e c o d e d o it t r e t l v e r s s u r le A r d u in o .
*
* Co m m unique avec l'o rdinateur p o ur lui envo yer la valeur
* de l'entre analo gique 0 et p erm ettre de co ntr ler la
* so rtie num rique 13, qui a une p etite lum ire.
*/
co nst int entree_analo gique = 0;
co nst int so rtie_num erique = 13;
int valeur_cap tee = 0;
vo id setup () {
// Vitesse de la co m m unicatio n = 9600 bauds
Serial.begin(9600);
p inM o de(so rtie_num erique, O U TPU T);
}
vo id lo o p () {

184

char o ctet_recu;
if (Serial.available() > 0) {
// Liso ns ce que l'o n reo it via le sriel
o ctet_recu = Serial.read();
if (o ctet_recu == '1') {
digitalWrite(so rtie_num erique, HIG H);
} else {
digitalWrite(so rtie_num erique, LO W);
}
}
// Lecture de l'entre analo gique 0:
valeur_cap tee = analo gRead(entree_analo gique);
char envo yer = 'a' + m ap (valeur_cap tee, 0, 1023, 0, 25);
Serial.p rint(envo yer);
// O n attend un p eu p o ur laisser le tem p s au AD C de resp irer
delay(10);
}

Une fois que le code pour l'Arduino est install sur l'appareil,
branchez-le en USB sur votre ordinateur, si ce n'est dj fait, et
dmarrez le sketch Processing. Vrier dans le menu Arduino >
Tools que les congurations de Board et Serial Port sont
correctes. Lorsque la fentre du sketch est ouverte dans Processing
et que vous appuyez sur la barre d'espacement, la LED associe la
sortie 13 (intgre la plaquette Arduino) devrait s'allumer comme
suit :

En rajoutant :
p rintln(dernier_recu);

...dans le vo id
l'accolade :

draw()

du sketch de Processing, et avant de refermer

...
rect(10, 90, largeur * m ultip licateur, 10);
p r in t ln ( d e r n ie r _ r e c u ) ;
}

... on peut visualiser dans la console de Processing le dlement des

lettres qui correspondent aux variations lectrostatiques captes
entre les bornes 0 et Gnd de la carte Artuino.

185

En examinant le code destin au logiciel Arduino, vous pouvez

constater qu'il s'apparente Processing. Ce n'est toutefois pas le
mme langage de programmation, il s'agit en fait de C++ et non pas
de Java. La volont de simplier le processus de programmation se
retrouve toutefois dans les deux environnements : Arduino ore aux
crateurs la possibilit d'exprimenter relativement facilement la
conception d'objets lectroniques.
Dans notre exemple, nous avons cr un petit protocole de
communication entre l'ordinateur et le micro-contrleur, entre
Processing et Arduino. Relativement simple raliser et
comprendre, il n'est ni trs exible ni trs optimal. Si vous avez
besoin d'un protocole plus robuste, nous vous invitons visiter le
site de Arduino pour trouver plusieurs propositions intressantes de
librairies
et
d'exemples.
Le
protocole
Messenger
(http://www.arduino.cc/playground/Code/Messenger),
assez
simple, pourra sans doute rpondre vos besoins.

En savoir plus
Pour en savoir plus sur Arduino, nous vous invitons consulter le
manuel en franais consultable librement sur la plateforme
Flossmanuals : http://fr.flossmanuals.net/arduino/

186

A propos de ce manuel
La philosophie du libre inspire la rdaction et la diusion de ce
manuel d'initiation Processing, l'objectif tant la fois :
d'orir un public dbutant francophone les bases
d'utilisation de Processing,
valoriser la communaut des dveloppeurs et experts
francophones de Processing impliqus dans la rdaction et
l'actualisation de ce manuel en franais,
fdrer plus largement la communaut francophone de
Processing autour d'un projet commun de documentation
(tant au niveau des co-auteurs que des commentateurs),
sachant que l'ouvrage dans sa forme accessible en ligne
(wiki) peut tre amlior et comporter de nouveaux
chapitres, notamment l'occasion de la parution d'une
nouvelle version de Processing.

Un ouvrage collectif
Production originale en franais, ce manuel est vivant : il volue au
fur et mesure des contributions. Pour consulter la dernire version
actualise, nous vous invitons visiter rgulirement le volet
francophone de Flossmanuals sur le site http://fr.flossmanuals.net
et plus particulirement sur la page d'accueil du manuel
http://fr.flossmanuals.net/processing/.
Le coeur du manuel d'environ 270 pages a t ralis en 5 jours dans
le cadre d'un Booksprint qui s'est tenu Paris du 6 au 10 septembre
2010 l'initiative et avec le soutien de l'Organisation internationale
de la Francophonie (www.francophonie.org).
Exprimente et popularise par la Floss Manuals Fondation dans le
cadre de ses activits de cration de manuels multilingues sur les
logiciels et pratiques libres, la mthodologie du Booksprint permet
de rdiger en un temps trs court des livres de qualit. Un groupe de
6 experts francophones de Processing originaires d'Amrique du
Nord, d'Europe et d'Afrique se sont retrouvs dans un mme lieu
pour rdiger ce manuel. Lusage de la plate-forme de co-rdaction
en ligne a permis galement d'autres personnes intresses de
sassocier distance lexprience.

187

Co-rdacteurs prsents lors du booksprint :

Douglas Edric Stanley (France)
Julien Gachadoat (France)
Horia Cosmin Samola (Roumanie)
Alexandre Quessy (Canada-Qubec)
Adama Dembl (Mali)
Lionel T ardy (Suisse)
Facilitateurs :
Adam Hyde
Elisa de Castro Guerra
Co-rdacteurs en ligne et contributions externes :
Jean-Francois Renaud
Caroline Kassimo-Zahnd
Jerome Saint-Clair
Christian Ambaud
N'hsitez pas votre tour amliorer ce manuel en nous faisant par
de vos commentaires dans la liste de diusion francophone de
Flossmanuals, ou, si vous avez des talents de rdacteur et une
bonne connaissance de Processing, vous inscrire en tant que
contributeurs pour proposer la cration de nouveaux chapitres. Vous
trouverez en n d'ouvrage la liste complte des personnes ayant
particip jusqu' ce jour la co-rdaction du manuel.

188

Un manuel libre disponible sous plusieurs formats

et supports

Ce manuel est disponible depuis le site de Flossmanuals sous

plusieurs formes : livre imprim, pages web, pdf et ePub, ce dernier
format permettant de le consulter facilement sur des appareils
portatifs.
Publi sous licence GPLv2, ce manuel peut tre lu et copi librement.
Vous consultez l'dition rvise et augmente du 14 octobre 2010.

189

Glossaire
Ce chapitre prsente les dnitions d'une srie de termes techniques
lis Processing, la programmation ou aux techniques de dessin,
d'animation et d'interaction.

Applet
En Java, un applet (ou une appliquette) est un programme que l'on
peut intgrer dans une page web. En exportant votre sketch sous
cette forme, Processing permet d'excuter votre dessin, animation,
jeu interactif, etc. de manire autonome sur la page d'un site
internet.

Application
Voir programme.

Arduino
Arduino est une plate-forme libre de cration d'objets lectroniques
compose d'un appareil d'entre-sortie congurable (dnomm un
micro-contrleur) et d'un environnement de programmation. Cet
environnement est driv de celui de Processing et il est possible
d'excuter des sketchs sur ce type d'appareils programmables. Voir
aussi Communiquant (objet).

Argument
Voir paramtres.

Assignation
Une assignation dsigne le fait d'attribuer une valeur une variable.
On utilise l'oprateur = pour attribuer une valeur une variable.

Attribut
Un attribut, c'est une variable qui appartient une classe ou un
objet.

Bloc
Un bloc, dsign par deux accolades { } est un groupement
d'instructions qui seront excutes ensemble. Elles sont utilises
pour dlimiter les conditions, les boucles, les mthodes et les
classes.

190

Boolen
Le boolen est un type de variable qui peut tre vrai ou faux. Il
permet de tester des conditions.

Boucle
Une boucle est un bloc dont les instructions vont tre excutes
plusieurs fois la suite soit selon un nombre prdni de fois soit
selon une condition. Les instructions fo r et while permettent de
raliser des boucles. Chaque tape d'une rptition est appele
itration.

Classe
Une classe est un modle qui sert crer des objets, ceux-ci
partagent un ensemble de mthodes et d'attributs. Chaque objet
cr selon ce modle s'appelle une instance de cette classe. Les
objets sont des variables comme les autres. Leur type, c'est le nom
de la classe dont ils sont une instance. Vous n'avez rien compris ?
Rassurez-vous ! Le plus simple est d'aller lire le chapitre intitul
Les objets du manuel.

Commentaire
Un commentaire est une instruction qui sera ignore par l'ordinateur
au moment de l'excution du programme. Elle permet au
programmeur d'ajouter des notes dans son code an de le rendre
davantage clair : cette mthode facilite la comprhension ultrieure
du programme en prcisant l'utilit de telle ou telle variable,
mthode, etc.

Communiquant (objet)
Objet technologique dont la fonction est de faire transiter des
informations entre le monde physique, le monde des objets et les
tres vivants. Dans le cadre de ce manuel, ce terme s'applique
notamment des objets conus partir de petits circuits
lectroniques autonomes chargs de capter des informations sur
leur environnement (mouvement, chaleur, contact...), de les
transmettre et ventuellement de ragir en excutant des actions.
Voir aussi Arduino.

Concatnation
La concatnation est une opration qui consiste assembler
plusieurs variables (texte, nombre, etc.) en une seule chane de
caractre. On utilise le symbole + pour concatner des
variables.

191

Condition
Les conditions permettent d'excuter une srie d'instructions de
manire conditionnelle aprs qu'une instruction ait t valide ou
non.

Console
La console est la zone situe en bas de la fentre de
l'environnement de dveloppement (la fentre d'dition) de
Processing. Elle permet d'acher du texte des ns de test et de
correction d'erreurs (dbogage) pendant que notre programme
fonctionne.

Constructeur
Dans le jargon informatique, ce terme s'applique la notion de
classe en programmation. Le constructeur est une mthode portant
le mme nom que la classe invoque lorsqu'on cre une instance de
cette classe. Cette dnition vous semble obscure ? Rassurez-vous !
Le plus simple est d'aller lire le chapitre intitul Les objets du
manuel.

Contour
Le contour (mthode stro ke() ) dnit la couleur utilise pour dessiner
la bordure d'une forme gomtrique.

Coordonnes
Les coordonnes servent reprsenter la position d'un point ou d'un
objet dans l'espace sur les axes x, y, et parfois z de l'espace de
dessin.

Dboguer, dbogage
Ce terme dsigne l'action de tester un programme et d'en liminer
les erreurs et les fonctionnements inadquats. On distingue deux
tapes : la suppression des erreurs de syntaxe, de langage et fautes
de frappe qui empchent l'excution du programme ; la correction
de la logique du programme et le traitement des cas de gure non
prvus initialement.

Dclaration
La dclaration d'une variable consiste rserver un espace mmoire
par un nom pour un type donn. Une dclaration et une assignation
peuvent tre combines.

192

Espace colorimtrique
Un espace colorimtrique est une manire de grer la dnition des
couleurs. Par dfaut Processing utilise le mode RVB (rouge, vert,
bleu), mais ore aussi l'usage du mode T SV (teinte, saturation,
valeur).

Folioscope
Un folioscope est une squence d'images imprimes et relies sous
forme de livret qui peuvent tre vues en squence anime lorsque
l'on tourne les pages rapidement avec son pouce. Par analogie cela
dsigne les animations images par image. En anglais, on utilise le
terme flipbook.

Fonction
Une fonction est comme une mthode, mais l'extrieur d'une
classe. tant donn qu'en Java, on ne peut pas dnir de fonction,
nous avons vit ce terme dans ce manuel. Cependant, ce terme est
beaucoup utilis sur le site Web de Processing, car le sketch se
trouve en fait l'intrieur d'une classe que nous ne voyons pas. Voir
mthode.

Hexadcimal
La notation hexadcimale est une manire de noter les chires en
base 16. Dans cette notation, les chires suprieurs 9 sont
reprsents au moyen de lettres. On l'utilise notamment pour
reprsenter des couleurs pour le Web.

Incrmentation
Ajouter 1 la valeur d'une variable de type int .

Instance
Une instance est un objet. Voir objet.

Instruction
Une instruction est un ensemble de mthodes et/ou d'oprations
mathmatiques, etc. destin eectuer une tche. En gnral, on
aura une instruction par ligne. Une instruction se termine toujours
par un ; .

Itration
Voir boucle.

193

Java
Java est un langage de programmation orient objet dvelopp
l'origine par Sun Microsystems. Il a la particularit d'utiliser une
machine virtuelle ce qui le rend utilisable sur de nombreuses
plateformes sans ncessiter d'adaptations. Il est publi sous licence
GNU GPL. Processing utilise le langage Java.

Librairie
Une librairie est un ensemble de classes qui sont runies dans un
fichier afin d'tre utilisables dans plusieurs sketchs.

Lissage
Le lissage est une technique qui permet d'liminer les eets
d'escaliers qui apparaissent lorsqu'on dessine des lignes diagonales
ou des courbes.

Liste
Une liste est un ensemble de donnes d'une certaine taille
regroupes dans une mme variable. Les valeurs sont places l'une
aprs l'autre. Chaque donne est identie par un numro,
commenant par 0, qui rend son accs ais.

Mthode
Une mthode est un ensemble d'instructions regroupes dans un
mme bloc de code et accessibles par un simple mot cl.

Modulo
Le modulo est une opration qui permet d'obtenir le reste de la
division euclidienne de deux nombres. Par exemple le reste de la
division de 11 par 3 est 2 (11 / 3 = 3, reste 2). De manire plus
gnrale, si on prend deux nombres x et y, le reste de la division de x
par y est strictement infrieur y. L'oprateur modulo permet de
compter sans jamais dpasser un certain nombre (la base du
modulo). Ainsi, vous pouvez avoir besoin de crer des animations
cycliques dont la frquence (le nombre d'animations par cycle)
s'adapte en fonction d'autres lments, par exemple la taille de la
fentre de visualisation de l'espace de dessin. Pour dterminer
partir d'une valeur donne ce nombre d'animations par cycle, la
solution la plus simple consiste utiliser l'oprateur modulo % .

194

Objet
Dans le jargon informatique, un objet est une variable, qui est
l'instance d'une classe. Un objet peut avoir des attributs et des
mthodes. Les noms de ces attributs et mthodes sont les mmes
pour toutes les instances de cette classe, mais chaque objet peut
avoir des valeurs direntes pour ses attributs. Vous n'avez rien
compris ? Rassurez-vous ! Le plus simple est d'aller lire le chapitre
intitul Les objets du manuel.

OpenGL
OpenGL est une librairie graphique 2D/3D capable d'exploiter les
ressources d'une carte graphique pour augmenter les performances.
Processing peut au besoin utiliser cette technologie.

P3D
P3D est le mode de reprsentation 3D de base de Processing. Il est
plus lent qu'OpenGL, mais plus simple d'utilisation et plus facile
faire fonctionner sur dirents types de systmes d'exploitation
(Linux, OS X, Windows, etc.).

Paramtre
Les paramtres d'une mthode sont des valeurs d'entre qu'on
fournit la mthode et qu'elle utilise en interne pour eectuer des
actions.

Programme
Un programme est un ensemble d'instructions informatiques et de
ressources (chiers images, sons, textes, etc.) qui forme un tout et
qui excute une srie d'actions prdnies dont le rsultat peut tre
visuel, sonore, interactif, etc. Sketch est le nom donn un
programme dans Processing.

Remplissage
La couleur de remplissage est la couleur utilise pour dessiner
l'intrieur des formes gomtriques. On la spcie en appelant la
mthode fill() .

Srie
Le port srie sert connecter votre ordinateur un certain nombre
d'appareils priphriques. Votre ordinateur change des
informations avec ce matriel externe en envoyant des sries
d'instructions sous forme de bytes.

195

Sketch
Sketch est le nom donn un programme dans Processing.

Tableau
Voir liste

Test
Un test est une opration qui consiste comparer deux valeurs et
dterminer si elles sont gales, plus petites ou plus grandes l'une
par rapport l'autre. On utilise les tests dans les conditions et dans
les boucles. On utilise les oprateurs == , < et > pour faire des tests.

Timer
En jargon informatique, un timer dsigne un systme (objet physique
ou simple code informatique) qui excute une action intervalle
rgulier.

Transformation
Une transformation gomtrique est une modification de la position,
de la rotation ou de l'chelle d'un lment du dessin (ligne,
rectangle, cercle, etc.). Elle s'eectue avant l'opration de dessin de
l'lment.

Tween
En animation, un tween dsigne l'action de calculer les positions
intermdiaires entre deux points d'une animation. Ce mot provient
de l'anglais in between.

Radian
Le radian est une unit de mesure d'angle utilise pour les calculs de
trigonomtrie. Toutes les mthodes de calcul d'angle de Processing
fonctionnent avec cette unit. Un cercle complet (360) vaut 2 x PI,
soit environ 6,2831. La mthode radians(N O M B RE) permet de convertir
un nombre de degrs en radians.

Variable
Une variable est un espace rserv de la mmoire de l'ordinateur
dans lequel l'utilisateur peut stocker des informations. On lui donne
un nom, un type et une valeur.

196