let lines = []; let fr=0; function setup() { createCanvas(1080, 1080); strokeCap(PROJECT); INIT(); } function draw() { background(255); for (let i of lines) { i.show(); i.move(); } // if(frameCount % (60 * 8) == 0){ if(frameCount % (60 * 8) == 0){ fr = 0; INIT(); } fr++; } function INIT(){ let n = 15; let w = width / n; lines = []; for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { let x = i * w; let y = j * w; if ((i * j) % 2 != 0) { lines.push(new Form(x, y, w, 0)); lines.push(new Form(x + w, y, w, 1)); lines.push(new Form(x + w, y + w, w, 2)); lines.push(new Form(x, y + w, w, 3)); } } } } function easeInOutQuart(x) { return x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2; } class Form { constructor(x, y, l, drct) { this.x = x; this.y = y; this.l = l; this.ang = drct * (TAU / 4); this.t = 0; this.t1 = 60; this.t2 = this.t1 + 0; this.t3 = this.t2 + 60; this.offset0 = 0; this.offset1 = this.l; this.offset = 0; this.fr = 0; } show() { push(); translate(this.x, this.y); rotate(this.ang); strokeWeight(10); line(this.offset, 0, this.l + this.offset, 0); pop(); } move() { if (0 <= this.t && this.t < this.t1) { let amt = norm(this.t, 0, this.t1 - 1); this.offset = lerp(this.offset0, this.offset1, easeInOutQuart(amt)); } else if (this.t1 <= this.t && this.t < this.t2) { } else if (this.t2 <= this.t && this.t < this.t3) { let amt = norm(this.t, this.t2, this.t3 - 1); this.offset = lerp(this.offset1, this.offset0, easeInOutQuart(amt)); } if (this.t > this.t3) { if (fr < (60 * 6)) { this.t = -int(random(3)) * 20; // this.fr = 0; } } this.t++; // this.fr++; } }

Lines