Travaux pratiques - Introduction à Processing

Références externes utiles :

Exercice 1 - Processing en mode immédiat

Ecrire le code Processing correspondant à chacune des trois images ci-dessous. La première utilise seulement des primitives de tracé et s’inspire d’un tableau de Mondrian. La deuxième nécessite des boucles et du (pseudo)hasard, elle s’inspire de Le Parc et Vasarely. La troisième demande de la récursivité.


inspiration Mondrian

Correction

size(400,500);
smooth();

stroke(0);
strokeWeight(10);
strokeCap(SQUARE);

//le fond
background(255);

// le grand carre rouge
fill(255,0,0);
rect(100,0,300,300);
// le rectangle bleu
fill(0,0,255);
rect(0,300,100,200);
// le carre jaune
fill(255,255,0);
rect(300,400,100,100);
// le trait vertical pres du carré jaune
line(300,300,300,400);
// le trait horizontal en haut
line(0,100,100,100);
// le bord
noFill();
rect(0,0,400,500);

save("mondrian1.png");

Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.
inspiration Vasarely

Correction

  size(600,600);
    rectMode(CENTER);
    ellipseMode(CENTER);
    smooth();
    noStroke();

    for (int x=30; x<600; x+=60){
      for (int y=30; y<600; y+=60){
        fill(random(0,255));
        rect(x,y,60,60);
        fill(random(0,255));
        ellipse(x,y,50,50);
      }
    }

    save("leparc.png");

Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.
division récursive

Correction

void setup(){
  size(600,600);
  rectMode(CORNERS);
  noFill();stroke(0);
  subdiv(7,0,0,width,height);
  save("resu.png");
}

void subdiv(int n,int x1,int y1,int x2,int y2) {
  strokeWeight(n);
  rect(x1,y1,x2,y2);
  if (n>0) {
  int cx = (int)gauss(x1,x2);
  int cy = (int)gauss(y1,y2);
  subdiv(n-1,x1,y1,cx,cy);
  subdiv(n-1,cx,y1,x2,cy);
  subdiv(n-1,x1,cy,cx,y2);
  subdiv(n-1,cx,cy,x2,y2);
 }
}

// remarque : tirage gaussien existe dans processing 2.0

float gauss(int a, int b){
  return ((a+b)/2.0) + (b-a)*gauss01()/12;
}

float gauss01(){
  float theta = random(0,2*PI);
  float r = sqrt(-2*log(random(0,1)));
  return r*cos(theta);
}

Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.

Exercice 2 - La boucle d’animation draw()

Un grand classique de l’animation procédurale est le mouvement brownien. Créer une classe Particule avec des attributs de position (x,y), une méthode de dessin et une autre pour la mise à jour de position. Pour cette dernière, on se contente d’incrémenter les coordonnées selon une valeur (pseudo)aléatoire de quelques pixels (en plus ou en moins). Créer ensuite un tableau d’un bon nombre N d’objets particule. Etudier le comportement du programme (en terme de framerate) avec N croissant et selon le type des primitives de tracé utilisées pour les particules (ellipses ou rectangles, par exemple).


brownien 1

brownien 2

Correction

class particule {
  float x,y;

  particule(){
    x=random(0,width);
    y=random(0,height);
  }

  void dessin(){
    noStroke();fill(0);
    ellipse(x,y,6,6);
  }

  void evolution(){
    x = (x+random(-1,+1))%width;
    y = (y+random(-1,+1))%height;
  }
}


particule[] p = new particule[1000];

void setup() {
  size(600,600);
  smooth();
  for (int i=0;i<p.length;i++) p[i] = new particule();
}

void draw() {
  background(200);
  for (int i=0;i<p.length;i++){
    p[i].dessin();
    p[i].evolution();
  }
}

Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.

Exercice 3 - Mode réactif pour l’interaction

Ajouter au programme précédent deux boutons (start et stop), qu’il faut coder soi-même. Créer une classe Button qui s’en charge. Etudier ensuite une classe Slider, qui par exemple ici pourrait faire évoluer le diamètre des particules en temps réel.

Correction

Les programmes solutions pour ce TP se trouvent ici.

Reprendre ensuite l’exercice avec à la place les composants de GUI de la librairie controlP5 (qu’il faut installer soi-même).

Correction

Les programmes solutions pour ce TP se trouvent ici.