processing怎么做鼠标点击炸开一下然后又还原的动作？

理由
举报 取消

比如几个几何图形有序排列，点击鼠标一下，他们会飞散开来，然后回到原点~这个部分怎么做呢？？？

2017年10月12日 1 条回复 1103 次浏览
用户头像

发起人：乌龙白 初入职场

不专业还在继续挣扎的色彩研究人员

回复 ( 1 )

  1. 鳥仟一·超傑
    鳥仟一·超傑 初入职场
    0
    举报 回复
    理由
    举报 取消

    因为 Processing 的画布是三维的，想得到爆炸效果只需在点击鼠标时简单地重新布置下几何图形的位置就行了。通过 mousePressed 的真值判断鼠标按键是否按下，鼠标按键没有按下就正常绘制图形，鼠标按键有按下就在三维空间打乱它，重新绘制。Processing 的 Examples 里已经自带了一个图片爆炸效果示例：

    这是爆炸前：

    爆炸后：

    这个例子的基本原理就是根据图片的像素点的亮度决定沿垂直于图片方向（z轴）的偏移值，亮度越大像素点的偏移量越大。当然实际绘制时为了视觉效果更好还要将像素点转化为小矩形进行绘制。这个例子不是点击鼠标然后爆炸，而是鼠标位置越靠近右边框爆炸位移量越大，但原理都是一样的。

    不仅仅只是二维图片的爆炸，利用 Processing 的 3D 绘图功能

    爆炸后：

    和 Processing 自带的那个例子相比这个应该更符合题主想要的效果吧。

    附赠程序：

    import processing.opengl.*;
float dx,dy;
float time;
float thetax=0.0, thetay=0.0, thetaz=0.0, tranx=0.0, trany=0.0, tranz=0.0;
boolean sign;
void setup(){
  size(500,400,OPENGL);
  background(255);
  //noStroke();
  colorMode(HSB);
  dx = 20;
  dy = dx;
  time = 0.0;
  rectMode(CENTER);
  //ortho();
  perspective();
}
void draw(){
  time += 0.005;
  translate(width/2, height/2,-200);
  background(255);

  for(float x = -width/2; x<width/2; x+=dx+4){
    for(float y = -height/2; y<height/2; y+=dy+4){
      pushMatrix();
      translate(x,y);
      stroke(170,255,255,24);
      strokeWeight(3);
      noFill();
      rect(0,0,dx+4,dy+4);
      
      noStroke();
      fill(170,255,255,100);
      if (mousePressed){
        thetax = 2*PI*sin(x/10+10*noise(y/100+time+1000));
        thetay = 2*PI*sin(x/10+10*noise(y/100+time+2000));
        thetaz = 2*PI*sin(x/10+10*noise(y/100+time+3000));
        float dr = sqrt(x*x+y*y);
        tranx = (width-dr)/2*(noise(dr+time)-0.5);
        trany = (height-dr)/2*(noise(dr+time+1000)-0.5);
        tranz = (width-dr + height-dr)/1.5*(noise(dr+time+2000));
      }
      translate(tranx,trany,tranz);
      rotateX(thetax);
      rotateY(thetay);
      rotateZ(thetaz);
      box(dx,dy,3);
      popMatrix();
    }
  }
}
void keyPressed(){
  saveFrame("img-####.png");
}

void mouseReleased(){
  tranx = 0.0;
  trany = 0.0;
  tranz = 0.0;
  thetax = 0.0;
  thetay = 0.0;
  thetaz = 0.0;
}

我来回答

Captcha 点击图片更换验证码