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,50,PI,HALF_PI+PI);

let t=0;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill();
  strokeWeight(5);
  stroke(255,0,255);
  arc(200,200,50,50,PI+t,PI+HALF_PI+t);
  t=t+0.01*PI;
}

代码实现

  let t=0;
  let k=0;
  let j=0;
  let i=0;
  let a=0;
  let b=0;
  let c=0;
  let d=0;
function setup() {
  createCanvas(400, 400);

}

function draw() {
 
  background(0);
  noFill()
  strokeWeight(6);
  stroke(22,116,188);
  arc(200,200,50,50,PI+t,t);
  stroke(0,164,150);
  arc(200,200,75,75,PI+k,k);
  stroke(129,198,64);
  arc(200,200,100,100,PI+j,j);
  stroke(246,246,0);
  arc(200,200,125,125,PI+i,i);
  stroke(236,91,53);
  arc(200,200,150,150,PI+a,a);
  stroke(234,34,94);
  arc(200,200,175,175,PI+b,b);
  stroke(205,0,205);
  arc(200,200,200,200,PI+c,c);
  stroke(139,0,139);
  arc(200,200,225,225,PI+d,d);

  t=t+0.01*PI;
  k=k+0.02*PI;
  j=j+0.03*PI;
  i=i+0.04*PI;
  a=a+0.05*PI;
  b=b+0.06*PI;
  c=c+0.07*PI;
  d=d+0.08*PI;
}

代码实现的动图：

拓展

通过实现这个动图的临摹，可以在此基础上进行拓展。

实现代码：

let t=0;
function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(255);
  for(i=0;i<400;i=i+25)
  {
   strokeWeight(5);
    noFill();
    stroke(25*i*1,25*i*0.02,25*0.03*i);
    arc(250,250,50+i,50+i,0.01*i,0.4*t); 
  }
  
  for(i=0;i<400;i=i+25)
  {
   strokeWeight(5);
    noFill();
    stroke(2*i*0.25,5*i*0.5,5*0.03*i);
    arc(250,250,50+i,50+i,PI+0.01*i,PI+0.4*t); 
  }
  
  t=t+0.01*PI;
}

体会

有些动图虽然看起来很简单，但是要找到其中的规律，然后再通过代码绘制出来，就比较难。不仅要掌握一定的数学原理，还要有一定的编程能力。一但实现了之后，可以在那基础之上实现很多的变形拓展，在各种调试实现过程中能得到许多有趣的东西。