Roll-Overs in Processing Language

user_14329503 0
Viewed 35

I am doing a Roll Over Animation.

How will I revert back the color to its original after if fades away when the mouse cursor comes back to the tile?

in my code, the color fades to white then does not come back when I bring back the cursor to the tile

float addColorValue;
boolean clicked = false;

void setup() {
    size(400,400); //pixel size of the program
}
    
void draw() {
    background(255); //setting up the white background
    line(width/2,height,width/2,0); //drawing the vertical line
    line(width,height/2,0,width/2); //drawing the horizontal line
    if(clicked){
        if(mouseX > 200 && mouseY > 200){   // draws the 4th quadrant 
            fill(255,255,addColorValue+=1); rect(200,200,200,200); //draws rectangle
            fill(255); textSize(50); text("4TH", 250, 300); //display which number of the quadrant
        }
        //draws the 3rd quadrant
        else if(mouseX > 0 && mouseY > 200){ 
            fill(addColorValue+=1,addColorValue+=1,255); rect(0,200,200,200);
            fill(255); textSize(50); text("3RD", 50, 300);
        }
        //draws the 2nd quadrant
        else if(mouseX > 200 && mouseY > 0){ 
            fill(addColorValue+=1,255,addColorValue+=1); rect(200,0,200,200);
            fill(255); textSize(50); text("2ND", 250, 100);
        }
        //draws the 1st quadrant
        else if(mouseX > 0 && mouseY > 0){ 
            fill(255,addColorValue+=1,addColorValue+=1); rect(0,0,200,200);
            fill(255); textSize(50); text("1ST", 50, 100);
        }
    } 
    else{
        background(0);
    }
}
    
//switches on and off the lights of the program
void mousePressed() { 
    clicked = !clicked; 
}
processing java
1 Answers

Associate each quad to an index and store the index in a globale variable (quad). Get the index of the current quad (new_quad) and compare it to the quad. If the index has changed, then set addColorValue = 0. This will restart the fading effect:

if (quad != new_quad) {
    quad = new_quad;
    addColorValue = 0;
}

See the example:

float addColorValue;
boolean clicked = false;
int quad = 0;

void setup() {
    size(400,400); //pixel size of the program
}

void draw() {
  
    if (clicked) {
        background(255); //setting up the white background
        line(width/2,height,width/2,0); //drawing the vertical line
        line(width,height/2,0,width/2); //drawing the horizontal line
   
        int new_quad = -1; 
        if (mouseX > 200 && mouseY > 200){   
            new_quad = 0;        
            drawRect("4TH", 200, 200, 200, 200, color(255, 255, addColorValue+=1)); 
        }
        else if(mouseX > 0 && mouseY > 200){ 
            new_quad = 1; 
            drawRect("3RD", 0, 200, 200, 200, color(addColorValue+=1, addColorValue+=1, 255)); 
        }
        else if(mouseX > 200 && mouseY > 0){ 
            new_quad = 2;   
            drawRect("2ND", 200, 0, 200, 200, color(addColorValue+=1, 255, addColorValue+=1)); 
        }
        else if(mouseX > 0 && mouseY > 0) {
            new_quad = 3;   
            drawRect("1ST", 0, 0, 200, 200, color(255, addColorValue+=1, addColorValue+=1)); 
        }
        
        if (quad != new_quad) {
            quad = new_quad;
            addColorValue = 0;
        }
    } 
    else{
        background(0);
    }
}

void drawRect(String text, int x, int y, int w, int h, color c) {
    fill(c); 
    rect(x, y, w, h);
    fill(255); 
    textSize(50); 
    text(text, x+50, y+100);
}

//switches on and off the lights of the program
void mousePressed(){ 
    clicked = !clicked; 
}
user_55777650
Related