互动媒体——动态图形艺术

临摹作品展示：

思路分析

首先看到这张图片，想到的应该就是图形圆的旋转，一种思路是干脆做四分之三个圆，让它们绕自己的中心旋转；另一种思路，就是将圆和底色黑色都作为背景，让各个小正方形绕着他们的顶点旋转。

我选择的方法，是做四分之三个圆，让它们绕自己的中心旋转，这张动图里，相邻的圆旋转的方向都不一样，隔行/隔列的圆形旋转方向则是一样的，所以我用了两个并列的for循环，绘制这些圆。

function drawcircle()
{
  for(var i = 0; i<= 5; i=i+2)
  {
    for(var j = 0; j<= 5;j=j+2)
      arc(37+j*63, 37+i*63, 60, 60, 0, PI+HALF_PI);
  }
  for( var m = 0; m<= 5; m=m+2)
  {
    for(var n = 1; n<= 5;n=n+2)
      arc(37+n*63, 37+m*63, 60, 60, PI+2*QUARTER_PI, HALF_PI+2*QUARTER_PI+2*PI);
  }
  for(var a = 1; a<= 5; a=a+2)
  {
    for(va旋转 b = 0; b<= 5;b=b+2)
      arc(37+b*63, 37+a*63, 60, 60, 2*QUARTER_PI, PI+HALF_PI+2*QUARTER_PI);
  }
  for( var c = 1; c<= 5; c=c+2)
  {
    for(var d = 1; d<= 5;d=d+2)
      arc(37+d*63, 37+c*63, 60, 60, PI, HALF_PI+2*PI);
  }
}

绘制四分之三个圆，我使用的是绘制扇形，再定义它的两个边界。

在上述动图中n，我们可以看到，所有的圆每转90度，就会停顿一下，然后再继续旋转，视觉上，就可以看到它们组成了很多大正方形，而定义好它们的初始位置，也非常关键，所有相邻的圆形，开口方向都不一样，所以有四种不同的边界定义方式。

 arc(37+j*63, 37+i*63, 60, 60, 0, PI+HALF_PI);
 
 arc(37+n*63, 37+m*63, 60, 60, PI+2*QUARTER_PI, HALF_PI+2*QUARTER_PI+2*PI);
 
 arc(37+b*63, 37+a*63, 60, 60, 2*QUARTER_PI, PI+HALF_PI+2*QUARTER_PI);
 
 arc(37+d*63, 37+c*63, 60, 60, PI, HALF_PI+2*PI);

定义好初始位置之后，重要的就是旋转问题。
因为是每隔90度就会有一次停止，而四分之三个圆的画法，是定义边界，p5.js又是可以不断刷新的，所以我只要每一次重画的时候，重新定义圆a弧的边界就可以实现“旋转”。而旋转方向的改变，就由是增量还是减量来控制。

我定义了两个变量，x专门负责圆形边界的定义，y负责判断。

let x = 0;
let y=0;
y+=3*PI/180;
x +=3*PI/180;

可以比较以下图片和上面画静态图像的不同。

function drawcircle()
{
  for(var i = 0; i<= 5; i=i+2)
  {
    for(var j = 0; j<= 5;j=j+2)
      arc(37+j*63, 37+i*63, 60, 60, -x, PI+HALF_PI-x);
  }
  for( var m = 0; m<= 5; m=m+2)
  {
    for(var n = 1; n<= 5;n=n+2)
      arc(37+n*63, 37+m*63, 60, 60, PI+2*QUARTER_PI+x, HALF_PI+2*QUARTER_PI+2*PI+x);
  }
  for(var a = 1; a<u= 5; a=a+2)
  {
    for(var b = 0; b<= 5;b=b+2)
      arc(37+b*63, 37+a*63, 60, 60, 2*QUARTER_PI+x, PI+HALF_PI+2*QUARTER_PI+x);
  }
  for( var c = 1; c<= 5; c=c+2)
  {
    for(var d = 1; d<= 5;d=d+2)
      arc(37+d*63, 37+c*63, 60, 60, PI-x, HALF_PI+2*PI-x);
  }
}

旋转的循环：

if(y<HALF_PI)
  {
    y+=3*PI/180;
    x +=3*PI/180;
    drawcircle();
  }
  
  else   
  {
    y+=3*PI/180;
    drawcircle();
    if(y>PI)
    {
      y=0;
    }

最终成果

拓展

其实我的拓展更多的来源于我实现这个动图的过程中，因为我最初想到的旋转的规律是使用三角函数，因为圆形每隔90度就会停顿，就像三角函数的周期性运动一样。

function drawcircle()
{
  for(var i = 0; i<= 5; i=i+2)
  {
    for(var j = 0; j<= 5;j=j+2)
      arc(37+j*63, 37+i*63, 60, 60, -HALF_PI*cos(x), PI+HALF_PI-HALF_PI*cos(x));
  }
  for( var m = 0; m<= 5; m=m+2)
  {
    for(var n = 1; n<= 5;n=n+2)
      arc(37+n*63, 37+m*63, 60, 60, PI+2*QUARTER_PI+HALF_PI*cos(x), HALF_PI+2*QUARTER_PI+2*PI+HALF_PI*cos(x));
  }
  for(var a = 1; a<= 5; a=a+2)
  {
    for(var b = 0; b<= 5;b=b+2)
      arc(37+b*63, 37+a*63, 60, 60, 2*QUARTER_PI+HALF_PI*cos(x), PI+HALF_PI+2*QUARTER_PI+HALF_PI*cos(x));
  }
  for( var c = 1; c<= 5; c=c+2)
  {
    for(var d = 1; d<= 5;d=d+2)
      arc(37+d*63, 37+c*63, 60, 60, PI-HALF_PI*cos(x), HALF_PI+2*PI-HALF_PI*cos(x));
  }
}

我可以在定义圆弧边界的时候，规定它增加或者减少的速度，以此来达到一种变速的视觉效果。

但是可以看到，因为三角函数是**-1到1的函数，所以圆弧会来回运动。并不只能按照一个方向旋转，于是我又想到了一个办法，就是将三角函数绝对值化，这样它就不会反向旋转**了，并且我还加快了它的变化速度。

但它依旧还是会改变旋转方向，这也是我没有想明白的地方。

总结

其实图形们都有很多规律，我们要善于发现图片中的奥秘。