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

  • Alireza

    How about this?

    float a, b, c, d = 255;
    void setup() {
    size(200, 200);
    }
    void draw() {
    background(0);
    if (!(mouseX < 100 && mouseY < 100)) {
    a = a-1;
    }
    if (mouseX < 100 && mouseY 100 && mouseY 100 && mouseY < 100) {
    b = 255;
    }
    if (!(mouseX 100)) {
    c = c-1;
    }
    if (mouseX 100) {
    c = 255;
    }
    if (!(mouseX > 100 && mouseY > 100)) {
    d = d-1;
    }
    if (mouseX > 100 && mouseY > 100) {
    d = 255;
    }
    noStroke();
    fill(a);
    rect(0, 0, 100, 100);
    fill(b);
    rect(100, 0, 100, 100);
    fill(c);
    rect (0, 100, 100, 100);
    fill(d);
    rect(100, 100, 100, 100);
    stroke(255);
    line(100, 0, 100, 200);
    line(0, 100, 200, 100);
    }

  • Fufan Liu

    My solution is a little too complex maybe?

    float c1 = 0;

    float c2 = 0;

    float c3 = 0;

    float c4 = 0;

    int sideLength = 100;

    void setup(){

    size(200, 200);

    }

    void draw(){

    background(255);

    stroke(255);

    //show segments

    line(100, 0, 100, 200);

    line(0, height/2, width, height/2);

    //draw four squares

    fill(c1);

    rect(0, 0, sideLength, sideLength);

    fill(c2);

    rect(width/2, 0, sideLength, sideLength);

    fill(c3);

    rect(0, height/2, sideLength, sideLength);

    fill(c4);

    rect(width/2, height/2, sideLength, sideLength);

    //change square color based on mouse position(with fading effects)

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

    c2 = 255;

    c1–;

    c3–;

    c4–;

    } else if (mouseX 100){

    c3 = 255;

    c2–;

    c1–;

    c4–;

    } else if (mouseX > 100 && mouseY > 100){

    c4 = 255;

    c2–;

    c3–;

    c1–;

    }

    c1 = constrain(c1, 0, 255);

    c2 = constrain(c2, 0, 255);

    c3 = constrain(c3, 0, 255);

    c4 = constrain(c4, 0, 255);

    }

  • Chaos

    hi i wanna ask a question about exercise 5-7, but i cannot find it here. i wanna know why the code below doesn’t work. thanks a lot if you could help me :P

  • shiffman

    Since draw() is called over and over again, as you hold down the mouse the button switches on and off and on and off and on and off very fast. Using an event() function like “mousePressed()” causes the action to be triggered only on the moment when the mouse is pressed.