Motifs Processing

Porteurs du projet : Clara Delmon, Thomas Leloup

Date : 18/01/2017

Licence : libre

Contexte : Routine (prototype)

Les Boucles For

Une boucle For s'utilise ainsi:

for(int i=a; i<b; i+=c){
}

Où a désigne la coordonnée de départ de la répétition, b la coordonnée qui indique l'arrêt de la répétition et c indique le pas entre chaque, le nombre d'étapes. b peut aussi indiquer un nombre d'étapes quand il est utilisé avec i++ à la place de i+=c.

Ensuite à l'intérieur {} on utilise rect ou line ou ellipse...

Exemples

1. Les Lignes

background(255); // fond blanc
size(500,500); //taille de la fenêtre
for (int j=0; j<width; j+=3) { // 1. Où démarre le motif 2. Où s'arrête le motif 3. Règle le pas entre les deux
line(j, 0, j, height); //affiche une ligne: line(x1, y1, x2, y2) ou les absisses renvoient à j et la longeur correspond à la hauteur de la fenêtre
}

2. Les Carrés

rectMode(CENTER); // part du centre du rectangle et non de ses coins pour ses transformations
background(255); // fond blanc
size(500,500); // fenêtre de 500x500
for(int i=0; i<width*2; i+=10){ // se répète de 0 à plus de la largeur de la fenêtre, espacé de 10
fill(255,0); // remplit en blanc l'intérieur en noir l'extérieur
rect(width/2, height/2, i, i); // affiche un rectangle à partir du milieu de la fenêtre et selon i
}

3. Les Ellipses

background(255); // fond blanc
size(500,500); // fenêtre de 500x500
for(int i=0; i<width*2; i+=10){ // de 0 à plus de la largeur de la fenêtre, avec un pas de 10
fill(255,0); // remplit en blanc l'intérieur, en noir l'extérieur
ellipse(width/2, height/2, i, i); // dessine l'ellipse à partir du milieu de la fenêtre et selon i
}

4. Losanges

rectMode(CENTER); // on considère le centre du rectangle et non son angle
background(255); // fond blanc
size(500,500); // taille de la fenetre
for(int i=0; i<width*2; i+=10){ // de 0 à plus de la largeur de la fenetre, d'un pas de 10
pushMatrix(); // permet la transformation sur le rectangle uniquement
fill(255,0); // remplit en blanc l'intérieur en noir l'extérieur
translate(width/2, height/2); // translate vers le centre de la fenetre
rotate(PI/4.0); // pivote
rect(0, 0, i, i); // dessine un rectangle selon les valeurs i
popMatrix(); // fin de la transformation
}

Ici on utilise pushMatrix et popMatrix pour appliquer une rotation du carré

5. Damier

size(500,500); //taille de la fenêtre
background(255); // fond blanc
noStroke(); // pas de contours
for (int i=0; i<width; i+=20) { // de 0 à la largeur de la fenêtre avec un pas de 20
for (int j=0; j<height; j+=20) { // de 0 à la longueur de la fenêtre avec un pas de 20
fill(0); // remplit en noir
rect(i, j, 10, 10); //dessine le rectangle, de 10x10 positionné en i et j
}
}
translate(10,10); // décale les boucles for de 10 en absisse et 10 en ordonnée
for (int i=0; i <width; i+=20) { // de 0 à la largeur de la fenêtre avec un pas de 20
for (int j=0; j <height; j+=20) { // de 0 à la longueur de la fenêtre avec un pas de 20
fill(0); // remplit en noir
rect(i, j, 10, 10); //dessine le rectangle, de 10x10 positionné en i et j
}
}

6. Points

size(500,500); //taille de la fenêtre
background(255); // fond blanc
noStroke(); // pas de contours
for (int i=0; i<width+1; i+=10) { // Répéter de 0 à plus de la largeur de la fenêtre avec un pas de 10
for (int j=0; j<height+1; j+=20) { // Répéter de 0 à plus de la hauteur de la fenêtre avec un pas de 20
fill(0); // remplit en noir
ellipse(i, j, 8, 8); //dessine une ellipse, de 8x8 positionné en i et j
}
}
translate(5,10); // décale en x et en y
for (int i=0; i <width+1; i+=10) { // Répéter de 0 à plus de la largeur de la fenêtre avec un pas de 10
for (int j=0; j <height+1; j+=20) { // Répéter de 0 à plus de la hauteur de la fenêtre avec un pas de 20
fill(0); // remplit en noir
ellipse(i, j, 8, 8); //dessine l'ellipse, de 8x8 positionné en i et j
}
}