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

Dégradé de couleur

On souhaite afficher un dégradé derrière le soleil et au dessus de l'horizon. On vous demande d'écrire une fonction gradientCiel() qui colorie tous les pixels de la manière suivante :
void gradientCiel(int xO, int yO, int R, int r, int g, int b) ;

  • Si le pixel touche le bas de l'écran il est de la couleur passée en paramètre (r, g, et b)
  • Si le pixel touche le haut de l'écran il est bleu clair (50% bleu pur, 50% blanc)
  • Entre les deux la couleur des pixels est un dégradé linéaire entre ces deux couleurs.
    • void gradientCiel(int xO, int yO, int R, int r, int g, int b) {
  loadPixels();
  for(int j=0; j<height; j++){
    for (int i=0; i<width; i++){
      int r0= ((255/2)*(height-j) + r*(j) )/(height-j + j);
      int g0= ((255/2)*(height-j) + g*(j) )/(height-j + j);
      int b0= ((255  )*(height-j) + b*(j) )/(height-j + j);

      pixels[i+j*width] = color(r0, g0, b0);
    }
  }
  updatePixels();
}
  • Si la distance -d- entre le pixel et le centre du soleil(x0,y0) est comprise entre R et 2*R, la couleur dégradée de bleu est modifiée
    • elle vaut le dégradé de bleu déjà calculé si d=2*R
    • elle vaut du jaune très clair (25% jaune pur, 75% blanc) si d=R
    • elle vaut un dégradé entre les deux si d est entre R et 2*R
void gradientCiel(int xO, int yO, int R, int r, int g, int b) {
  loadPixels();
  for(int j=0; j<height; j++){
    for (int i=0; i<width; i++){
      int r0= ((255/2)*(height-j) + r*(j) )/(height-j + j);
      int g0= ((255/2)*(height-j) + g*(j) )/(height-j + j);
      int b0= ((255  )*(height-j) + b*(j) )/(height-j + j);
      float d = sqrt( (i-xO)*(i-xO)+(j-yO)*(j-yO));
      if (d>R && d<2*R){
        r0 = ( (d-R)*r0 + (2*R-d) * 255 ) / R;
        g0 = ( (d-R)*g0 + (2*R-d) * 255 ) / R;
        b0 = ( (d-R)*b0 + (2*R-d) * 255*3/4 ) / R;
      }
      pixels[i+j*width] = color(r0, g0, b0);
    }
  }
  updatePixels();
}
 figure 6
Figure 6


Motif de lignes

Proposez un algorithme qui dessine le motif de N lignes dans une fenêtre width*height

  • En parcourant le bord gauche en avançant de haut en bas pour le premier point de la ligne
  • En parcourant le bord du bas en avançant de gauche à droite pour le second point de la ligne 
void draw() {
  float N = 30;
  for(int i=0; i<=N;i++){
    float x = i*width/N;
    float y = i*height/N; // ATTENTION c'est i et pas j ici !
    line (0, y, x, height)
  }
}

Modifiez votre algorithme pour que la progression ne soit pas linéaire mais selon un loi de racine carrée 

void draw() {
  float N = 30;
  for(int i=0; i<=N;i++){
    float x = sqrt(i/N)*width;
    float y = (1.0-sqrt(1.0-i/N))*height; // ATTENTION c'est i et pas j ici !
    line (0, y, x, height);
  }
}

En utilisant le code suivant pour dessiner un polygone gris aux bords noir:

stroke(0);
  fill(128);
  beginShape();
  vertex(x1,y1);
  vertex(x2,y2);
  vertex(x3,y3);
  vertex(x4,y4);
endShape(CLOSE);

Remplacez le dessin de ligne par le dessin d'un polygone couvrant 2 lignes successives du code précédent

void draw() {
  float N = 30;
  for(int i=0; i<=N;i++){
    float x0 = sqrt(i/N)*width;
    float y0 = (1.0-sqrt(1.0-i/N))*height;
    float x1 = sqrt((i+1)/N)*width;
    float y1 = (1.0-sqrt(1.0-(i+1)/N))*height;
    stroke(0);
    fill(128);
    beginShape();
    vertex(0,y0);
    vertex(x0,height);
    vertex(x1,height);
    vertex(0,y1);
    endShape(CLOSE);
  }
}

Utilisez une couleur "gris-transparent" grâce à fill(niveau de gris0-255, transparence0-255); pour faire apparaître les premières lignes/polygones sous les dernières.

utilisez un niveau de gris plus sombre une fois sur deux pour dessiner un dammier

 figure 7A
Figure 7A		 figure 7B
Figure 7B
figure 7C
Figure 7C		 figure 7D
Figure 7D		 
vvoid setup() {
  size(500, 500);
  background(255);
  noLoop();
}
  void draw(){
  float N = 30;
  for(int i=0; i<=N;i++){
    float x0 = sqrt(i/N)*width;
    float y0 = (1.0-sqrt(1.0-i/N))*height;
    float x1 = sqrt((i+1)/N)*width;
    float y1 = (1.0-sqrt(1.0-(i+1)/N))*height;
    stroke(0);
    if (i%2==0)
      fill(128, 128);
    else
      fill(128, 0);
    beginShape();
    vertex(0,y0);
    vertex(x0,height);
    vertex(x1,height);
    vertex(0,y1);
    endShape(CLOSE);
  }
}