Processing 高效控制管理图形方法(二)

CSDN博客站点·同文地址: http://blog.csdn.net/fddxsyf123/article/details/70992924

上节介绍了基本管理变换参数的方法，这节继续升入。

首先看这样一个例子：

void setup()  
{  
  size(600, 600);  
  frameRate(60);  
  smooth();  
}  
  
void draw()  
{  
  background(250);  
    
  Draw_Ellipse(width/2,height/2,0,100);  
    
  pushMatrix();  
  translate(width/2,height/2);  
  rotate(radians(frameCount));  
  Draw_Ellipse(100,0,0,60);  
  popMatrix();  
    
  pushMatrix();  
  translate(width/2,height/2);  
  rotate(radians(-frameCount));  
  Draw_Rect(200,0,frameCount*2,60);  
  popMatrix();  
}  
  
void Draw_Ellipse(float x, float y, int v, int r)  
{  
  pushMatrix();  
  translate(x, y);  
  rotate(radians(v));  
  ellipse(0, 0, r, r);  
  popMatrix();  
}  
  
void Draw_Rect(float x, float y, int v, int r)  
{  
  pushMatrix();  
  translate(x, y);  
  rotate(radians(v));  
  rectMode(CENTER);  
  rect(0, 0, r, r);  
  popMatrix();  
}

也就是说，变换的属性是可以被继承的,也就是数值叠加。熟悉三维软件的读者都会习惯采用层级关系管理场景，并且应用层级的变换属性继承关系可以制作变幻多端的动画。如上例子所示的如行星公转自转的例子。当然三维渲染更能体验其方便之处。

OK！咱再做一个小例子。

float y1;  
float y2;  
float y3;  
float y4;  
float y5;  
float t1;  
float t2;  
float t3;  
float t4;  
float t5;  
void setup()  
{  
  size(500, 500);  
}  
  
void draw()  
{  
  background(0);  
  Draw_Button();  
}  
void Draw_Button()  
{  
  {  
    t1 ++;  
    t2 ++;      
    t3 ++;  
    t4 ++;      
    t5 ++;  
    t1 = constrain(t1, 0, 60);  
    t2 = constrain(t2, 0, 60);  
    t3 = constrain(t3, 0, 60);  
    t4 = constrain(t4, 0, 60);  
    t5 = constrain(t5, 0, 60);  
    y1 = easeInOut_Expo(t1, 0, 400, 60);  
    y2 = easeInOut_Expo(t2, 0, 400, 60);  
    y3 = easeInOut_Expo(t3, 0, 400, 60);  
    y4 = easeInOut_Expo(t4, 0, 400, 60);   
    y5 = easeInOut_Expo(t5, 0, 400, 60);  
  }  
  
  pushMatrix();  
  translate(0, y1);  
  rect(width/5*0, 0, 100, 100);  
  popMatrix();  
  pushMatrix();  
  translate(0, y2);  
  rect(width/5*1, 0, 100, 100);  
  popMatrix();  
  pushMatrix();  
  translate(0, y3);  
  rect(width/5*2, 0, 100, 100);  
  popMatrix();  
  pushMatrix();  
  translate(0, y4);  
  rect(width/5*3, 0, 100, 100);  
  popMatrix();  
  pushMatrix();  
  translate(0, y5);  
  rect(width/5*4, 0, 100, 100);  
  popMatrix();  
}  
void mousePressed()  
{  
  if (overRect(width/5*0, 0, 100, 500))  
  {  
    t1 = 0;  
  } else if (overRect(width/5*1, 0, 100, 500))  
  {  
    t2 = 0;  
  } else if (overRect(width/5*2, 0, 100, 500))  
  {  
    t3 = 0;  
  } else if (overRect(width/5*3, 0, 100, 500))  
  {  
    t4 = 0;  
  } else if (overRect(width/5*4, 0, 100, 500))  
  {  
    t5 = 0;  
  }  
}  
  
boolean overRect(int x, int y, int width, int height) {  
  //rect(x, y, width, height);  
  if (mouseX >= x && mouseX <= x+width &&   
    mouseY >= y && mouseY <= y+height) {  
    return true;  
  } else {  
    return false;  
  }  
}  
  
float easeInOut_Expo(float t, float b, float c, float d) {  
  if (t==0) return b;  
  if (t==d) return b+c;  
  if ((t/=d/2) < 1) return c/2 * pow(2, 10 * (t - 1)) + b;  
  return c/2 * (-pow(2, -10 * --t) + 2) + b;  
}

可以看到采用此方法控制动画条理相当清晰，每个图形都有自己的位置参数，同时被translate函数控制着位置偏移。当鼠标点击时改变translate()其参数值便可得到动画效果。读者可以借鉴这种控制思路。

FEATURED TAGS

FRIENDS