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); 

}

5 Comments
»

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

    Comment by Kit — July 27, 2009 @ 6:32 am

  2. 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);

    Comment by admin — July 27, 2009 @ 8:35 am

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

    Comment by Dave — January 30, 2010 @ 10:18 am

  4. 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.

    Comment by Daniel Shiffman — January 30, 2010 @ 6:47 pm

  5. 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);

    }

    Comment by riko — February 18, 2010 @ 4:06 pm

Leave a comment