绘制过程
虽然这句话有点多余,不过老实说,我一开始并没想着做出这么复杂的效果,总之就是....就是不知不觉地做出来了。
我的初步构想是在水平方向做四个轨道,黑白间隔,形成奇妙的视觉错觉,像下面这样。
可能最终成品看上去有些复杂,但它实际上只是由许多条直线构成的动图,那么如何让直线“动起来”呢?
秘诀在于直线颜色的改变。在每一帧里,图中每一条直线的颜色都在变化,而且这种变化沿某一个方向进行。
当我尝试调节画笔的颜色参数,一些奇妙的颜色渐变效果就出来了。
刚开始我只设了水平方向的四个轨道,后来我又在竖直方向再添加四个轨道,于是一个以斜线为对称线的无规则对称图诞生了。
代码
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);
}