滚动(Roll-Overs)在Processing语言中的应用

huangapple go评论70阅读模式
英文:

Roll-Overs in Processing Language

问题

我正在制作一个翻滚动画。

当鼠标光标回到瓦片上时,我将如何将颜色恢复到原来的颜色,以便在淡出时将其颜色淡化?

在我的代码中,颜色会褪变为白色,但当我将光标带回瓦片时颜色不会恢复。

float addColorValue;
boolean clicked = false;

void setup() {
    size(400,400); //程序的像素大小
}
    
void draw() {
    background(255); //设置白色背景
    line(width/2,height,width/2,0); //绘制垂直线
    line(width,height/2,0,width/2); //绘制水平线
    if(clicked){
        if(mouseX > 200 && mouseY > 200){   // 绘制第四象限 
            fill(255,255,addColorValue+=1); rect(200,200,200,200); //绘制矩形
            fill(255); textSize(50); text("4TH", 250, 300); //显示象限编号
        }
        //绘制第三象限
        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);
        }
        //绘制第二象限
        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);
        }
        //绘制第一象限
        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);
    }
}
    
//切换程序的灯光开关
void mousePressed() { 
    clicked = !clicked; 
}
英文:

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

答案1

得分: 2

为每个四分之一区域分配一个索引,并将索引存储在全局变量(quad)中。获取当前四分之一区域的索引(new_quad),并将其与quad进行比较。如果索引发生了变化,则将addColorValue设置为0。这将重新启动淡出效果:

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

查看示例:

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

void setup() {
    size(400,400); //程序的像素大小
}

void draw() {
  
    if (clicked) {
        background(255); //设置白色背景
        line(width/2,height,width/2,0); //绘制垂直线
        line(width,height/2,0,width/2); //绘制水平线
   
        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);
}

//开关程序的灯光
void mousePressed(){ 
    clicked = !clicked; 
}
英文:

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

huangapple
  • 本文由 发表于 2020年10月1日 03:07:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/64144206.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定