====== 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:

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

\\ 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**

<code>
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
}
</code>

{{ :wiki:tutoriels:motifs-processing:capture_d_e_cran_2017-01-18_a_09.52.20.png?300 |}}

**2. Les Carrés**

<code>
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 
  
}
</code>

{{ :wiki:tutoriels:motifs-processing:capture_d_e_cran_2017-01-18_a_09.49.54.png?300 |}}


**3. Les Ellipses**

<code>
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
  
}
</code>

{{ :wiki:tutoriels:motifs-processing:capture_d_e_cran_2017-01-18_a_09.50.20.png?300 |}}

**4. Losanges**

<code>
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
}
</code>

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

{{ :wiki:tutoriels:motifs-processing:capture_d_e_cran_2017-01-18_a_09.53.22.png?300 |}}

**5. Damier**

<code>
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

 
 }
}
</code>

{{ :wiki:tutoriels:motifs-processing:capture_d_e_cran_2017-01-18_a_09.53.00.png?300 |}}

**6. Points**

<code>
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

 
 }
}
</code>

{{ :wiki:tutoriels:motifs-processing:capture_d_e_cran_2017-01-18_a_09.53.38.png?300 |}}