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

淡淡的烟草味﹌ 2023-06-08 06:51 7阅读 0赞

![20191017161622626.gif][] 无规则对称

###  ###

# 绘制过程 #

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhMWZfQXdha2U_size_16_color_FFFFFF_t_70][]

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

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

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

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

# 代码 #

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);
    }

[20191017161622626.gif]: /images/20230531/ac31991da3f740028500098aebba452d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhMWZfQXdha2U_size_16_color_FFFFFF_t_70]: /images/20230531/03f49afbbd1d41579830d2550d12ac7a.png