Rewrite Example 5-3 so that the squares fade from white to black when the
mouse leaves their area. Hint: you need four variables, one for each rectangle’s color.

Example

exercise_5_6

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Exercise 5-6: Rewrite Example 5-3 so that the squares fade from white to black 
// when the mouse leaves their area. 
// Hint: you need four variables, one for each rectangle's color.

// Four variables, one for each square's brightness level
float bright0 = 0;
float bright1 = 0;
float bright2 = 0;
float bright3 = 0;

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

void draw() { 
  // Draw the background
  background(0); 

  // Depending on the mouse location, a 
  // different rectangle is set to brightness 255
  if (mouseX < 100 && mouseY < 100) { 
    bright0 = 255;
  } 
  else if (mouseX > 100 && mouseY < 100) { 
    bright1 = 255;
  } 
  else if (mouseX < 100 && mouseY > 100) { 
    bright2 = 255;
  } 
  else if (mouseX > 100 && mouseY > 100) { 
    bright3 = 255;
  } 

  // All rectangles always fade
  bright0 = bright0 - 1;
  bright1 = bright1 - 1;
  bright2 = bright2 - 1;
  bright3 = bright3 - 1;

  // Fill color and draw each rectangle
  noStroke(); 
  fill(bright0);
  rect(0,0,100,100); 
  fill(bright1);
  rect(100,0,100,100); 
  fill(bright2);
  rect(0,100,100,100); 
  fill(bright3);
  rect(100,100,100,100); 
  
  // Draw grid lines
  stroke(255); 
  line(100,0,100,200); 
  line(0,100,200,100); 

}
  • Kit

    I can’t work out exactly why this won’t work if the brightness variables are int rather than float.

  • admin

    When you use integers, Processing will read negative numbers as strange colors. So you must make sure you constrain the values to between 0 and 255.

      // All rectangles always fade
  bright0 = constrain(bright0 - 1,0,255);
  bright1 = constrain(bright1 - 1,0,255);
  bright2 = constrain(bright2 - 1,0,255);
  bright3 = constrain(bright3 - 1,0,255);
  • Dave

    Does that mean float values can’t go into negatives? (that would explain why there is no constrain code in the answer?)

  • http://www.learningprocessing.com Daniel Shiffman

    No, floats can absolutely be negative. Processing just constrains the values for you when you pass in a float for brightness into the fill() function and this doesn’t happen with an int.

    It’s probably best to use constrain() in all cases just to be safe.

  • riko

    Hi!

    A differente solution, but I don’t know if it’s better or not to do this.

    float brightA = 0;
    float brightB = 0;
    float brightC = 0;
    float brightD = 0;

    void setup () {
    size(200,200);
    }
    void draw(){
    background(0);
    stroke(255);
    line(0,100,200,100);
    line(100,0,100,200);
    if(mouseX >100 && mouseY >100) {
    brightA = 255;
    }else{
    brightA = brightA – 1;
    }
    if(mouseX > 100 && mouseY <100){
    brightB = 255;
    }else{
    brightB = brightB – 1;
    }
    if(mouseX <100 && mouseY <100) {
    brightC = 255;
    }else{
    brightC = brightC – 1;
    }
    if(mouseX 100){
    brightD = 255;
    }else{
    brightD = brightD – 1;
    }

    fill(brightA);
    rect(100,100,100,100);
    fill(brightB);
    rect(100,0,100,100);
    fill(brightC);
    rect(0,0,100,100);
    fill(brightD);
    rect(0,100,100,100);

    brightA = constrain (brightA,0,255);
    brightB = constrain (brightB,0,255);
    brightC = constrain (brightC,0,255);
    brightD = constrain (brightD,0,255);

    }

  • Leo T Nozawa

    Kit, if u’re using ints try using this:

      if(rec == 0) rec = 1;
      if(rec1 == 0) rec1 = 1;
      if(rec2 == 0) rec2 = 1;
      if(rec3 == 0) rec3 = 1;

    Can’t make work with constrain using int too…