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
// 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…

  • Marcello2105

    Dan,

    I am new to this, so  my question might seem obvious…

    Why the top left rect does not fade to black, once you had set “bright0 = bright0-1″
    and it only fades when the mouse moves to the next quadrant?

    Thanks

  • shiffman

    The applet thinks the mouse is at (0,0) until the mouse enters the window.

  • Leo Aguiar

    Another way to write it:

    // 4 variables, 1 for each square’s brightnessfloat b0 = 0;float b1 = 0;float b2 = 0;float b3 = 0;void setup() { size(200,200); }void draw() {   background(255);    // Draw lines  line(width/2,0,width/2,height);  line(0,height/2,width,height/2);    // Fade rects  b0 = b0 – 1;  b1 = b1 – 1;  b2 = b2 – 1;  b3 = b3 – 1;    // Fill and draw each rect  fill(b0);  rect(0,0,100,100);  fill(b1);  rect(100,0,100,100);  fill(b2);  rect(0,100,100,100);  fill(b3);  rect(100,100,100,100);    // Mouse location sets full brightness  if (mouseX < 100 && mouseY 100 && mouseY < 100) {    b1 = 255;  }  if (mouseX 100) {    b2 = 255;  }  if (mouseX > 100 && mouseY > 100) {    b3 = 255;  }  }

    Is it ok to write it using just ifs like that? Or is using else ifs more proper?

  • shiffman

    There’s no real reason why you *must* use an “else if” but since the conditions are mutually exclusive (the mouse can’t be over more than one square at a time) I think else if makes more sense.

  • leManou

    How about this?

    int a,b,c,d = 0 ;

    void setup(){

    size(200,200);

    }

    void draw(){

    background(255);

    stroke(0);

    line(100,0,100,200);

    line(0,100,200,100);

    noStroke();

    if((mouseX<=100) && (mouseY<=100)){

    fill(0,0,0,a);

    rect(0,0,100,100);

    a=a+1;

    b=b-1;

    c=c-1;

    d=d-1;

    }else if((mouseX<=200) && (mouseY<=100)){

    fill(0,0,0,b);

    rect(100,0,100,100);

    a=a-1;

    b=b+1;

    c=c-1;

    d=d-1;

    }else if((mouseX<=100) && (mouseY<=200)){

    fill(0,0,0,c);

    rect(0,100,100,100);

    a=a-1;

    b=b-1;

    c=c+1;

    d=d-1;

    }else if((mouseX<=200) && (mouseY<=200)){

    fill(0,0,0,d);

    rect(100,100,100,100);

    a=a-1;

    b=b-1;

    c=c-1;

    d=d+1;

    }

    a=constrain(a,0,255);

    b=constrain(b,0,255);

    c=constrain(c,0,255);

    d=constrain(d,0,255);

    }

  • Donald Clark

    int r = 0;
    int g = 0;
    int b = 0;
    int a = 0;
    void setup(){
    size(200,200);
    }
    void draw(){
    background(255);
    stroke(0);
    line(100,0,100,200);
    line(0,100,200,100);
    if( mouseX <100 && mouseY0 && mouseY>0 ) {
    noStroke();
    fill(r = r+1);
    rect(0,0,100,100);
    }
    if (mouseX > 100 && mouseX 0 && mouseY<100 ){
    noStroke();
    fill(g = g -g);
    rect(100,0,100,100);
    }
    else if (mouseX 0 )
    noStroke();
    fill(g = g+1);
    rect(100,0,100,100);
    if (mouseX 100){
    fill(b = b – b);
    rect(0,100,100,100);
    }
    else if (mouseX 0)
    {
    fill(b = b+1);
    rect(0,100,100,100);
    }
    if (mouseX > 100 & mouseY > 100){
    fill(a = a-a);
    rect (100,100,100,100);
    }
    else if (mouseX0){
    fill (a = a+1);
    rect(100,100,100,100);
    }
    else {
    background(255);
    stroke(0);
    line(100,0,100,200);
    line(0,100,200,100);
    }
    a = constrain(a,0,255);
    b =constrain(b,0,255);
    g = constrain(g,0,255);
    r = constrain(r,0,255);
    }

  • Mikas

    float a = 255;
    float b = 255;
    float c = 255;
    float d = 255;

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

    void draw() {
    background(0);
    stroke(255);
    line(0, width/2, height, width/2);
    line(width/2, 0, width/2, height);

    // top left rectangle
    if (mouseX < 100 && mouseY 0 && mouseY > 0) {
    fill(a = a – 1);
    rect(0, 0, 100, 100);
    }

    //top right rectangle
    if(mouseX > 100 && mouseY < 100) {
    fill(b);
    rect(100, 0, 100, 100);
    b = 255;
    } else if (mouseX 0) {
    fill(b = b – 1);
    rect(100, 0, 100, 100);
    }

    // bottom left
    if (mouseX 100) {
    fill(c);
    rect(0, 100, 100, 100);
    c = 255;
    } else if (mouseX < 200 && mouseY 100 && mouseY > 100) {
    fill(d);
    rect(100, 100, 100, 100);
    d = 255;
    } else if (mouseX > 0 && mouseY > 0) {
    fill(d = d – 1);
    rect(100, 100, 100, 100);
    }
    }

  • Vanessa

    Why doesn’t this work, but most of all why-oh-why do my squares turn yellow??!! How strange!!

    int a=255;
    int b=255;
    int c=255;
    int d=255;

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

    void draw() {
    background(0);
    stroke(255);
    line(0,100,200,100);
    line(100,0,100,200);

    if (mouseX<100 && mouseY100 && mouseY<100) {
    fill(b);
    rect(100,0,100,100);
    } else if (mouseX100) {
    fill(c);
    rect(0,100,100,100);
    } else if (mouseX>00 && mouseY>100) {
    fill(d);
    rect(100,100,100,100);
    }
    a=a-1;
    b=b-1;
    c=c-1;
    d=d-1;
    }

  • Vanessa

    ok, i just saw your comments at the bottom of the page and I understand why my squares turned yellow, so I changed int to float, and now the squares are faintly white at the beginning then stay black. Why?

  • Kit

    why it doesn’t work this way?

    float rec0=0;
    float rec1=0;
    float rec2=0;
    float rec3=0;
    void setup(){
    size(200,200);}
    void draw(){
    background(0);
    if(mouseX<100&&mouseY100&&mouseY<100){rec1=255;fill(rec1); rect(100,0,100,100);rec1=rec1-1;}
    else if(mouseX100){rec2=255;fill(rec2);rect(0,100,100,100); rec2=rec2-1;}
    else if(mouseX>100&&mouseY>100){rec3=255;fill(rec3);rect(100,100,100,100); rec3=rec3-1;}
    }

  • TIN

    this is my code

    int top_left_square_color;

    int top_right_square_color;

    int bottom_left_square_color;

    int bottom_right_square_color;

    void setup(){

    size(200,200);

    rectMode(CORNERS);

    noStroke();

    top_left_square_color=255;

    top_right_square_color=0;

    bottom_left_square_color=0;

    bottom_right_square_color=0;

    }

    void draw(){

    //background(255);

    fill(top_left_square_color);

    rect(0,0,width/2-1,height/2-1);

    fill(top_right_square_color);

    rect(width/2+1,0,width,height/2-1);

    fill(bottom_left_square_color);

    rect(0,height/2+1,width/2-1,height);

    fill(bottom_right_square_color);

    rect(width/2+1,height/2+1,width,height);

    top_left_square_color–;

    top_left_square_color=constrain(top_left_square_color,0,255);

    top_right_square_color–;

    top_right_square_color=constrain(top_right_square_color,0,255);

    bottom_left_square_color–;

    bottom_left_square_color=constrain(bottom_left_square_color,0,255);

    bottom_right_square_color–;

    bottom_right_square_color=constrain(bottom_right_square_color,0,255);

    if ((mouseX>=0)&&(mouseX=0)&&(mouseY=width/2)&&(mouseX=0)&&(mouseY=0)&&(mouseX=height/2)&&(mouseY=width/2)&&(mouseX=height/2)&&(mouseY<=height))

    bottom_right_square_color=255;

    }

  • pedro

    One would think that, when first launched NONE of the squares would be white, since none were moused over. Is the default for mouseX and mouseY 0?

  • shiffman

    that’s exactly right.

  • penis bastard

    thanks this code really helped me