[p5.js] practical exercise - irregular symmetry

Irregular symmetry

 

Drawing process

Although this sentence is a little redundant , But to be honest , I didn't expect to make such a complex effect at first , In short, that is .... It's done unconsciously .

My initial idea is to make four tracks in the horizontal direction , Black and white interval , Form a wonderful visual illusion , Like this .

Maybe the final product looks a little complicated , But in fact, it is just a moving graph composed of many straight lines , So how to make a straight line “ move ” Well ？

The secret is to change the color of the line . In every frame , The color of each line in the figure is changing , And this change goes in a certain direction .

When I try to adjust the color parameters of the brush , Some wonderful color gradient effects come out .

At the beginning, I only set four tracks in the horizontal direction , Later, I added four more tracks in the vertical direction , So an irregular symmetric graph with diagonal lines as symmetry lines was born .

 

Code

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