TP No3

Soleil

Nous allons dans ce TP apprendre à faire du dessin géométrique en utilisant 3 composants

Commençons par copier-coller ce code qui affiche un soleil "enfantin"

  void setup() {
    size(300, 350);
    smooth();
    strokeWeight(1);
    noLoop();
  }
  void draw() {
    background(0, 0, 128);
    stroke(255, 255, 128, 255);
    int r=140;
    for (int i=0; i<360; i++) {
      line(width/2, height/2, width/2+cos(i)*r, height/2+sin(i)*r);
    }
  }
Un soleil composé de 360 rayons
screenshot

 

Questions :
  1. Faites moins de rayons mais avec un trait un peu plus large
  2. Utilisez la fonction random(...) pour faire des rayons de longueur variable
  3. Modifiez la couleur pour avoir une couleur aléatoire entre le jaune et le blanc
  4. Ajoutez un cercle plein de jaune au center
  5. Enlevez le cercle jaune pour le remplacer par du code qui colorie les pixels en jaune un par un
    
    loadPixels();
      for (int j = height/2-100; j < height/2+100; j++) {
        for (int i = width/2-100; i < width/2+100; i++) {
          int dc = dist(i, j, width/2, height/2);
          if (dc<=100)
            pixels[j*width+i] = color(255, 255, 192);
        }
      }
      updatePixels();
    
  6. Modifier la couleur de pixel pour la rendre proportionelle à la distance dc (orange sur les bords et plus clair au centre)
  7. Modifier la couleur des rayons pour les rendre de couleur semblable au bord de la sphère
Résultats Attendus
screenshotscreenshot
screenshotscreenshot

Dessin récursif

Nous allons maintenant apprendre à dessiner en appelant recursivement une fonction de dessin.


// fonction d'initialisation
void setup(){
  // tout en hauteur pour faire pousser les plantes !
  size(300, 600);
  noLoop();
}

// fonction de dessin principale
void draw() {
  // parametres de dessins initiaux
  background(64, 64, 255);
  stroke (0, 192, 64);
  strokeWeight(2);

  // on part du bas vers le haut
  drawRec(width/2, height, width/2, height-250);
}

void drawRec(int x1, int y1, int x2, int y2) {
  // on arrete la recursivite au quand on coupe les cheveux en 4 !
  if (dist(x1,y1,x2,y2)<1) return;

  // Calcule de la prochaine etape
  // - on part du bout (x2, y2)
  // - on ajoute le vecteur des deux derniers points ... divise par 3
  // - on part sur le cote en ajoutant le vecteur orthogonal ... divise par 5
  int x3 = x2+ (x2-x1)/3 + (y2-y1)/5;
  int y3 = y2+ (y2-y1)/3 + (x1-x2)/5;

  // on dessine l"etape courante
  line(x1, y1, x2, y2);

  // on appelle  l"etape suivante
  drawRec(x2, y2, x3, y3);
}
Une tige qui part d'en bas et remonte "récursivement"
screenshot
Questions :
  1. Faites pousser deux plantes, une grande à width/3 et l'autre plus petite à 2*width/3
  2. Faites deux appels récursifs afin qu'à chaque étape, la plante fasse deux branches
  3. A chaque étape rendez la largeur du trait proportionnelle au logarithme de la distance x1,y1 <-> x2,y2
  4. Plutôt que d'utiliser les facteur 1/3 et 1/5 dans la croissance de la plante utilisez un chiffre aléatoire (entre 0.2 et 0.4 par exemple).
Résultats Attendus
screenshotscreenshot
screenshotscreenshot

Ajoutons du hasard

Questions subsidiaires :
  1. Ajouter des rayons de longueur variable au soleil
  2. Changer le dégradé radial de couleur du soleil par un bruit de Perlin sur le rouge et vert
  3. Faites le premier segment de la plante systematiquement plus épais, les 5 premiers segments marrons et les autres d'un vert de plus en plus tendre
  4. Tirez un chiffre aléatoire pour remplacer le gain de hauteur à chaque étape, faites de même pour la composante vertical.
  5. Enlevez l'appel noLoop() de setup(), créez un compteur (variable globale) et faire grandir la plante à chaque étape
Résultats Attendus
screenshot screenshot