p5.js 2.0绘制一幅动态图像

1.关于码绘实现动态图像的思考

上一次我们实现了用静态图形绘画，这次按照老师的要求和进度，我们需要码绘出一幅动态的画。
最初自己完全没有什么好的点子，无从下手，只好祭出百度，在网上找找有没有什么可以参考的例子。
例子还是一抓一大把，大部分给人的感觉都是下面这种。

用规律的运动实现动态，没错，和我们第一次作品一样，充满了数学的美感(恶意)。
所以这里再插几句题外话：
可能很多人一开始接触码绘都会进入这样一个误区，其实也不能说是误区，应该说是由于经验和创造力不足导致的，代数函数的律动永远是码绘的不可缺少的主题。
但是要实现更加有趣丰富的动态码绘，我觉得需要将数学知识隐藏在码绘的图像背后，达到润物细无声的地步。

2.明确作品类型

我虽然是第一次尝试码绘实现动态图像，但是还是想尝试去实现更有趣(魔性)的作品。
然后又有了新的思考：
(只代表个人观点)
2d码绘其实也是一种动画，抛开码绘不谈，动画一词给我们的第一印象自然是和数学没啥关系，也更加有趣。
于是在下有了一个大胆的想法，用p5.js实现一小段动画。
本着越魔性(哎呀暴露了)越好玩的角度出发，加上这天网易云的日推给我推了一首《NyanCat》，所以聪明的孩子都知道我要做什么了。

噔噔噔彩虹猫！

3.彩虹猫动画的实现

依照惯例，我们还是先上最终效果瞧瞧：
加入了一点交互，可以键盘操作猫上下移动，另外仔细看浏览器标签可以看到有背景音乐播放。

1.接下来代码分析一下，首先从主体开始
这次码绘中，不是所有的效果都是绘制出来的，猫、彩虹、星星以及背景音乐都是需要我们去加载本地资源。
所以我们在setup()，draw()两个函数的基础上，还需要一个preload()来预先加载资源。

function preload() {
   
    resources.rainbowImg[0] = loadImage("asset/rainbow.png");
    for(let i = 0;i < 12; i++)
        resources.catImg[i] = loadImage("asset/cat/cat" + i +".png");
    for(let i = 0;i < 6; i++)
        resources.starImg[i] = loadImage("asset/star/star" + i +".png");
    NyanCatsound = loadSound('asset/NyanCat.mp3');
}

然后接着就是setup（），这里直接让画布的大小为页面大小，设置帧率为30帧（这里是为了让最后动画效果更加贴近原本的像素游戏显示效果，帧数过高会显得有些滑稽）
另外可以看到在setup（）中有进行对象实例化的语句，这个我们稍后再说明。

function setup() {
   
    createCanvas(window.innerWidth,window.innerHeight);
    frameRate(30);
    NyanCatsound.setVolume(0.1);
    NyanCatsound.loop();// BGM loop（）
    // 实例化star和cat对象
    stars = new StarSystem(resources.starImg);
    cat = new NyanCat(resources.catImg, resources.rainbowImg);
}

最后是draw（）函数，除了设置背景颜色为深蓝色贴合原本像素游戏，就是star和car两个实例自带的运行方法了。

function draw() {
   
    background(9, 37, 77);
    stars.run();
    cat.run();
}

我们将这些与变量的定义全部整合进main.js。
如果忽略实例的运行方法，最终效果应该是只有背景色和BGM的空页面。

2.然后我们来实现星星和彩虹的粒子系统
介绍一下粒子系统：
所谓粒子系统，实际上是一种创建和管理大量移动对象的有秩序的机制，可以实现很多的视觉效果。
所以我们就建立一个Particle.js，将粒子系统封装在里面。
首先我们还是需要定义一个Particle类。
里面需要一个b