基于P5的互动式作品

继上一篇用编程对P5中的一些线条和形状进行扩充后，此篇介绍一些更加复杂的动态互动作品。
1.
上面运动的图像由两个部分组成，一个是棍状体，一个是螺旋状体。实现的核心的两个部分是:1.棍状体从外到内越来越窄；2.整体绕固定圆心做匀速圆周运动，且螺旋的角速度比棍状体的角速度要大。
核心代码：

for (var i =1;i < 15; i++) // for循环实现变化的重复
  {
    //其中前三个参数是颜色的RGB值，最后一个参数i实现各个圆形之间的变化
    drawBoll(random(30,250), random(30,250), random(30,250), i);  
    drawBoll2(random(30,250), random(30,250), random(30,250), i); 
  }
  positions.unshift({x:mouseX,y:mouseY});
  positions.splice(numPositions,100);
  translate(width/2,height/2);
  background(0);//每一次都黑色覆盖一次背景
  for(var i=0;i<numSlices;i++){
    drawPoints(positions);
    rotate(360/numSlices);
  }

drawBoll函数用来绘制棍状体，如下：

  fill(r, g, b);
  var x = 250; //圆周运动圆心的x坐标
  var y = 250; //圆周运动圆心的y坐标
  var t = millis() / 4; // 控制旋转速度的参数
  var xChange //圆周运动x坐标变化值
  var yChange; //圆周运动y坐标变化值
  var radius = interval * 10;//圆周运动的半径
  xChange = radius * Math.cos(t * Math.PI/180);
  yChange = radius * Math.sin(t * Math.PI/180); 
  x += xChange;
  y += yChange;
  ellipse(x, y, interval * 3, interval * 3);

螺旋体的绘制与棍状体相比仅仅修改控制旋转速度的参数：

var t = millis() / 2+ interval * 24; //24是两个小球之间间隔的角度

2.
实现小正方形的上下来回运动，并且每一个小正方形的跳动要有一定的时间差，使视觉上呈现依次跳动的感觉。
关键：用sin函数实现时间上下做简谐运动，改变sin前面的振幅和里面的参数就能够做到依次跳动。
核心代码：

   //为小正方形圆角变化做准备
	var t=millis()/400;	
    posY=height*0.46;
    var a=20*sin(t*0.7);
    var b=abs(a);//取绝对值

    //为小正方形上下运动做准备
    var y1=posY+30*sin(t);
    var y2=posY+28*sin(t-1);
    var y3=posY+26*sin(t-2);
    var y4=posY+24*sin(t-3);
    var y5=posY+22*sin(t-4);
    var y6=posY+20*sin(t-5);

    var y11=posY+30*cos(t);
    var y22=posY+28*cos(t-1);
    var y33=posY+26*cos(t-2);
    var y44=posY+24*cos(t-3);
    var y55=posY+22*cos(t-4);
    var y66=posY+20*cos(t-5);

点击中间的小正方形会改变其颜色：

let d = dist(mouseX, mouseY, 360, 200);
  if (d < 100) {
    // Pick new random color values
     r = random(255);
     g = random(255);
     b = random(255);
  }

3.
绘制一个滑稽的笑脸，且鼠标左右移动可以控制眼珠的移动
关键：主要用到了ellipse函数绘制圆和椭圆和arc函数绘制曲线，
核心代码：

      fill(237,148,14);
	  ellipse(x,y,1.06*size);
	  fill(252,222,12);
	  ellipse(x,y,size);//脸
	  
	  fill(173,91,10);
	  arc(x, y, 0.8*size, 0.8*size, 0, PI, CHORD);
	  fill(252,222,12);
	  arc(x, y-0.01*size, 0.8*size, 0.7*size, 0, PI, CHORD);//笑
	  

同时用mouseX的位置来判断眼珠的朝向：

     if(mouseX<200){
	  	fill(173,91,10);
	  	ellipse(x-0.34*size,y-0.28*size,0.1*size);
		ellipse(x+0.16*size,y-0.28*size,0.1*size);//眼珠
	  }
	 else{
	    fill(173,91,10);
	    ellipse(x-0.1*size,y-0.28*size,0.1*size);
	    ellipse(x+0.35*size,y-0.28*size,0.1*size);//眼珠	  	  
	  }	  

实验源代码下载：https://download.csdn.net/download/N0BUGLL/13204670