p5.js新手上路第一关——动图临摹+拓展

p5.js实现对动图的临摹

准备临摹的动图

利用软件对动图的各帧进行分析保存

观察分析

利用电脑上的看图软件，将动图的每一帧都保存下来，然后对动图规律进行观察，得到以下结论：
1、整个图形是由八个半径不同的半圆弧组成的。
2、圆弧的速度由中间向外依次递增。
3、观察上面的其中一帧图片，发现每两个相邻的半圆弧之间相差三十度。
4、在运动的过程中，半圆弧始终保持半圆，并没有随着时间的运动而改变形状。
5、颜色也依次在变化。

实现的主要思路：

1、半圆弧可以通过arc(x,y,r,r,sAngle,eAngle,counterclockwise);
参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true =

2、arc()函数画出的是一个填充的扇形，为了获得圆弧，可以利用noFill()函数拒绝arc()函数的填充，获取圆弧

3、可以通过strokeWeight()来改变获取圆弧的宽度。

4、实现

arc(200,200,50,50,PI,HALF_PI+PI);

noFill();
arc(200,200,50,50,PI,HALF_PI+PI);

noFill();
strokWeight(5);
arc(200,200,50,50,PI,HALF_PI+PI);

noFill();
strokeWeight(5);
stroke(255,0,255);//改变圆弧的颜色
arc(200,200,50,5