let ctx; let centerX, centerY; let rects = []; let circles = []; let lines = []; let arcs = []; let movers = []; const PALETTES = [ ['#2b46ab', '#ffffff', '#DE183C', '#F2B541', '#4895c2'], ['#FF0095', '#32D5B2', '#4176DD', '#FFD00E', '#FAF9E5'], ['#119da4', '#e8f0ff', '#d00000', '#ffba08', '#574689'], ['#09498f', '#F27DC0', '#f4d35e', '#36ad63', '#dfdfdf'], ['#F54A17', '#F5C204', '#474585', '#F5E5DC', '#1875b8'], ['#F6B140', '#E91E53', '#15B0AF', '#F28184', '#E6E0D9'] ]; let counter = 0; let maxSideLength; let gridRes; function computeGridCounts(base) { let cols, rows; if (width >= height) { cols = max(1, int(base * (width / height))); rows = base; } else { rows = max(1, int(base * (height / width))); cols = base; } return { cols, rows }; } function clearShapeArrays() { rects.length = 0; circles.length = 0; lines.length = 0; arcs.length = 0; } function setup() { createCanvas(windowWidth, windowHeight); rectMode(CENTER); colorMode(HSB, 360, 100, 100, 100); centerX = width / 2; centerY = height / 2; shuffle(PALETTES, true); frameRate(60); gridRes = 10; } function draw() { maxSideLength = max(width, height) * 1.3; let { cols, rows } = computeGridCounts(gridRes); background('#111'); for (let m of movers) { m.run(); } movers = movers.filter(m => !m.isDead); if (movers.length < 300) { generatePattern(width/2, height/2, cols, rows); counter++; } } function windowResized() { resizeCanvas(windowWidth, windowHeight); movers = []; let { cols, rows } = computeGridCounts(gridRes); generatePattern(width/2, height/2, cols, rows); } function generatePattern(x, y, cols, rows) { let cellCountX = cols; let cellCountY = rows; let cellSize = min(width / cellCountX, height / cellCountY); let gridW = cellCountX * cellSize; let gridH = cellCountY * cellSize; let w = max(gridW, gridH); const colors = PALETTES[counter % PALETTES.length]; clearShapeArrays(); for (let i = 0; i < cellCountX; i++) { for (let j = 0; j < cellCountY; j++) { let cellX = x + (i * cellSize) - (gridW / 2) + (cellSize / 2); let cellY = y + (j * cellSize) - (gridH / 2) + (cellSize / 2); let type = int(random(12)); let scaleY = -1; if ((i % 2) == 0) { scaleY = 1; } generateShapes(cellX, cellY, cellSize, scaleY, type, colors); } } let timingRule = counter % 5; let angle = (int(random(4)) * (TAU / 4)) + (PI / 4); let sw = cellSize * 0.035; for (let r of rects) { let t = createTimings(x, y, r.x, r.y, w, timingRule, angle); movers.push(new RectMotion(r.x, r.y, r.w, r.h, r.a, r.clr, t)); } for (let c of circles) { let t = createTimings(x, y, c.x, c.y, w, timingRule, angle); movers.push(new CircleMotion(c.x, c.y, c.d, c.clr, t)); } for (let a of arcs) { let t = createTimings(x, y, a.x, a.y, w, timingRule, angle); movers.push(new ArcMotion(a.x, a.y, a.d, a.as, a.ae, a.clr, t, sw)); } for (let l of lines) { let t = createTimings(x, y, l.x1, l.y1, w, timingRule, angle); movers.push(new LineMotion(l.x1, l.y1, l.x2, l.y2, l.clr, t, sw)); } } function createTimings(x1, y1, x2, y2, w, timingRule, angle) { let t = -int(random(80)); let dst = dist(x1, y1, x2, y2); let nrm = norm(dst, 0, sqrt(sq(w / 2) * 2)); if (timingRule == 1) { t = - int(nrm * 80); } else if (timingRule == 2) { t = - int(80 - (nrm * 80)); } else if (timingRule >= 3) { dst = dist(x1, y1, x2 + (w / 2) * cos(angle), y2 + (w / 2) * sin(angle)); nrm = norm(dst, 0, sqrt(sq(w) * 2)); t = -int(nrm * 80); } return t; } function generateShapes(x, y, w, scl, type, colors) { shuffle(colors, true); let ww = w * 0.1; let a = 0; if (scl == -1) a = PI; switch (type) { case 0: { lines.push({ x1: x - ww * 6, y1: y - ww * 3 * scl, x2: x - ww * 1, y2: y - ww * 3 * scl, clr: colors[0] }); lines.push({ x1: x - ww * 5, y1: y - ww * 5 * scl, x2: x - ww * 5, y2: y - ww * 1 * scl, clr: colors[0] }); lines.push({ x1: x - ww * 3, y1: y - ww * 5 * scl, x2: x - ww * 3, y2: y - ww * 1 * scl, clr: colors[0] }); circles.push({ x: x, y: y + ww * 2 * scl, d: ww * 5, clr: colors[1] }); circles.push({ x: x + ww * 1, y: y + ww * 7 * scl, d: ww * 3, clr: colors[2] }); circles.push({ x: x + ww * 4.5, y: y - ww * 2 * scl, d: ww * 2, clr: colors[3] }); arcs.push({ x: x + ww * 3, y: y - ww * 2 * scl, d: ww * 6, as: -PI / 2, ae: PI / 2, clr: colors[4] }); break; } case 1: { rects.push({ x: x - ww * 4, y: y - ww * 3 * scl, w: ww * 5, h: ww * 3, a: 0, clr: colors[0] }); circles.push({ x: x + ww * 5, y: y - ww * 0.5 * scl, d: ww * 2.5, clr: colors[3] }); circles.push({ x: x + ww * 5, y: y - ww * 3.5 * scl, d: ww * 2.5, clr: colors[3] }); lines.push({ x1: x - ww * 0, y1: y - ww * 1 * scl, x2: x - ww * 0, y2: y + ww * 8 * scl, clr: colors[2] }); lines.push({ x1: x + ww * 2, y1: y - ww * 1 * scl, x2: x + ww * 2, y2: y + ww * 8 * scl, clr: colors[2] }); lines.push({ x1: x - ww * 3, y1: y + ww * 1 * scl, x2: x + ww * 3, y2: y + ww * 1 * scl, clr: colors[4] }); lines.push({ x1: x - ww * 3, y1: y + ww * 3 * scl, x2: x + ww * 3, y2: y + ww * 3 * scl, clr: colors[4] }); break; } case 2: { arcs.push({ x: x - ww * 5.5, y: y - ww * 3 * scl, d: ww * 3, as: a + PI, ae: a + TAU, clr: colors[0] }); arcs.push({ x: x - ww * 2.5, y: y - ww * 3 * scl, d: ww * 3, as: a, ae: a + PI, clr: colors[0] }); rects.push({ x: x + ww * 0, y: y + ww * 2 * scl, w: ww * 5, h: ww * 5, a: 0, clr: colors[1] }); rects.push({ x: x + ww * 5, y: y - ww * 2.5 * scl, w: ww * 3, h: ww * 3, a: 0, clr: colors[2] }); lines.push({ x1: x + ww * 3, y1: y - ww * 0 * scl, x2: x + ww * 7, y2: y - ww * 0 * scl, clr: colors[3] }); lines.push({ x1: x + ww * 0, y1: y + ww * 4 * scl, x2: x + ww * 0, y2: y + ww * 8 * scl, clr: colors[4] }); lines.push({ x1: x + ww * 1.5, y1: y + ww * 4 * scl, x2: x + ww * 1.5, y2: y + ww * 8 * scl, clr: colors[4] }); break; } case 3: { arcs.push({ x: x + ww * 1, y: y - ww * 3 * scl, d: ww * 8, as: a, ae: PI + a, clr: colors[0] }); rects.push({ x: x + ww * 1, y: y + ww * 7 * scl, w: ww * 2.5, h: ww * 2.5, a: 0, clr: colors[1] }); circles.push({ x: x + ww * 6, y: y - ww * 0 * scl, d: ww * 1.5, clr: colors[3] }); circles.push({ x: x + ww * 6, y: y - ww * 2 * scl, d: ww * 1.5, clr: colors[3] }); circles.push({ x: x + ww * 6, y: y - ww * 4 * scl, d: ww * 1.5, clr: colors[3] }); lines.push({ x1: x - ww * 6, y1: y - ww * 3 * scl, x2: x - ww * 2, y2: y - ww * 3 * scl, clr: colors[0] }); lines.push({ x1: x + ww * 1, y1: y + ww * 2 * scl, x2: x + ww * 1, y2: y + ww * 5.5 * scl, clr: colors[2] }); lines.push({ x1: x - ww * 2.5, y1: y + ww * 2 * scl, x2: x + ww * 1, y2: y + ww * 5.5 * scl, clr: colors[2] }); break; } case 4: { circles.push({ x: x - ww * 5, y: y - ww * 3 * scl, d: ww * 3, clr: colors[0] }); rects.push({ x: x + ww * 1, y: y + ww * 4.5 * scl, w: ww * 3, h: ww * 8, a: 0, clr: colors[3] }); rects.push({ x: x + ww * 4, y: y - ww * 2 * scl, w: ww * 1, h: ww * 5, a: 0, clr: colors[4] }); rects.push({ x: x + ww * 6, y: y - ww * 2 * scl, w: ww * 1, h: ww * 5, a: 0, clr: colors[4] }); let a1 = -PI / 2; let a2 = PI / 4; if (scl == -1) { a1 = -PI / 4; a2 = PI / 2; } arcs.push({ x: x - ww * 3.5, y: y - ww * 0.75 * scl, d: ww * 4.5, as: a1, ae: a2, clr: colors[2] }); lines.push({ x1: x + ww * 2, y1: y - ww * 0.25 * scl, x2: x - ww * 2, y2: y - ww * 0.25 * scl, clr: colors[2] }); break; } case 5: { rects.push({ x: x - ww * 6, y: y - ww * 4 * scl, w: ww * 1.5, h: ww * 1.5, a: 0, clr: colors[0] }); rects.push({ x: x + ww * 5, y: y - ww * 3 * scl, w: ww * 2.5, h: ww * 2.5, a: PI / 4, clr: colors[1] }); circles.push({ x: x - ww * 2.5, y: y - ww * 3.3 * scl, d: ww * 2.5, clr: colors[2] }); circles.push({ x: x + ww * 1, y: y + ww * 5 * scl, d: ww * 3.5, clr: colors[3] }); let a1 = PI; let a2 = PI * 1.5; if (scl == -1) { a1 = PI * 0.5; a2 = PI; } arcs.push({ x: x + ww * 3, y: y + ww * 4 * scl, d: ww * 8, as: a1, ae: a2, clr: colors[4] }); lines.push({ x1: x - ww * 5, y1: y - ww * 3 * scl, x2: x + ww * 1, y2: y + ww * 3 * scl, clr: colors[4] }); lines.push({ x1: x + ww * 1, y1: y + ww * 5 * scl, x2: x + ww * 2.5, y2: y + ww * 6.5 * scl, clr: colors[0] }); break; } case 6: { rects.push({ x: x + ww * 0, y: y + ww * 2 * scl, w: ww * 4, h: ww * 4, a: PI / 4, clr: colors[0] }); circles.push({ x: x - ww * 5.5, y: y - ww * 2.5 * scl, d: ww * 2, clr: colors[1] }); circles.push({ x: x - ww * 2.5, y: y - ww * 3.5 * scl, d: ww * 2, clr: colors[1] }); circles.push({ x: x + ww * 5, y: y - ww * 1 * scl, d: ww * 2, clr: colors[3] }); let a1 = -(PI / 2); let a2 = PI; if (scl == -1) { a1 = -PI; a2 = PI / 2; } arcs.push({ x: x + ww * 5, y: y - ww * 1 * scl, d: ww * 3.5, as: a1, ae: a2, clr: colors[0] }); lines.push({ x1: x - ww * 0.5, y1: y + ww * 7 * scl, x2: x + ww * 2.5, y2: y + ww * 7 * scl, clr: colors[2] }); lines.push({ x1: x + ww * 0.5, y1: y + ww * 8 * scl, x2: x + ww * 0.5, y2: y + ww * 5 * scl, clr: colors[2] }); lines.push({ x1: x + ww * 1.5, y1: y + ww * 8 * scl, x2: x + ww * 1.5, y2: y + ww * 4 * scl, clr: colors[2] }); break; } case 7: { circles.push({ x: x + ww * 0, y: y + ww * 2 * scl, d: ww * 5, clr: colors[3] }); circles.push({ x: x + ww * 0, y: y + ww * 2 * scl, d: ww * 2, clr: colors[4] }); circles.push({ x: x + ww * 4, y: y - ww * 4 * scl, d: ww * 1.6, clr: colors[4] }); circles.push({ x: x + ww * 6, y: y - ww * 2 * scl, d: ww * 1.6, clr: colors[4] }); rects.push({ x: x + ww * 1.5, y: y + ww * 6.75 * scl, w: ww * 2, h: ww * 4, a: 0, clr: colors[0] }); rects.push({ x: x - ww * 2, y: y - ww * 4 * scl, w: ww * 1.5, h: ww * 1.5, a: 0, clr: colors[1] }); rects.push({ x: x - ww * 4, y: y - ww * 2 * scl, w: ww * 1.5, h: ww * 1.5, a: 0, clr: colors[1] }); lines.push({ x1: x - ww * 4.5, y1: y - ww * 4.5 * scl, x2: x - ww * 1.5, y2: y - ww * 1.5 * scl, clr: colors[0] }); lines.push({ x1: x + ww * 6, y1: y - ww * 4 * scl, x2: x - ww * 0, y2: y + ww * 2 * scl, clr: colors[1] }); lines.push({ x1: x - ww * 0.25, y1: y + ww * 8.5 * scl, x2: x - ww * 0.25, y2: y + ww * 5.5 * scl, clr: colors[2] }); break; } case 8: { circles.push({ x: x - ww * 2, y: y + ww * 1 * scl, d: ww, clr: colors[0] }); circles.push({ x: x - ww * 2, y: y + ww * 3 * scl, d: ww, clr: colors[0] }); circles.push({ x: x - ww * 5.7, y: y - ww * 3 * scl, d: ww * 2, clr: colors[1] }); circles.push({ x: x + ww * 5, y: y - ww * 1 * scl, d: ww * 3.5, clr: colors[2] }); rects.push({ x: x + ww * 1, y: y + ww * 4 * scl, w: ww * 3, h: ww * 9, a: 0, clr: colors[3] }); rects.push({ x: x + ww * 1, y: y + ww * 1 * scl, w: ww * 2, h: ww * 2, a: 0, clr: colors[4] }); arcs.push({ x: x - ww * 3, y: y - ww * 3 * scl, d: ww * 3, as: 0 + a, ae: PI + a, clr: colors[4] }); arcs.push({ x: x + ww * 5, y: y - ww * 3 * scl, d: ww * 3.5, as: PI + a, ae: TAU + a, clr: colors[0] }); break; } case 9: { rects.push({ x: x - ww * 5.75, y: y - ww * 3 * scl, w: ww * 1.5, h: ww * 3, a: 0, clr: colors[0] }); circles.push({ x: x - ww * 1, y: y + ww * 3 * scl, d: ww * 3, clr: colors[3] }) arcs.push({ x: x + ww * 3, y: y + ww * 3 * scl, d: ww * 4, as: PI / 2, ae: PI * 1.5, clr: colors[2] }); arcs.push({ x: x + ww * 3, y: y + ww * 7 * scl, d: ww * 4, as: PI / 2, ae: PI * 1.5, clr: colors[2] }); arcs.push({ x: x + ww * 5, y: y + ww * 1 * scl, d: ww * 4, as: PI + a, ae: PI * 2 + a, clr: colors[3] }); rects.push({ x: x + ww * 5, y: y - ww * 3 * scl, w: ww * 2.5, h: ww * 2.5, a: PI / 4, clr: colors[0] }); lines.push({ x1: x - ww * 1, y1: y + ww * 1 * scl, x2: x - ww * 5, y2: y - ww * 3 * scl, clr: colors[1] }); lines.push({ x1: x + ww * 1, y1: y + ww * 1 * scl, x2: x - ww * 4, y2: y - ww * 4 * scl, clr: colors[1] }); break; } case 10: { rects.push({ x: x, y: y + ww * 2 * scl, w: ww * 5.5, h: ww * 5.5, a: 0, clr: colors[0] }); circles.push({ x: x, y: y + ww * 2 * scl, d: ww * 3, clr: colors[1] }) circles.push({ x: x - ww * 4, y: y - ww * 3 * scl, d: ww * 3.5, clr: colors[2] }) circles.push({ x: x + ww * 1, y: y + ww * 7 * scl, d: ww * 3.5, clr: colors[3] }) circles.push({ x: x + ww * 5, y: y - ww * 2 * scl, d: ww * 3.5, clr: colors[4] }) break; } case 11: { circles.push({ x: x, y: y + ww * 2 * scl, d: ww * 5.5, clr: colors[0] }) rects.push({ x: x - ww * 4, y: y - ww * 3 * scl, w: ww * 5.5, h: ww * 3.5, a: 0, clr: colors[1] }) rects.push({ x: x + ww * 1, y: y + ww * 7 * scl, w: ww * 3.5, h: ww * 3.5, a: 0, clr: colors[2] }) rects.push({ x: x + ww * 5, y: y - ww * 0.5 * scl, w: ww * 3.5, h: ww * 2, a: 0, clr: colors[3] }) rects.push({ x: x + ww * 5, y: y - ww * 3.5 * scl, w: ww * 3.5, h: ww * 2, a: 0, clr: colors[4] }) break; } default: { } } } function easeInOutQuart(x) { return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2; } function easeOutQuart(x) { return 1 - Math.pow(1 - x, 4); } function easeInQuart(x) { return x * x * x * x; } class CircleMotion { constructor(x, y, d, clr, t) { let r = d * 3 * random([1, 0]); let a = int(random(4)) * (TAU / 4); this.x0 = x; this.x1 = x + r * cos(a); this.currentX = this.x1; this.y0 = y; this.y1 = y + r * sin(a); this.currentY = this.y1; this.currentD = d; this.clr = color(clr); this.maxD = d; this.ratioW = 1; this.ratioH = 1; this.angle = atan2(this.y0 - this.y1, this.x0 - this.x1); this.movingA = random(TAU); this.coin = random([-1, 1]); this.enteringType = int(random(2)); this.movingType = int(random(3)); this.leavingType = int(random(2)); this.timer = t - int(random(30)); this.phase1 = 60; this.phase2 = this.phase1 + int(random(20)) + 30; this.phase3 = this.phase2 + 60; this.phase4 = this.phase3 + int(random(20)) + 30; this.phase5 = this.phase4 + 60; this.isDead = false; this.alph = 100; this.px = this.x; this.py = this.y; if (this.enteringType == 0) { this.alph = 0; } else if (this.enteringType == 1) { this.currentD = 0; } else if (this.enteringType == 2) { this.alph = 0; } else if (this.enteringType == 3) { } else if (this.enteringType == 4) { } } show() { this.clr.setAlpha(this.alph); push(); translate(this.currentX, this.currentY); rotate(this.angle); noStroke(); fill(this.clr); ellipse(0, 0, this.currentD * this.ratioW, this.currentD * this.ratioH); pop(); } update() { this.timer++; if (0 < this.timer && this.timer < this.phase1) { let nrm = norm(this.timer, 0, this.phase1 - 1); if (this.enteringType == 0) { this.alph = lerp(0, 100, easeInOutQuart(nrm)); } else if (this.enteringType == 1) { this.currentD = lerp(0, this.maxD, easeInOutQuart(nrm)); } else if (this.enteringType == 2) { this.alph = int(map(sin(easeInQuart(nrm) * TAU * 6), -1, 1, 2, 0)) * 100; } this.currentX = lerp(this.x1, this.x0, easeInOutQuart(nrm)); this.currentY = lerp(this.y1, this.y0, easeInOutQuart(nrm)); } else if (this.phase2 < this.timer && this.timer < this.phase3) { let nrm = norm(this.timer, this.phase2, this.phase3 - 1); if (this.movingType == 1) { let theta = lerp(0, TAU * this.coin, easeInOutQuart(nrm)) + this.movingA; let r = map(sin(easeInOutQuart(nrm) * PI), 0, 1, 0, 1) * this.maxD * 0.25; this.currentX = this.x0 + r * cos(theta); this.currentY = this.y0 + r * sin(theta); } else if (this.movingType == 2) { this.currentD = lerp(this.maxD, this.maxD * 0.5, easeInOutQuart(nrm)); if (this.timer == this.phase3 - 1) { this.maxD *= 0.5; } } } else if (this.phase4 < this.timer && this.timer < this.phase5) { let nrm = norm(this.timer, this.phase4, this.phase5 - 1); if (this.leavingType == 0) { this.alph = lerp(100, 0, easeInOutQuart(nrm)); } else if (this.leavingType == 1) { this.currentD = lerp(this.maxD, 0, easeInOutQuart(nrm)); } this.currentX = lerp(this.x0, this.x1, easeInOutQuart(nrm)); this.currentY = lerp(this.y0, this.y1, easeInOutQuart(nrm)); } let v = dist(this.currentX, this.currentY, this.px, this.py) / this.maxD; this.ratioW = map(v, 0, 0.5, 1, 2); this.ratioH = map(v, 0, 0.5, 1, 0); this.angle = atan2(this.currentY - this.py, this.currentX - this.px); this.px = this.currentX; this.py = this.currentY; } check() { if (this.phase5 < this.timer) { this.isDead = true; } if ((this.currentX < -this.maxD) || ((width + this.maxD) < this.currentX) || (this.currentY < -this.maxD) || ((height + this.maxD) < this.currentY)) { this.isDead = true; } } run() { this.show(); this.update(); this.check(); } } class RectMotion extends CircleMotion { constructor(x, y, w, h, a, clr, t) { super(x, y, (w + h) / 2, clr, t); this.maxW = w; this.currentW = w; this.maxH = h; this.currentH = h; this.angle = a; this.a0 = a; this.a1 = random([-1, 1]) * PI; if (this.enteringType == 0) { this.alph = 0; } else if (this.enteringType == 1) { this.currentW = 0; this.currentH = 0; } else if (this.enteringType == 2) { this.alph = 0; } } show() { this.clr.setAlpha(this.alph); push(); translate(this.currentX, this.currentY); rotate(this.angle); noStroke(); fill(this.clr); rect(0, 0, this.currentW, this.currentH); pop(); } update() { this.timer++; if (0 < this.timer && this.timer < this.phase1) { let nrm = norm(this.timer, 0, this.phase1 - 1); if (this.enteringType == 0) { this.alph = lerp(0, 100, easeInOutQuart(nrm)); } else if (this.enteringType == 1) { this.currentW = lerp(0, this.maxW, easeInOutQuart(nrm)); this.currentH = lerp(0, this.maxH, easeInOutQuart(nrm)); } this.currentX = lerp(this.x1, this.x0, easeInOutQuart(nrm)); this.currentY = lerp(this.y1, this.y0, easeInOutQuart(nrm)); } else if (this.phase2 < this.timer && this.timer < this.phase3) { let nrm = norm(this.timer, this.phase2, this.phase3 - 1); if (this.movingType == 1) { this.angle = lerp(this.a0, this.a1, easeInOutQuart(nrm)); } else if (this.movingType == 2) { this.currentW = lerp(this.maxW, this.maxW * 0.5, easeInOutQuart(nrm)); if (this.timer == this.phase3 - 1) { this.maxW *= 0.5; } } } else if (this.phase4 < this.timer && this.timer < this.phase5) { let nrm = norm(this.timer, this.phase4, this.phase5 - 1); if (this.leavingType == 0) { this.alph = lerp(100, 0, easeInOutQuart(nrm)); } else if (this.leavingType == 1) { this.currentW = lerp(this.maxW, 0, easeInOutQuart(nrm)); this.currentH = lerp(this.maxH, 0, easeInOutQuart(nrm)); } this.currentX = lerp(this.x0, this.x1, easeInOutQuart(nrm)); this.currentY = lerp(this.y0, this.y1, easeInOutQuart(nrm)); } } } class LineMotion extends CircleMotion { constructor(x1, y1, x2, y2, clr, t, sw) { super(x1, y1, 0, clr, t); this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.centerX = (this.x1 + this.x2) / 2; this.centerY = (this.y1 + this.y2) / 2; this.currentX1 = this.centerX; this.currentY1 = this.centerY; this.currentX2 = this.centerX; this.currentY2 = this.centerY; this.alph = 0; this.enteringType = int(random(2)); this.leavingType = int(random(2)); this.movingType = int(random(3)); this.sw = sw; this.shiftX = 0; this.shiftY = 0; let a = atan2(this.y2 - this.y1, this.x2 - this.x1) + random([0, PI]); let d = dist(this.x1, this.y1, this.x2, this.y2); this.maxShiftX = d * 2 * cos(a); this.maxShiftY = d * 2 * sin(a); if (random() < 0.25) { this.maxShiftX = 0; this.maxShiftY = 0; } let a1 = atan2(this.y1 - this.centerY, this.x1 - this.centerX); let a2 = atan2(this.y2 - this.centerY, this.x2 - this.centerX); let pn = random([-1, 1]) this.exX1 = this.x1 - d * 0.5 * cos(a1) * pn; this.exY1 = this.y1 - d * 0.5 * sin(a1) * pn; this.exX2 = this.x2 - d * 0.5 * cos(a2) * pn; this.exY2 = this.y2 - d * 0.5 * sin(a2) * pn; } show() { this.clr.setAlpha(this.alph); noFill(); stroke(this.clr); strokeWeight(this.sw); line(this.currentX1 + this.shiftX, this.currentY1 + this.shiftY, this.currentX2 + this.shiftX, this.currentY2 + this.shiftY); } update() { this.timer++; this.angle = atan2(this.currentY2 - this.currentY1, this.currentX2 - this.currentX1); if (0 < this.timer && this.timer < this.phase1) { let nrm = norm(this.timer, 0, this.phase1 - 1); this.alph = lerp(0, 100, easeOutQuart(nrm)); this.currentX1 = lerp(this.centerX, this.x1, easeInOutQuart(nrm)); this.currentY1 = lerp(this.centerY, this.y1, easeInOutQuart(nrm)); this.currentX2 = lerp(this.centerX, this.x2, easeInOutQuart(nrm)); this.currentY2 = lerp(this.centerY, this.y2, easeInOutQuart(nrm)); this.shiftX = lerp(this.maxShiftX, 0, easeInOutQuart(nrm)); this.shiftY = lerp(this.maxShiftY, 0, easeInOutQuart(nrm)); } else if (this.phase2 < this.timer && this.timer < this.phase3) { let nrm = norm(this.timer, this.phase2, this.phase3 - 1); if (this.movingType == 1) { this.currentX1 = lerp(this.x1, this.exX1, easeInOutQuart(nrm)); this.currentY1 = lerp(this.y1, this.exY1, easeInOutQuart(nrm)); if (this.timer == (this.phase3 - 1)) { this.x1 = this.exX1; this.y1 = this.exY1; } } if (this.movingType == 2) { this.currentX2 = lerp(this.x2, this.exX2, easeInOutQuart(nrm)); this.currentY2 = lerp(this.y2, this.exY2, easeInOutQuart(nrm)); if (this.timer == (this.phase3 - 1)) { this.x2 = this.exX2; this.y2 = this.exY2; } } } else if (this.phase4 < this.timer && this.timer < this.phase5) { let nrm = norm(this.timer, this.phase4, this.phase5 - 1); this.alph = lerp(100, 0, easeInQuart(nrm)); this.currentX1 = lerp(this.x1, this.centerX, easeInOutQuart(nrm)); this.currentY1 = lerp(this.y1, this.centerY, easeInOutQuart(nrm)); this.currentX2 = lerp(this.x2, this.centerX, easeInOutQuart(nrm)); this.currentY2 = lerp(this.y2, this.centerY, easeInOutQuart(nrm)); this.shiftX = lerp(0, this.maxShiftX, easeInOutQuart(nrm)); this.shiftY = lerp(0, this.maxShiftY, easeInOutQuart(nrm)); } } } class ArcMotion extends CircleMotion { constructor(x, y, d, start, stop, clr, t, sw) { super(x, y, d, clr, t); this.aStart = start; this.aStop = stop; this.currentA = this.aStart; this.alph = 100; this.currentD = d; this.angle = 0; this.movingType = int(random(2)); this.sw = sw; } show() { this.clr.setAlpha(this.alph); noFill(); stroke(this.clr); strokeWeight(this.sw); arc(this.x0, this.y0, this.currentD, this.currentD, this.aStart + this.angle, this.currentA + this.angle); } update() { this.timer++; if (0 < this.timer && this.timer < this.phase1) { let nrm = norm(this.timer, 0, this.phase1 - 1); this.alph = lerp(-20, 100, easeOutQuart(nrm)); this.currentA = lerp(this.aStart, this.aStop, easeInOutQuart(nrm)); } else if (this.phase2 < this.timer && this.timer < this.phase3) { let nrm = norm(this.timer, this.phase2, this.phase3 - 1); if (this.movingType == 1) { this.angle = lerp(0, TAU * this.coin, easeInOutQuart(nrm)); } } else if (this.phase4 < this.timer && this.timer < this.phase5) { let nrm = norm(this.timer, this.phase4, this.phase5 - 1); this.alph = lerp(100, -20, easeInQuart(nrm)); this.currentA = lerp(this.aStop, this.aStart, easeInOutQuart(nrm)); } } }

Ephemeral Shapes