【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 = !direction;
    }
    if (direction === true) {
        stroke(a , width - a, height - a);
    } else {
        stroke(width - a, height - a, b);
    }
    line(a, 0, a, height / 4);
    line(a, height / 2, a, height - height / 4);
    line(0, a, width / 4, a);
    line(width / 2, a, width - width / 4, a);

    b--;
    if (b < 0) {
        b = width;
    }
    if (direction === true) {
        stroke(width - b, height - b, a);
    } else {
        stroke(b, width - b, height - b);
    }
    line(b, height - height / 4, b, height);
    line(b, height / 4, b, height / 2);
    line(width - width / 4, b, width, b);
    line(width / 4, b, width / 2, b);
}