p5.js动态图形临摹以及拓展

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/Yuasin18/article/details/102547400

动态图形原图

本次选择临摹图形为该图
在这里插入图片描述

原图分析

可以看出,图形底层由六行六列一共36个圆形组成,每个圆形之间有一定的空隙,并不是完全贴合。每个圆中可以看到有一个黑色的扇形在旋转,扇形一共有两种旋转模式,即顺时针与逆时针。

认真观察后可以发现扇形的旋转速度是符合正弦函数的,而且在每半个正弦周期内扇形旋转的角度是 PI/2,即90°。简单点说就是扇形在转过90°的过程中,速度从0变大再变成0.

代码分析与公式推导

分析

整篇代码值得说的地方不多,临摹中遇到的最困难的问题就是如何实现扇形旋转时速度呈现正弦变换,而且关键在于旋转角度刚好要是90°。实现如上效果其实只需要两行代码,但是涉及到了高数知识,而且刚开始时思路没理清,一直调整不好旋转角度,花了挺多时间。

  c = frameCount/(4*PI);
  angle1 = angle1 + 1/16*abs(sin(c));

画扇形的代码如下

arc(50+200*j,50+200*i,95,95,-angle1,HALF_PI-angle1);

angle1是扇形旋转的角度,这里让角度一直递增,所求关键就在于每次的递增量。

推导

因为想了很久,尝试了很多次都没办法用更简单的数学公式实现同样的功能,所以这里使用了高等数学中微积分的知识,我感觉应该是可以用更简单的方法实现的,若是读者们有思路可以评论区告知一二。
在这里插入图片描述

成果展示

临摹

在这里插入图片描述

拓展作品

拓展1

在这里插入图片描述
在这里只要在arc函数绘制时,将起点与终点的angle1增加方向置反即可。

扫描二维码关注公众号,回复: 7593220 查看本文章
      arc(50+200*j,50+200*i,95,95,-angle1,HALF_PI+angle1); 

拓展2

在这里插入图片描述
在拓展1的基础上,将每组扇形的颜色与frameCount关联即可。

  n = ceil(frameCount)%360; 
  fill(n/2,0,0);

具体函数请参考官方文档 https://p5js.org/reference/

猜你喜欢

转载自blog.csdn.net/Yuasin18/article/details/102547400