【p5.js】实战练习——无规则对称

无规则对称

 

绘制过程

虽然这句话有点多余，不过老实说，我一开始并没想着做出这么复杂的效果，总之就是....就是不知不觉地做出来了。

我的初步构想是在水平方向做四个轨道，黑白间隔，形成奇妙的视觉错觉，像下面这样。

可能最终成品看上去有些复杂，但它实际上只是由许多条直线构成的动图，那么如何让直线“动起来”呢？

秘诀在于直线颜色的改变。在每一帧里，图中每一条直线的颜色都在变化，而且这种变化沿某一个方向进行。

当我尝试调节画笔的颜色参数，一些奇妙的颜色渐变效果就出来了。

刚开始我只设了水平方向的四个轨道，后来我又在竖直方向再添加四个轨道，于是一个以斜线为对称线的无规则对称图诞生了。

 

代码

let a;
let b;
let direction;

function setup() {
    createCanvas(320, 320);
    a = 0;
    b = width;
    direction = true;
    frameRate(50);
}

function draw() {
    a++;
    if (a > width) {
        a = 0;
        direction