TP No4

Trous noirs

Nous allons dans ce TP apprendre à manipuler le hasard pour faire des graphismes moins "géométriques".

Commençons par copier-coller ce code qui affiche deux trous noirs. Deux images sont générées pixel par pixel puis affichées l'une au dessus de l'autre. chaque pixel a une luminosité qui vaut un nombre aléatoire multiplié par la distance au centre. Pour produire des nombres aléatoires nous utiliserons random(), gaussianRandom() et noise(). Pour mettre ces fonctions sur un pied d'égalité nous utiliserons random (-1, 1) qui produit de petites valeurs et nous multiplierons le résultat pour en faire une couleur.
PImage img1;
PImage img2;

void setup(){
  size(400, 800);
  img1 = createImage(width, height/2, ARGB);
  img2 = createImage(width, height/2, ARGB);
  img1.loadPixels();
  img2.loadPixels();
  for(int j=0; j<img1.height; j++){
    for(int i=0; i<img1.width; i++){
      float d = dist(i,j,width/2, width/2);
      img1.pixels[j*img1.width+i] = color(d*(max(0,random(-1, 1))));
      img2.pixels[j*img2.width+i] = color(d*(max(0,randomGaussian())));
    }
  }
  img1.updatePixels();
  img2.updatePixels();
}

void draw(){
  image(img1,0,0);
  image(img2,0,height/2);
}
2 trous noirs
screenshot
Questions :
  1. Enlevez un peu de valeur avant le max pour faire plus de points sombres et moins de lumineux. Combien peut-on enlever à random() et a randomGaussian() ?
  2. Remplacez la premier par noise(...), mais attention noise(...) a besoin qu'on lui dise il doit produire un nombre aléatoire (le etant en 1D, 2D ou 3D mais toujours sur de petites valeurs nous lui donnerons (i/20.0, j/20.0)
  3. Pareil qu'à la première question, combien peut-on elever à noise(...) pour obtenir moins de points/nuages lumineux ?
  4. Remplacez le second par une somme entre le resultat obtenu par noise(...) et celui obtenu par randomGaussian()

Questions subsidiaires
  1. Remplacez le i/20.0 des parametres de noises par d/20.0 ! qu'obtenez vous et pourquoi ?
  2. Passez en mode colorMode(HSB); pour produire un hasard différent sur le H(le teinte), le S(la saturation) et le B (la luminosité). Le but etant de garder la même luminosité mais d'obtenir des couleurs d'étoiles plus variées.screenshot
plus de noirs
screenshot
avec noise(...)
screenshot

Transformations

Dans la fonction draw() nous affichons les 2 images l'une au dessus de l'autre en utilisant les coordonnées de la fonction image(). Nous allons voir qu'il est possible de tout afficher en 0,0 ... mais apres avoir deplacer le repère.

Questions :
  1. Remplacez image(img2,0,height/2); par translate(0,height/2);image(img2,0,0);
  2. Rajoutez scale(0.5, 0.5) avant et après le translate(); et gardez celui qui ne chevauche pas les images
  3. Pour faire une homothétie au centre de l'image du bas vous devrez réaliser trois étapes
    • une translation vers le centre de l'homothétie (width/2, 3*height/4)
    • une homothétie (0.5,0.5)
    • une translation inverse de la moitié de l'image (-img2.width/2, -img2.height/2)
  4. Remplacez l'homothétie par une rotation de PI/4 avec la fonction rotate()

Questions subsidiaires
  1. Utilisez un facteur d'homothétie ou un angle proportionnel à la variable frameCount qui s'incrémente toute seule à chaque affichage
  2. Utilisez un sinus pour faire "pulser" l'image (qui grossit/rapetisse tout en tournant)
homothétie au centre
screenshot
pulse
screenshot