用编程方式临摹动态图形及拓展

用编程方式临摹动态图形及拓展

编程环境

使用p5.js网页版编程，网址点击这里

要求

观察下图并尝试用编程方式临摹

分析

1、该图形由6*6共36个扇形组成
2、该扇形开口为90°
3、每个扇形呈现周期性的旋转且每次旋转均为90°
4、每次旋转都是变速运动，初步观察为正弦分布
5、每一行扇形图形都与相邻两行同列的扇形旋转方向相反

图形的实现

首先打开p5网页版，将画布大小定为宽600高600像素，刚好一个扇形占用100方形像素的单位

function setup() {
  createCanvas(600, 600);
}

然后画出动图中所示的静态扇形
绘制出圆心（50，50），半径为40，角度为270的扇形

arc(50, 50, 80, 80, radians(-90), radians(180));

这时发现图中的颜色以及背景都和原图不符，于是用ps吸取原图中的背景色和扇形色，得到背景色（38，38，38）和扇形色（220，220，210）（均为r、g、b格式）
接着定义一个时间变量和角度变量，由于之前判断其旋转方式为正弦分布，因此设置的时间变量为sin(x)，后来经过精确计算得出它的旋转规律，将x定为帧率（及一秒钟刷新几次）除以4倍的PI，旋转角度为16分之一乘以sin(x)（单位是弧度）。由于我用了radians，因此要将弧度转为角度，即乘上180除以PI。以下为源代码

  x=frameCount/(4*PI);
  y=sin(x);
  if(y>=0)
  {
    z+=1/16*y*180/PI;
  }

在这之后将之前的扇形函数改为以下所示

arc(50, 50, 80, 80, radians(-90-z), radians(180-z));

扇形开始旋转并且和原图旋转规律相符
最后一葫芦画瓢绘制其余的扇形，结果如下图所示

拓展

多个扇形的整齐排列能有如此美妙的效果，那么将图形从小到大居中排列会是怎样的效果呢？
鉴于之前的时间变换给了我灵感，于是我决定将多个圆形的高宽基于时间进行变换，同时设置了一个循环让它能够在同一时间画出110个圆形，以下为源代码

function setup() {
  createCanvas(400,400);
}

let i=0;
function draw() {
  background(210);
  for(j=0;j<1100;j+=10)
  {
    ellipse(200,200,1200-i-j,10-i-j);
  }
  for(j=0;j<1000;j+=10)
  {
    ellipse(200,200,1100-i-j,10-i-j);
  }
  for(j=0;j<900;j+=10)
  {
    ellipse(200,200,1000-i-j,10-i-j);
  }
  for(j=0;j<800;j+=10)
  {
    ellipse(200,200,900-i-j,10-i-j);
  }
  for(j=0;j<700;j+=10)
  {
    ellipse(200,200,800-i-j,10-i-j);
  }
  for(j=0;j<600;j+=10)
  {
    ellipse(200,200,700-i-j,10-i-j);
  }
  for(j=0;j<500;j+=10)
  {
    ellipse(200,200,600-i-j,10-i-j);
  }
  for(j=0;j<400;j+=10)
  {
    ellipse(200,200,500-i-j,10-i-j);
  }
  for(j=0;j<300;j+=10)
  {
    ellipse(200,200,400-i-j,10-i-j);
  }
  for(j=0;j<200;j+=10)
  {
    ellipse(200,200,300-i-j,10-i-j);
  }
  for(j=0;j<100;j+=10)
  {
    ellipse(200,200,200-i-j,10-i-j);
  }
  
  i+=1;
  if(i==105)
  {i=0;}

}

通过不断地修改 i 的值，最终实现以下效果