手绘VS码绘（二）：动态图绘制(码绘使用Processing）

上一篇文章我们讨论并实践了静态图在手绘和码绘的比较，这篇文章我们将继续讨论动态图在手绘和码绘的一些不同之处。
上课的时候老师讲过一个例子，首先让我们来看看这幅动图：
在这里插入图片描述
通过修改程序里的一些参数，我们可以得到许多不同的效果，十分有趣，所以我首先就仿照老师的这个例子的思想，做了一副动图，并对她的参数进行一系列的改变，使得这幅动图呈现出不同得效果。
在此之前，我们先来看看代码和最终的效果：

int num_side = 10;
float t=0.0;
float dt = 0.01;
float x=0;
float y=0;
float osc=0;
float radius = 0;
float rateRatio = 0.75;

void setup()
{
  size(1000,1000);
  fill(0); 
  
  radius = 0.5*width/float(num_side+1);
  frameRate(30);
}

void draw()
{
  t = t + dt;

  background(255);

  for(int i =0; i<num_side; i++)
  {
    for(int j =0; j<num_side; j++)
    {
      fill(0);
       x=float(j)/float(num_side);  
       y=float(i)/float(num_side);
       osc = radius*(sin(TWO_PI *(y+t))+ cos(TWO_PI *(x+t)));
       ellipse(2*(radius+i*radius),2*( radius+j*radius),osc,osc);
    }
  }

  for(int i =0; i<num_side; i++)
  {
    for(int j =0; j<num_side; j++)
    {
       x=float(j)/float(num_side);  
       y=float(i)/float(num_side);
       fill(255);
       osc = 25*(sin(TWO_PI *(y-rateRatio*t))+ cos(TWO_PI *(x-rateRatio*t)));
       ellipse(2*(radius+i*radius),2*( radius+j*radius),osc,osc);
    }
  }
}

效果图：
在这里插入图片描述
首先，我想讲一讲这幅图绘制得思路，最初是仿照老师实例得思想做了一幅动态图，但只是实心的圆在动：

看起来效果还不错，后来想要变得复杂一点，于是想到了将实心的圆改为圆环，于是，在绘制实心圆的基础上，又复制了绘制实心圆的代码，并将填充颜色设置为了白色，这样，就能绘制出圆环了：
在这里插入图片描述
再接下来，就开始修改程序里面的一些参数来观察显示的效果了
第一次，我把radius变大
由原来的：

  radius = 0.5*width/float(num_side+1);

改为了：

  radius = width/float(num_side+1);

于是就出现了下面的效果：
在这里插入图片描述
我们发现，在原有图的基础上，这幅图变为了原来的1/4，并且圆环也增大了；
之后，我又在绘制圆环函数的参数上进行了一些调整：
例如：调整画椭圆函数里的参数：
ellipse();

 osc = radius*(sin(PI *(y+t))+ cos(PI *(x+t)));
       ellipse(2*(radius+i*radius),2*( radius+j*radius),osc,osc);

osc = 25*(sin(PI *(y-rateRatio*t))+ cos(PI *(x-rateRatio*t)));
       ellipse(2*(radius+i*radius),2*( radius+j*radius),osc,osc);

于是就有了下面的效果：
在这里插入图片描述
看起来也还不错，左下角和右上角的部分有“分开”的效果，再调整一下：

osc = radius*(sin(TWO_PI *(y+t))+ cos(TWO_PI *(x+t)));
       ellipse(2*(radius+i*radius),2*( radius+j*radius),osc,osc);

 osc = 25*(sin(TWO_PI *(y-rateRatio*t))+ cos(TWO_PI *(x-rateRatio*t)));
       ellipse(2*(radius+i*radius),2*( radius+j*radius),osc,osc);

于是就有了最终的动态效果:
在这里插入图片描述
其他更多参数的调整、显示就不在这儿一一做展示了，有兴趣的话，可以自己尝试一下，会有很多有趣的意想不到的效果。
做到这儿，相信已经能感受到码绘动图的趣味性了，修改其中一个参数，往往就能呈现出完全不同的效果。
既然我们的话题是《手绘VS码绘》，那我们再来看看痛痒一幅动图，手绘的效果会是什么样的。
先来画一张：
在这里插入图片描述
完全没有动态的感觉…
那就多画几张然后拼起来试试：

稍微有了一些动态的效果，不过看上去效果仍是不太好。
那我们抛开这幅图，来看看手绘的其他的有“动态”效果的手绘作品：

这些手绘作品靠一些绘画的技巧，让我们”觉得“这是动态的。但实际上，仍然是静态图。
那么我们现在就来深入讨论一下《动态图的手绘VS码绘》这个话题：

视觉感受：

首先，我们很容易看出来，码绘的动态图，是实实在在的在“动”的图，所以视觉上，码绘的动态图是最直观的；而手绘的“动态”实际上就是静态图，只不过是利用一些绘画技巧，结合观看者的生活经验，使这些静态图看起来像是在动一样，但这些，如若抛开“生活经验”，是绝对不能看出“动态”效果的。

绘制技巧：

接着上面的视觉感受来说，手绘的动态图使借助于绘画技巧的，是我们的大脑，让我们觉得这幅图是动态的；而相反，码绘的图就完全不会去在意这些，因为码绘的图是实实在在每一秒都在变化的。
在码绘这幅图的时候，一个很明显的技巧就是通过画两组不同填充颜色的圆来达到绘制圆环的效果，并且这是十分容易实现的，只需要复制之前绘制圆的代码，更改填充颜色以及其他一些动态的参数，就可以达到我想要的效果，不经如此，更改这些参数，还可以得到许许多多意想不到的结果。

创作体验：

我从本文章讲到的这两幅图来开始讲创作体验。
一、手绘
从上面讲到的绘图过程可以看到，单是手绘，我是不能画出动态的感觉的，整幅图就只是一堆大小不一样的圆按照一定的规律排列到了一起，即使后面做出来的效果，也是借助了拼接的方式，使得图看起来像是在动一样，若按照这样的方法来手绘动图，就不知道会画多少幅才会做到让人的视觉上看来，确实是连续在动的。
二、码绘
首先来说，就是我整篇文章都有讲到的，码绘动图绘制出来的是一幅真真实实在动的图，每一帧他的图都是不一样的。在创作体验上，码绘和手绘最大的不同之处就在于，码绘中的每一个参数，我只要改动一点，他就可能呈现出我所想不到的效果，这样的好处就在于，我想好的一个方案，如若是用手绘，那么绘制出来的一定和我想得是一模一样的，而使用码绘，我可能最初绘制出来的跟我最初想的是一样的，但我可以通过修改一个小的参数，使得整幅图的效果都产生变换，这样可以激发我创作的灵感，通过各种调整参数，来边绘制边创作，直道达到满意的效果，这样创作出来的图就可能和最初的想法完全不同了。
总的来说，在动图的创作体验上，码绘的体验效果是远超过手绘的，码绘动图在调整参数的过程中是十分有趣的，在我看来这是和手绘枯燥的“复制”脑内想法形成鲜明对比的地方。

综上，在动态图的绘制上，我是偏向于码绘的，因为码绘的方式能通过一些小操作使得整个图完全不一样，这种创作的过程以及带来的惊喜感是手绘完全不可能带给创作者的。

来看看其他码绘的动图吧：
在这里插入图片描述

扫描二维码关注公众号，回复： 4234422 查看本文章

最后，给大家推荐一个不错的网站，上面有很多用Processing绘制的各种各样的动态图，十分有趣：https://www.openprocessing.org/
你可以尝试在这些源代码的基础上修改一些参数，看看会有什么有趣的效果发生。