processing实现动态和交互－屁民科普

processing实现动态和交互－屁民科普

先来说说手绘和码绘的区别
手绘作品：很久之前画的了（我大索隆

手绘与码绘技法的比较

手绘：先绘制出大体的轮廓草稿，然后再细致的绘制，如果在绘画的时候
码绘：随时可以删改，并且非常方便，颜色可随意调配
如果是手绘还是在纸上画的，想要修改颜色可不是那么容易，可能上错了颜色，整个作品就会白做了。忽然想到学建筑的同学给工图描边

编程实现

一开始看了很多的例子，寻找灵感，做了几个小尝试
（因为博主不太会搞动态图，所以这些交互的部分，没有办法看动图233，所以就贴了个图，有点丑陋，想看效果的可以把代码复制，自己运行看看）

尝试1

实现小球围绕鼠标旋转，鼠标点击后，会消失，但实际上我不想做这种效果，还没有改进。因为里面的小球在高速旋转，所以截图太丑了555

还有拖尾的效果，主要的函数是这个
v[i].lerp(mouseX+cos(theta[i])*(rnew[i]),mouseY+sin(theta[i])*(rnew[i]),0,easing[i]);

/*realize circle orbit*/
//10 circles orbit around the center
//(mouseX,mouseY)is center  circles radius different
int num=300;//the number of the circles
int max_r=110;//max orbit radius 
int orbit_range=round(random(50,60));//set orbit range
PVector v[]=new PVector[num];//circles' pos
float n[]=new float[num];//circles 
float theta[]=new float[num];//rotate angle
float rnew[]=new float[num];//a new circle's orbit radius
float r[]=new float[num];//a circle's radius
float theta_gap[]=new float[num];//set a circle's orbit theta
float easing[]=new float[num];
color c[]=new color[num];//each circle's color
boolean mouse_tag=true;//if key pressed tag=false
void setup()
{
//  colorMode(HSB,180,100,255);
  size(600,600);//set a canvan
  for (int i=1;i<=num-1;i++)
  {
    //r[i]=random(1,5);//set circles' radius
    c[i]=color(random(100,200),255,random(180,255));//set color random
    rnew[i]=round(i/100)*(orbit_range/(round(num/100)-1))+(max_r-orbit_range);//one orbit has num/10 circles 
    theta[i]=random(360)*PI/180;//set original circle's theta
    theta_gap[i]=random(72/PI);// set translate theta
   // v[i] = new PVector(mouseX+cos(theta[i])*rnew[i],mouseY+sin(theta[i])*rnew[i]);//set a circle's pos
    v[i] = new PVector(mouseX+cos(theta[i])*rnew[i],mouseY+sin(theta[i])*rnew[i]);//set a circle's pos
    easing[i]=random(0.015,0.7);
    //easing[i]=random(0.02,0.3);
  }
  frameRate(60);
  smooth();
}
void draw()
{
  fill(0,0,0);
  rect(0,0,width,height);
 // pushMatrix();
  noStroke();
  
  if(mouse_tag)
  {
    
    for (int i=1; i<=num-1;i++)
   {
    r[i]=random(1,5);
    fill(c[i]);
    theta[i]+=theta_gap[i];
    //translate(mouseX,mouseY);
    // rotate(theta[i]);
    v[i].lerp(mouseX+cos(theta[i])*(rnew[i]),mouseY+sin(theta[i])*(rnew[i]),0,easing[i]);
    ellipse(v[i].x, v[i].y, r[i],r[i]);
   }
  //popMatrix();
 }
 
 //pressed mouse
  if(!mouse_tag)
  {
   for(int i=1;i<=num-1;i++)
   {
     theta[i]+=theta_gap[i];
     r[i]=random(10,20);//set pressed circles radius
     rotate(theta[i]);
     //translate(mouseX+cos(theta[i]),mouseY+(theta_gap[i]));
     v[i].lerp(mouseX+cos(theta[i]),mouseY+sin(theta[i]),0,easing[i]);
     ellipse(v[i].x,v[i].y,r[i],r[i]);
   }
  }
  
}
void mousePressed()
{
  mouse_tag=!mouse_tag;
}

但后来给同学看，他们非要说我这个像一堆苍蝇，我就再也不想直视他了。。。

尝试2

实现一个类似于星星的连线，可以鼠标移动的位置，距离在60以内就会自己连接起来。