p5.js复制动态图形实现方法详解

使用p5.js复制一个动态图，并将其展开以供参考。具体内容如下

原始数字

由内向外，白圈半径依次增大，黑圈半径不变；白圈在最后一个白圈相遇前开始增加半径；图中只能有一个循环变化；

复制图形

使用P5.js按照上面的规则进行复制

画12对圆；相邻圆之间的半径差为25；白色圆的半径部分随正弦函数的正值变化，周期为60帧，变化范围为22；相邻白圈运动函数相差13帧；

代码如下：

函数setup() { createCanvas(400，400)；帧率(30)//图形设置为30帧}函数draw(){ background(0)；for(I=12；i0；I-)//有12对圆{ y=22 * sin(pi * frame count/30-13 *(I-1))；//相邻白圈的运动函数相差13帧if(y=0){ a=y；} else { a=0；}填充(255)；椭圆(200，200，a 50 * I)；//白圈填充(0)；椭圆(200，200，25 50 *(I-1))；//黑色圆圈

展开图形

图形向外扩散的感觉是因为相邻白圈相差13帧，改变相位差可以改变视觉效果

函数setup() { createCanvas(400，400)；frame rate(30)}函数draw(){ background(0)；for(I=12；i0；I-){ y=22 * sin(PI * frame count/30-12 *(I-1))；//如果(y=0) {a=y，相位差设置为12；} else { a=0；}填充(255)；椭圆(200，200，a 50 * I)；填充(0)；椭圆(200，200，25 50 *(I-1))；} }

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。