TP No5

Polygone / Courbe de bézier

Nous allons dans ce TP apprendre à utiliser le dessin relatif et les courbes et polygones 


void setup(){
  size(500, 500);
}

void draw()  {
    background(255);
    float ANG = PI/3;
    // dessine les 6 lignes dans une boucle
    stroke(255, 0, 100);
    for (int i=0; i<6; i++) {
      float x0 = width/4 +100*cos(i*ANG);
      float y0 = height/4+100*sin(i*ANG);
      float x1 = width/4 +100*cos((i+1)*ANG);
      float y1 = height/4+100*sin((i+1)*ANG);
      line(x0, y0, x1, y1);
    }

    // dessine un polygone point par point
    stroke(100, 100, 255);
    fill(200, 200, 255);
    beginShape();
    for (int i=0; i<6; i++) {
      float x0 = 1*width/4 +100*cos(i*ANG);
      float y0 = 3*height/4+100*sin(i*ANG);
      vertex(x0, y0);
    }
    endShape(CLOSE);


    // dessine un polygone triangle par triangle
    stroke(100, 100, 255);
    fill(200, 200, 255);
    beginShape(TRIANGLE_FAN);
    vertex(3*width/4, 1*height/4);
    for (int i=0; i<7; i++) {
      float x0 = 3*width/4 +100*cos(i*ANG);
      float y0 = 1*height/4+100*sin(i*ANG);
      vertex(x0, y0);
    }
    endShape(CLOSE);

    // dessine une courbe point par point
    stroke(100, 255, 200);
    fill(200, 255, 200);
    beginShape();
    vertex(3*width/4 +100*cos(0), 3*height/4+100*sin(0));
    for (int i=1; i<7; i++) {
      float x0 = 3*width/4 +100*cos(i*ANG);
      float y0 = 3*height/4+100*sin(i*ANG);
      float dx = -50*sin(i*ANG);
      float dy = 50*cos(i*ANG);
      bezierVertex(x0+dx, y0+dy, x0-dx, y0-dy, x0, y0);
    }
   endShape(CLOSE);
}
un hexagone rose
un polygone en 6 triangles
un polygone rempli
une forme en courbe
screenshot

 

Questions :
  1. Ajouter 3 appels à ellipse(...) afin de materialiser le 3 points de la fonction bezierVertex
  2. Modifiez la valeur 50 pour se rendre compte de l'effet du vecteur dx, dy
  3. x0, y0 calcule le "point suivant" de la courbe. Calculez aussi x1, y1 le "point précédent". Placez un point de controle à mi-chemin (x0+x1)/2, (y0+y1)/2
  4. Calculez la normale à x0,y0 -> x1,y1 ... dans dx, dy.
  5. Placez les points de contrôle de part et d'autre du point à mi-chemin. Vous devriez obtenir un effet de vaguelette
Résultats Attendus
screenshot

Mosaïque / Changements de repère

Nous allons maintenant apprendre à déplacer le repère avant de reproduire un dessin plusieurs fois

Questions :
  1. Deplacer tout le code du quatrième dessin dans une fonction drawPoly(); Appeler drawPoly() dans la fonction draw()
  2. Rajouter 3 paramètres x, y, R à cette fonction et remplacer 3*width/4 par x, 3*height/4 par y et 100 par R. Appeler drawPoly( 3*width/4, 3*height/4, 100).
  3. Faites deux appels à drawPoly(...); séparé par un appel à translate(30, 60);
  4. Enlever les autres dessins et Faites coincider les bords des 2 figures ... difficile hein ? .. la distance séparant 2 motifs est de sqrt(3)/2*2*R !!!
  5. Remplacer l'appel à translate(...) par un appel à rotate() ET un à translate() ...
  6. Faites le pavage de mozaîque suivant !
Résultats Attendus
screenshot