/** * p5js 2.2.3 */ p5.disableFriendlyErrors = true; // NEORT 8950px x 1080px const W = 4475; const H = 540; const fps = 60; const fullSize = true; function setup() { if(fullSize){ createCanvas(8950, 1080); }else{ createCanvas(W, H); } frameRate(fps); colorMode(RGB, 255, 255, 255); _mySetup(); } function draw() { scale(width / W, height / H); _myDraw(); } //=====================================================================================================// const BG = "#0B001E"; const palette = ["#FF369B", "#FFD358", "#C45CFB", "#6EE394"]; const gd = 65; const margin = 3; let dimX, dimY; let scl_w, scl_h, scl; let len; let positions = []; let currWorld = []; let things = []; let prevWorld = []; const MAX_STEPS = 5; const dirs = [ [-1, 0], [1, 0], [0, 1], [0, -1], ]; let MIN_count; let now; let prevSecond; let selected_things = []; let selected_things_2 = []; let m = []; const STATE = { IDLE: "IDLE", MOVING: "MOVING", SPAWNING: "SPAWNING", DYING: "DYING", }; const SPAWN_SIDES = ["LEFT", "RIGHT", "TOP", "BOTTOM"]; const SPAWN_DIRS = { LEFT: { x: -1, y: 0 }, RIGHT: { x: 1, y: 0 }, TOP: { x: 0, y: -1 }, BOTTOM: { x: 0, y: 1 }, }; function Initialize() { prevWorld = new Array(len).fill(null); for (let n = 0; n < len; n++) { if (random(1) > 0.55) { let thing = new Thing(n); currWorld[n] = thing; things.push(thing); } else { currWorld[n] = null; } } if (things.length < MIN_count) { let emptyIndices = []; for (let k = 0; k < len; k++) { if (currWorld[k] === null) { emptyIndices.push(k); } } shuffle(emptyIndices, true); let num_Remain = min(MIN_count - things.length, emptyIndices.length); for (let k = 0; k < num_Remain; k++) { let n = emptyIndices[k]; let thing = new Thing(n); currWorld[n] = thing; things.push(thing); } } } function getNewWorld() { let arr = []; for (let n = 0; n < len; n++) { arr[n] = random(1) > 0.5 ? new Thing(n) : null; } let count_thing = arr.filter((thing) => thing !== null).length; if (count_thing < MIN_count) { let emptyIndices = []; for (let k = 0; k < len; k++) { if (arr[k] === null) { emptyIndices.push(k); } } shuffle(emptyIndices, true); let num_Remain = min(MIN_count - count_thing, emptyIndices.length); for (let k = 0; k < num_Remain; k++) { let n = emptyIndices[k]; arr[n] = new Thing(n); } } return arr; } function _mySetup() { dimX = floor(W / gd); dimY = floor(H / gd); scl_w = (W - 2 * margin) / dimX; scl_h = (H - 2 * margin) / dimY; scl = min(scl_w, scl_h); len = dimX * dimY; MIN_count = floor(0.4 * len); for (let n = 0; n < len; n++) { const x = margin + (n % dimX) * scl_w + 0.5 * scl_w; const y = margin + floor(n / dimX) * scl_h + 0.5 * scl_h; positions[n] = createVector(x, y); } now = Date.now(); Initialize(); prevSecond = new Date(now).getSeconds(); for (let lv = 0; lv < 2; lv++) { m[lv] = map(lv, 0, 1, -1, 1, true) * scl * 0.02; } rectMode(CENTER); strokeCap(ROUND); strokeJoin(ROUND); } function _myDraw() { background(BG); now = Date.now(); let currentSecond = new Date(now).getSeconds(); let currentMinute = new Date(now).getMinutes(); if (currentSecond !== prevSecond) { shuffle(things, true); if (currentMinute === 0 && currentSecond === 0) { prevWorld = new Array(len).fill(null); for (let thing of things) { if (thing.state !== STATE.MOVING) { prevWorld[thing.currentIdx] = thing; } } currWorld = getNewWorld(); for (let thing of things) { if (thing.state === STATE.MOVING) { thing.claimCells([thing.currentIdx, ...thing.path]); } } for (let n = 0; n < len; n++) { if (currWorld[n] && currWorld[n].state === STATE.MOVING) continue; let past = prevWorld[n]; let present = currWorld[n]; if (past && present) { past.claimCells([n]); past.beginRefresh(); } else if (!past && present) { things.push(present); } else if (past && !present) { past.beginDying(); } } } else { selected_things_2 = []; for (let thing of things) { if (selected_things_2.length >= currentMinute) break; if (thing.active) continue; selected_things_2.push(thing); } for (let thing of selected_things_2) { thing.beginRefresh(); } } shuffle(things, true); let candidates = things.filter((thing) => thing.state === STATE.IDLE); shuffle(candidates, true); selected_things = []; for (let thing of candidates) { if (selected_things.length >= currentSecond) break; let i = thing.currentIdx % dimX; let j = floor(thing.currentIdx / dimX); shuffle(dirs, true); let canMove = false; for (let dir of dirs) { if (canMove) break; let path = []; for (let steps = 1; steps <= MAX_STEPS; steps++) { let col_idx = i + steps * dir[0]; let row_idx = j + steps * dir[1]; if (col_idx < 0 || col_idx >= dimX || row_idx < 0 || row_idx >= dimY) break; let idx = col_idx + row_idx * dimX; if (currWorld[idx] !== null) break; path.push(idx); } if (path.length > 0) { thing.beginMove(path); canMove = true; } } if (canMove) { selected_things.push(thing); } } prevSecond = currentSecond; } for (let thing of things) { thing.updateMotion(); thing.updateMorph(); thing.show(); } things = things.filter((thing) => !thing.dead); } //=================================================================================================// function ease(x, p) { return 1 - pow(1 - x, p); } class Thing { constructor(n) { this.currentIdx = n; this.targetIdx = null; this.path = []; this.duration = 1000; this.pos = positions[n]; this.colorIdx_2 = this.getColorIdx(); this.selector_2 = this.getNewShape(); this.state = STATE.SPAWNING; this.snap = null; this.snap2 = null; this.active = false; this.dead = false; this.init_2(); this.colorIdx_1 = -1; this.selector_1 = -1; this.active = true; this.snap2 = now; } getColorIdx() { let prev = this.colorIdx_1; let next; do { next = floor(random(palette.length)); } while (prev === next); return next; } getNewShape() { let prev = this.selector_1; let next; do { next = floor(random(9)); } while (prev === next); return next; } init_2() { this.px1 = 0; this.py1 = 0; this.w1 = scl_w; this.h1 = scl_h; this.spawn = random(SPAWN_SIDES); const d = SPAWN_DIRS[this.spawn]; this.px2 = 0.5 * d.x * scl_w; this.py2 = 0.5 * d.y * scl_h; this.w2 = d.x !== 0 ? 0 : scl_w; this.h2 = d.y !== 0 ? 0 : scl_h; this.px1_ = this.px1; this.py1_ = this.py1; this.w1_ = this.w1; this.h1_ = this.h1; this.px2_ = this.px2; this.py2_ = this.py2; this.w2_ = this.w2; this.h2_ = this.h2; } claimCells(indices) { for (const idx of indices) { currWorld[idx] = this; } } releaseCells(indices) { for (const idx of indices) { if (currWorld[idx] === this) { currWorld[idx] = null; } } } beginMove(path) { this.targetIdx = path[path.length - 1]; this.path = path; this.state = STATE.MOVING; this.snap = now; this.claimCells(path); } finishMove() { this.releaseCells([this.currentIdx, ...this.path]); this.claimCells([this.targetIdx]); this.currentIdx = this.targetIdx; this.targetIdx = null; this.path = []; this.snap = null; this.state = STATE.IDLE; } beginDying() { if (this.state === STATE.MOVING) { this.finishMove(); } this.state = STATE.DYING; this.active = true; this.snap2 = now; this.colorIdx_1 = this.colorIdx_2; this.selector_1 = this.selector_2; this.colorIdx_2 = -1; this.selector_2 = -1; } beginRefresh() { this.active = true; this.snap2 = now; } updateMotion() { if (this.state !== STATE.MOVING) { this.pos = positions[this.currentIdx]; return; } let fromPos = positions[this.currentIdx]; let targetPos = positions[this.targetIdx]; let t1 = (now - this.snap) / this.duration; let amt1 = constrain(ease(t1, 3), 0, 1); this.pos = p5.Vector.lerp(fromPos, targetPos, amt1); if (t1 >= 1) this.finishMove(); } updateMorph() { if (!this.active) return; let t2 = (now - this.snap2) / this.duration; let amt2 = constrain(ease(t2, 5), 0, 1); const d = SPAWN_DIRS[this.spawn]; const offX = -0.5 * amt2 * scl_w * d.x; const offY = -0.5 * amt2 * scl_h * d.y; const shrinkW = amt2 * scl_w * abs(d.x); const shrinkH = amt2 * scl_h * abs(d.y); this.px1_ = this.px1 + offX; this.py1_ = this.py1 + offY; this.w1_ = this.w1 - shrinkW; this.h1_ = this.h1 - shrinkH; this.px2_ = this.px2 + offX; this.py2_ = this.py2 + offY; this.w2_ = this.w2 + shrinkW; this.h2_ = this.h2 + shrinkH; if (this.w1_ < 0.01 * scl_w || this.h1_ < 0.01 * scl_h) { this.colorIdx_1 = this.colorIdx_2; this.selector_1 = this.selector_2; } if (this.w2_ < 0.01 * scl_w || this.h2_ < 0.01 * scl_h) { if (this.state === STATE.IDLE || this.state === STATE.MOVING) { this.colorIdx_2 = this.getColorIdx(); this.selector_2 = this.getNewShape(); } } if (t2 >= 1) { this.active = false; this.init_2(); if (this.state === STATE.DYING) { this.dead = true; this.releaseCells([this.currentIdx]); } else if (this.state === STATE.SPAWNING) { this.state = STATE.IDLE; } } } show() { const roundEdge1 = floor(0.125 * scl); push(); translate(this.pos.x, this.pos.y); this.drawLayer(this.colorIdx_1, this.selector_1, this.px1_, this.py1_, this.w1_, this.h1_, roundEdge1); this.drawLayer(this.colorIdx_2, this.selector_2, this.px2_, this.py2_, this.w2_, this.h2_, roundEdge1); pop(); } drawLayer(colorIdx, selector, px, py, w, h, roundEdge1) { if (colorIdx === -1) return; push(); noStroke(); fill(palette[colorIdx]); rect(px, py, 0.95 * w, 0.95 * h); pop(); for (let lv = 0; lv < m.length; lv++) { push(); translate(-m[lv], -m[lv]); if (w < 0.01 * scl_w || h < 0.01 * scl_h) { noStroke(); } else { stroke(BG); strokeWeight(0.03 * scl); } fill(lv === 0 ? BG : palette[(colorIdx + 1) % palette.length]); this.drawSelectorShape(selector, px, py, w, h, lv, roundEdge1); pop(); } } drawSelectorShape(selector, px, py, w, h, lv, roundEdge1) { switch (selector) { case 0: ellipse(px, py, 0.35 * w, 0.35 * h); break; case 1: ellipse(px, py, 0.6 * w, 0.6 * h); if (lv > 0) drawHole(px, py, 0.2 * w, 0.2 * h, BG); break; case 2: drawRect(px, py, 0.6 * w, 0.6 * h, 0, roundEdge1); if (lv > 0) drawHole(px, py, 0.2 * w, 0.2 * h, BG); break; case 3: drawStar(px, py, 4, 0.35 * w, 0.35 * h, 0.8, 0, 1); if (lv > 0) drawHole(px, py, 0.15 * w, 0.15 * h, BG); break; case 4: drawStar(px, py, 10, 0.3 * w, 0.3 * h, 0.55, 0, 0); break; case 5: drawStar(px, py, 10, 0.3 * w, 0.3 * h, 0.55, -PI / 5, 0); break; case 6: drawPolygon(px, py, 6, 0.325 * w, 0.325 * h, 0); if (lv > 0) fill(BG); drawPolygon(px, py, 6, 0.1 * w, 0.1 * h, 0); break; case 7: drawCross(px, py, 0.1, 0.3, w, h, 0); break; case 8: break; } } } function drawRect(posX, posY, w, h, ro, roundEdge) { push(); rotate(ro); rect(posX, posY, w, h, roundEdge); pop(); } function drawStar(posX, posY, nVertex, w, h, k, ro, sp) { splineProperty("tightness", sp); beginShape(); for (let n = 0; n < nVertex; n++) { const a = (n / nVertex) * TWO_PI + ro; const r_1 = n % 2 === 0 ? w : k * w; const r_2 = n % 2 === 0 ? h : k * h; splineVertex(posX + r_1 * cos(a), posY + r_2 * sin(a)); } endShape(CLOSE); } function drawPolygon(posX, posY, nVertex, w, h, ro) { beginShape(); for (let n = 0; n < nVertex; n++) { const a = (n / nVertex) * TWO_PI + ro; vertex(posX + w * cos(a), posY + h * sin(a)); } endShape(CLOSE); } function drawCross(posX, posY, near, far, w, h, ro) { push(); translate(posX, posY); rotate(ro); beginShape(); vertex(near * w, -far * h); vertex(near * w, -near * h); vertex(far * w, -near * h); vertex(far * w, near * h); vertex(near * w, near * h); vertex(near * w, far * h); vertex(-near * w, far * h); vertex(-near * w, near * h); vertex(-far * w, near * h); vertex(-far * w, -near * h); vertex(-near * w, -near * h); vertex(-near * w, -far * h); endShape(CLOSE); pop(); } function drawHole(posX, posY, w, h, c) { fill(c); ellipse(posX, posY, w, h); }

Untitled