Processing et art génératif

STI2D SIN
TP - Cours : Processing et l’art Génératif
Enseignement de spécialité Page 1 sur 7
Lycée Charles de Gaulle MURET
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.

STI2D SIN
TP - Cours : Processing et l’art Génératif
Enseignement de spécialité Page 2 sur 7
Lycée Charles de Gaulle MURET
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. Barred'actions
2. Barred'onglets
3. Zoned'édition(pourysaisirvotreprogramme)
4. Console(destinéeauxtestsetmessagesd'erreur)
5. Fenêtredevisualisation(espacededessin)
6. 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).

STI2D SIN
TP - Cours : Processing et l’art Génératif
Enseignement de spécialité Page 3 sur 7
Lycée Charles de Gaulle MURET
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DéfinitionCode
L’espacedetravail(x0,Y0)en
hautàgauche.
Size(largeur,hauteur)enpixelsSize(100,100)espacepardéfaut
LepointPoint(x,y)point(50,50);
Laligneline(xA,yA,xB,yB)line(15,90,95,10);
Lerectanglerect(x,y,largeur,hauteur); 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).

STI2D SIN
TP - Cours : Processing et l’art Génératif
Enseignement de spécialité Page 4 sur 7
Lycée Charles de Gaulle MURET
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.

STI2D SIN
TP - Cours : Processing et l’art Génératif
Enseignement de spécialité Page 5 sur 7
Lycée Charles de Gaulle MURET
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);
}