TD No 5
from http://vernier.frederic.free.fr/Teaching/IntroGraphic

Turbine

-1- Proposez un algorithme qui dessine le motif de lignes suivant dans une fenêtre carrée(width=height)

  • N pales de turbine (N=32 dans la figure 8)
  • des pales entre les rayons width/3 et width/3+10
  • un angle tel qu'un rayon qui part du centre touche à la fois le début d'une pale et la fin de la pale suivante

-2- Que faut-il faire pour étendre ce code afin qu'il réalise le motif de spirale touchant exactement le bord de la fenêtre :

-3- Peut-on intervertir les 2 boucles sans changer le résultat final ? que cela change t-il dans l'ordre de dessin ?

-4- Mettez l'épaisseur proportionelle au log de la distance au centre. Dans quelle base est la fonction log ?

-5- Où mettre ce code pour eviter la redondance ? Qu'en est-il si on avait inversé l'ordre des boucles ?

-6- Dessinez des spirales en degradé

  • dégradé de teinte (H de HSB) pour l'angle
  • dégradé de saturation (S de HSB) pour la distance au centre

Correction
void setup(){
  colorMode(HSB, 255);
  size(300, 300);
}

int N=20;
int R=100;
void draw(){
  for (int R=0; R<width/2; R+=10){
    strokeWeight(1+log(R+1)/log(2)); // car en base 2 c'est plus parlant !
    for (int i=0; i<N; i++){
      float x0 = width/2 +R     *cos(i    *2*PI/N);
      float y0 = height/2+R     *sin(i    *2*PI/N);
      float x1 = width/2 +(R+10)*cos((i+1)*2*PI/N);
      float y1 = height/2+(R+10)*sin((i+1)*2*PI/N);
      stroke(i*255/N, R*255/(width/2), 255);
      line(x0, y0, x1, y1);
    }
  }
}
figure 8
Figure 8
figure 9
Figure 9
figure 11
Figure 10
figure 12
Figure 11

Lune en relief

On souhaite créer une fonction qui affiche une lune en relief à partir du code suivant:

  • Un croissant de lune en excluant les pixels qui sont trop pres du point (-width/6,height/6)
  • Une lune en dégradé de luminosité entre 90 (limite du croissant) et 255 (bord exterieur) avec hue=0 et saturation=0
  • Une lune teintée orange (teinte=30) sur les bords (saturation = 96 au bord, =0 à 50 pixels du bord, =0 encore plus au centre)

loadPixels();
  for (int j = 0; j < height; j++) {
    for (int i = 0; i < width; i++) {
      float dc = dist(i, j, width/2, height/2);
      if (dc<=100)
        pixels[j*width+i] = color(255, 255, 192);
    }
  }
  updatePixels();
figure 8
Figure 12A
figure 9
Figure 12B
figure 11
Figure 12C
figure 12
Figure 12D
Correction 1
void draw(){
  loadPixels();
  colorMode(HSB, 255); // ou dans le setup()
  for (int j = 0; j < height; j++) {
    for (int i = 0; i < width; i++) {
      float dc = dist(i, j, width/2, height/2);
      float dc3 = dist(i, j, -width/6, height/6);
      if (dc<=height/2 && dc3>260){
        float h = 0;
        float s = 0;
        float dbordint = (dc3-260);
        float dbordext = -(dc-height/2);
        float b = (dbordint*255 +dbordext*90)/(dbordint+dbordext);
        pixels[j*width+i] = color(h, s, b);
      }
    }
  }
  updatePixels();
}
Correction 2
void draw(){
  loadPixels();
  colorMode(HSB, 255); // ou dans le setup()
  for (int j = 0; j < height; j++) {
    for (int i = 0; i < width; i++) {
      float dc = dist(i, j, width/2, height/2);
      float dc3 = dist(i, j, -width/6, height/6);
      if (dc<=height/2 && dc3>260){
        float h = 30;
        float s = max(0,(dc-height/2+50))*96/(50);
        float dbordint = (dc3-260);
        float dbordext = -(dc-height/2);
        float b = (dbordint*255 +dbordext*90)/(dbordint+dbordext);
        pixels[j*width+i] = color(h, s, b);
      }
    }
  }
  updatePixels();
}