p5.js创意绘图(1)动态图形

利用p5.js临摹一幅动态图形。
原图

分析
看起来像是两个葫芦在转圈，其实每个圆点并没有旋转，只是在以图形中心为原点的射线上来回移动。长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍，且长瘦葫芦上的圆点的初相位与短胖葫芦上的圆点的初相位相差PI。
因此其实就是每个圆点与图形中心距离按正弦函数随时间发生变化，且每个圆点的初相位与其极坐标下（以图形中心为原点）的角度有关。
(△t:时间变量；△θ,:角度变量；max:与图形中心最大距离；min:与图形中心最小距离）
短胖葫芦上的圆点：r1=sin(△t+3/2.0×PI+△θ×2)×(max1-min1)+min1;
长瘦葫芦上的圆点：r2=sin(△t+1/2.0×PI+△θ×2)×(max2-min2)+min2;
(因为每圈圆点拼成的图形（葫芦）有两个头，所以△θ要乘2。)
再利用极坐标与直角坐标的关系：x=rcosθ,y=rsinθ，可计算出每个圆点的直角坐标。
画图
由上述分析可得代码：
先设全局变量rt作为时间变量

var rt=0

再在

draw()

dt=0;
for(i=1;i<=num;i++)//num为一圈上圆点个数
{
r1=sin(rt+3/2.0*PI+dt*2)*(max1-min1)+min1;
r2=sin(2*rt+1/2.0*PI+dt*2)*(max2-min2)+min2;
x1=r1*cos(dt)+400;//图形中心:(400,400)
y1=r1*sin(dt)+400;
x2=r2*cos(dt)+400;
y2=r2*sin(dt)+400;
ellipse(x1,y1,2*r,2*r);
ellipse(x2,y2,2*r,2*r);
line(x1,y1,x2,y2);
dt+=TWO_PI/num;
}
rt+=0.02;

效果图

拓展

1. 形状变化
   （1）改变圆点与图形中心距离的最大/最小值，可以改变整体形状。如将min2调小，可以使长瘦葫芦的两个头相交。
   （2）改变角度变量的变化速度，可以改变每圈圆点拼成图形的头数。如将

   dt*2

   变为

   dt*4

   ，会变成四角星（每圈圆点各四个头）。
2. 颜色变化
   利用

   colorMode()

   函数，可以使圆点颜色按色相环排列。

colorMode(HSB,num);
for(i=1;i<=num;i++)
{
fill(i,num,num);
stroke(i,num,num);
...
}

若再让颜色与时间变量相关，则颜色也能转动。

colorMode(HSB,num);
for(i=1;i<=num;i++)
{
fill((i+rt*50)%num,num,num);
stroke((i+rt*50)%num,num,num);
...
}

3.线交叉
其实这是笔者最开始规律找错的失败版本，但是图形还是挺好看的。基本思路就是圆点绕图形中心旋转，两个葫芦上的圆点沿反方向旋转。

总结
代码和图形两个看起来风马牛不相及的东西却能形成这么有趣的联系，实在神奇。

• 点赞
• 收藏
• 分享
• 文章举报