STI2D SIN
TP - Cours : Processing et l’art Génératif
Processing ?
C'est un langage de programmation basé sur la plate‐forme Java, et qui dispose de plus d'une centaine
de librairies ! Conçu par des artistes, pour des artistes, Processing est un des principaux environnements
de création utilisant le code informatique pour générer des œuvres multimédias
Objectifs
→Etre capable d’appréhender les bases d’un langage de programmation.
→Etre capable d’utiliser les boucles et les conditions
→ Etre capable de créer des objets artistiques numériques
Matériels à disposition
Le logiciel Processing en téléchargement libre.
L’aide disponible en ligne http://fr.flossmanuals.net/processing/index
Répartition du travail
PARTIE N°1 « Processing »
PARTIE N°2 « Des formes basiques »
PARTIE N°3 « Hommage à Mondrian »
PARTIE N°4 « Hommage à Vasarely »
PARTIE N°1 « Processing »
1. A quoi ça sert ?
Conçu par des artistes, pour des artistes, Processing est un des principaux environnements de création
utilisant le code informatique pour générer des œuvres multimédias sur ordinateur. L'attrait de ce
logiciel réside dans sa simplicité d'utilisation et dans la diversité de ses applications : image, son,
applications sur Internet et sur téléphones mobiles, conception d'objets électroniques interactifs.
Il est basé sur le langage JAVA et permet aussi de communiquer avec les cartes Arduino.
Enseignement de spécialité
Lycée Charles de Gaulle MURET
Page 1 sur 7
STI2D SIN
TP - Cours : Processing et l’art Génératif
2. L’interface Logicielle
Interface de programmation
L'interface d'utilisation de Processing est composée de deux fenêtres distinctes : la fenêtre principale
dans laquelle vous allez créer votre projet et la fenêtre de visualisation dans laquelle vos créations
(dessins, animations, vidéos) apparaissent.On trouve plus précisément les éléments suivants dans
l'interface :
1.
2.
3.
4.
5.
6.
Barre d'actions
Barre d'onglets
Zone d'édition (pour y saisir votre programme)
Console (destinée aux tests et messages d'erreur)
Fenêtre de visualisation (espace de dessin)
Liste déroulante pour les modes
Bouton "Run" : exécute votre sketch (votre programme).
Bouton "Stop" : arrête l'exécution de votre sketch.
Bouton "New" : Crée un nouveau sketch.
Bouton "Open" : ouvre un sketch existant.
Bouton "Save" : sauvegarde le sketch en cours.
Bouton "Export" : exporte le sketch en application (en mode Java).
Enseignement de spécialité
Lycée Charles de Gaulle MURET
Page 2 sur 7
STI2D SIN
TP - Cours : Processing et l’art Génératif
3. Les bases du langage
Processing utilise le langage Java pour créer vos programmes. Ce langage, qui va être lu par votre
ordinateur après avoir cliqué sur le bouton de lancement du sketch, possède un certain nombre de
règles de syntaxe qui si elles ne sont pas respectées empêcheront l'exécution correcte du programme.
Processing est sensible à la casse, il fait la différence entre les majuscules et les minuscules : libre est
différent de Libre !.
A la fin de chaque instruction (dessiner un cercle, effectuer un calcul, etc.), vous devez mettre un « ; »
afin de signaler à l'ordinateur la fin de l'instruction.
Taper ce pg et lancez‐le :Observer ce que vous obtenez.
//Dessine un cercle
ellipse(10,10, 10, 10);
4. Les instructions de Formes basiques (voir http://fr.flossmanuals.net/processing/index)
Forme
L’espace de travail (x0,Y0) en
haut à gauche.
Le point
La ligne
Le rectangle
Définition
Size(largeur,hauteur) en pixels
Code
Size(100,100) espace par défaut
Point(x,y)
line(xA,yA,xB,yB)
rect(x, y, largeur, hauteur);
point(50, 50);
line(15, 90, 95, 10);
rect(10, 10, 80, 80);
Rectangle centré :
rectMode(CENTER);
rect(50, 50, 80, 40);
L’ellipse
Ellipse(x,y,Lx,Ly)
ellipse(50, 50, 80, 80);
5. Les couleurs
Chaque pixel est codé par trois couleurs : Le
Rouge, le Vert et le Bleu et chaque couleur
est codé sur 8 bits ( 0 à 255).
La synthèse additive est l'opération
consistant à combiner les lumières de
plusieurs sources émettrices colorées afin
d'obtenir une nouvelle lumière colorée.
En synthèse additive, les lumières colorées
sont généralement utilisées au nombre de
trois : les lumières rouge verte et bleue (RVB
ou RGB).
Enseignement de spécialité
Lycée Charles de Gaulle MURET
Page 3 sur 7
STI2D SIN
TP - Cours : Processing et l’art Génératif
6. Les instructions « Couleurs » basiques
Taper le programme suivant et complétez le.
size(400,400);
background (0,255,0);……………………………………………………………… ?
Essayer ensuite les combinaisons suivantes.
background (0,0,0) ;………………………………………………………………….. ?
background (0,) ; ………………………………………………………………………. ?
background (#000000) ;………………………………………………………………?
background (#FCFC03) ;……………………………………………………………… ?
Allez dans « tools » et decouvrez l’outil « Color selector ».
Taper le programme suivant et complétez‐le.
size(400,400);
background (0,255,0);
stroke(#14C1B4); ..................................?
strokeWeight(6); ....................................?
fill(250, 5, 67,150); ...................................... ?
rect(100, 150, 50, 80);
PARTIE N°2 « Des Formes Basiques »
Exercice n°1
Réalisez le programme permettant d’obtenir ce
dessin (L’espace de dessin fait 400x300 pixels).
Appelez le professeur pour vérifier.
Modifiez votre programme afin d’obtenir cette
figure.
Enseignement de spécialité
Lycée Charles de Gaulle MURET
Page 4 sur 7
STI2D SIN
TP - Cours : Processing et l’art Génératif
PARTIE N°3 « Hommage à Mondrian »
Q1 : Qui est Mondrian ?
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
Q2 : Réalisez le dessin suivant.
Caractéristiques :Taille (400x500)
PARTIE N°4 « Hommage à Vasarely »
1. Les itérations :
Q1 : Réaliser une ligne de 10 carrés de 50
pixels de côté.
Q2 : Comment simplifier ce programme ?
Q3 : Testez maintenant votre programme avec l’instruction suivante :
for(int j=0; j<10; j++) { ………………………………………………………………………………………………………………… ?
fill(255);
rect(50*j,50,50,50);
}
Enseignement de spécialité
Lycée Charles de Gaulle MURET
Page 5 sur 7
STI2D SIN
TP - Cours : Processing et l’art Génératif
2. Les tests conditionnels
Q3 : Exécutez le programme suivant :
background(255);
size(600,200);
for(int j=0; j<10; j++) {
if(j%2==0)
……………………………………………………………………………………….. ?
fill(255);
else
……………………………………………………………………………………….. ?
fill(0);
……………………………………………………………………………………….. ?
rect(50*j,50,50,50);
}
Q4 : Modifiez ce programme afin d’obtenir un damier de 10 par 10 carrés (conseil : Boucle imbriquée !)
Appelez votre professeur.
3. Hommage à Vasarely
Q1 : Qui est Vasarely ?
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………
Q2 : Réalisez le dessin suivant. Utilisez des variables de
types float et l’instruction random (val min,val max)
Caractéristiques :Taille (500x500).
Appelez votre professeur pour vérification.
Enseignement de spécialité
Lycée Charles de Gaulle MURET
Page 6 sur 7
STI2D SIN
TP - Cours : Processing et l’art Génératif
4.
Défi pour les plus rapides ! hommage à Leparc et Vasarely
Q1 : Réalisez ce dessin et le faire valider par votre
professeur.
Conclusion : Vous venez de voir quelques possibilités du logiciel Processing. Si le sujet vous intéresse vous
pouvez approfondir le sujet en tapant Itération+ hasard=Génératif !!
Enseignement de spécialité
Lycée Charles de Gaulle MURET
Page 7 sur 7
