p5.js案例（一）：使用p5js完成动态GIF图片临摹重现

前言

根据互动媒体技术老师的实验要求，临摹了一张GIF动态图，使用p5.js进行重现。
博客里面会有实现逻辑以及实现代码，在最后还会有一张自己实现的扩展图。

原图

实现步骤

规律总结

1、观察图片可以看到，整个图是由两个部分组成的，其中一个是棍状体，一个是螺旋状体。

2、棍状体从外到内越来越窄，整个图形在做绕固定旋转圆心的匀速圆周运动。

3、螺旋状体也是在做绕固定旋转圆心的匀速圆周运动。

4、螺旋状体的旋转角速度比棍状体的旋转角速度大。

具体实现逻辑

为了方便分析，我截取了一个静态的瞬间：

那么怎么实现呢？

我们可以创建两个函数，分别实现棍状体和螺旋体，然后再在draw()函数里面去实现这两个函数即可。

这是棍状体的实现函数：

//圆周运动棍状体绘制函数
function drawBoll(r, g, b, interval)

这是螺旋体的实现函数：

//圆周运动螺旋体的绘制函数
function drawBoll2( r, g, b, interval)

分两个部分来讲：

1、棍状体：其实很简单，我们可以看到静止的棍状体就是由14个小圆形组成的，由外到里半径逐渐减小，然后颜色是赤橙黄绿青蓝紫，赤橙黄绿青蓝紫，每个圆形做的是绕固定圆心的匀速圆周运动。那么，我们的实现就是可以先做一个圆形的匀速圆周运动，其他的圆形，只需要修改一下旋转半径、圆形半径以及颜色就可以了。至于圆周运动怎么实现，我会在后面讲到，往后面看就可以了。

2、螺旋体：螺旋体其实也是一个圆形的重复变换得来的，可以看到的是，螺旋体的每个圆形都一样大，不一样的是什么呢？圆形的颜色和旋转半径，还有的就是他们初始就存在的弧度间隔。那么，我们要做的其实就是画出一个匀速圆周运动的圆形，其它的就可以通过修改参数达到目的。

3、最后一步就是在draw()函数中去实现，我使用了一个for循环去实现：

  for (var i =1;i < 15; i++) // for循环实现变化的重复
  {
   
    //其中前三个参数是颜色的RGB值，最后一个参数i实现各个圆形之间的变化
    drawBoll(139, 0, 255, i);  
    drawBoll2(139, 0, 255, i); 
    i++;
    drawBoll(0, 0, 255, i); 
    drawBoll2(0, 0, 255, i); 
    i++;
    drawBoll(0, 255, 255, i); 
    drawBoll2(0, 255, 255, i); 
    i++;
    drawBoll(0, 255, 0, i); 
    drawBoll2(0, 255, 0, i);
    i++;
    drawBoll(255, 255, 0, i); 
    drawBoll2(255, 255, 0, i); 
    i++;
    drawBoll(255, 165, 0, i); 
    drawBoll2(255, 165, 0, i); 
    i++;
    drawBoll(255, 0, 0, i); 
    drawBoll2(255, 0, 0, i); 
  }

代码实现

关于这个程序，具体的p5.js代码在这里：

//准备画板
function setup() {
   
  createCanvas(1000, 1000);
}

//开始作画
function draw() {
   
  background(50); //背景颜色
  for (var i =1;i < 15; i++) // for循环实现变化的重复
  {
   
    //其中前三个参数是颜色的RGB值，最后一个参数i实现各个圆形之间的变化
    drawBoll(139, 0, 255, i);  
    drawBoll2(139, 0, 255, i); 
    i++;
    drawBoll(0, 0, 255, i); 
    drawBoll2(0