const LOOP_MS = 30000; const PNUM = 2200; const FLOW_SCALE = 0.002; const SPEED = 1.15; const TRAIL_FADE = 14; const WRAP_MARGIN = 12; const ATTR_PULL = 0.7; const ATTR_MAX_PULL = 0.2; const SEPARATION_RADIUS = 22; const SEPARATION_STRENGTH = 0.9; const GRID_SIZE = SEPARATION_RADIUS; const NOISE_TIME_RADIUS = 1.2; let particles = []; let attractors = []; let tStart; let grid = []; let gCols = 0, gRows = 0; let bgCol; const nishikiHex = [ "#C6252C", "#EF5826", "#F7F7F5", "#1A1A1A", "#ECB522", "#E6E7E8", "#836043", "#A87340", "#24365C" ]; function colPick(){ const idx = floor(random(0, nishikiHex.length)) return nishikiHex[idx]; } function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); colorMode(HSL, 360, 100, 100, 1); noFill(); bgCol = color(0, 50, 52); background(bgCol); for (let i = 0; i < 3; i++) { attractors.push({ base: createVector(windowWidth * (0.4 + 0.2 * i), windowHeight * 0.5), radius: 40 + 35 * (i === 1 ? 1.0 : 0.6), phase: random(TAU) }); } for (let i = 0; i < PNUM; i++) { const x = random(windowWidth); const y = random(windowHeight); particles.push({ pos: createVector(x, y), prev: createVector(x, y), hue: random(200, 300), sat: random(80, 100), light: random(20, 80), col:colPick(), w: random(2, 12) }); } strokeWeight(1); tStart = millis(); } function draw() { const ff = 100 * cos(frameCount * 0.01); const tf = 256 - 255 * cos(frameCount * 0.01); noStroke(); fill(0, 0, ff, TRAIL_FADE / tf); rect(0, 0, width, height); const t = ((millis() - tStart) % LOOP_MS) / LOOP_MS; let acts = []; for (let i = 0; i < attractors.length; i++) { const a = attractors[i]; const ang = a.phase + TAU * t * (i % 2 === 0 ? 1 : -1); acts[i] = p5.Vector.add(a.base, createVector(cos(ang), sin(ang)).mult(a.radius)); } const theta = TAU * t; const tOffX = cos(theta) * NOISE_TIME_RADIUS; const tOffY = sin(theta) * NOISE_TIME_RADIUS; buildGrid(); for (let i = 0; i < particles.length; i++) { const p = particles[i]; const n = noise(p.pos.x * FLOW_SCALE + tOffX, p.pos.y * FLOW_SCALE + tOffY); let ang = map(n, 0, 1, -HALF_PI, HALF_PI); let pull = createVector(0, 0); for (let k = 0; k < acts.length; k++) { const dir = p5.Vector.sub(acts[k], p.pos); const d = max(dir.mag(), 1); dir.normalize().mult(ATTR_PULL / sqrt(d)); pull.add(dir); } if (pull.mag() > ATTR_MAX_PULL) pull.setMag(ATTR_MAX_PULL); const cx = constrain(floor(p.pos.x / GRID_SIZE), 0, gCols - 1); const cy = constrain(floor(p.pos.y / GRID_SIZE), 0, gRows - 1); const neigh = neighborsInRadius(cx, cy); let sep = createVector(0, 0); const r2 = SEPARATION_RADIUS * SEPARATION_RADIUS; for (const idx of neigh) { if (idx === i) continue; const q = particles[idx]; const dx = p.pos.x - q.pos.x; const dy = p.pos.y - q.pos.y; const d2 = dx * dx + dy * dy; if (d2 > 0 && d2 < r2) { const d = sqrt(d2); const s = 1 - (d / SEPARATION_RADIUS); sep.add(dx / d * s, dy / d * s); } } if (sep.mag() > 0) sep.setMag(min(sep.mag(), 1.0)); const vField = p5.Vector.fromAngle(ang).mult(SPEED); const v = p5.Vector.add(vField, pull) .add(sep.mult(SEPARATION_STRENGTH)); p.prev.set(p.pos); p.pos.add(v); let wrapped = false; if (p.pos.x < -WRAP_MARGIN) { p.pos.x = windowWidth + WRAP_MARGIN; wrapped = true; } else if (p.pos.x > windowWidth + WRAP_MARGIN) { p.pos.x = -WRAP_MARGIN; wrapped = true; } if (p.pos.y < -WRAP_MARGIN) { p.pos.y = windowHeight + WRAP_MARGIN; wrapped = true; } else if (p.pos.y > windowHeight + WRAP_MARGIN) { p.pos.y = -WRAP_MARGIN; wrapped = true; } const dx = abs(p.pos.x - p.prev.x); const dy = abs(p.pos.y - p.prev.y); const jumpedTooFar = (dx > windowWidth * 0.5) || (dy > windowHeight * 0.5); if (wrapped || jumpedTooFar) { p.prev.set(p.pos); continue; } stroke(p.col); strokeWeight(p.w); line(p.prev.x, p.prev.y, p.pos.x, p.pos.y); } } function buildGrid() { gCols = ceil(windowWidth / GRID_SIZE); gRows = ceil(windowHeight / GRID_SIZE); grid = new Array(gCols * gRows); for (let i = 0; i < grid.length; i++) grid[i] = []; for (let i = 0; i < particles.length; i++) { const p = particles[i]; const cx = constrain(floor(p.pos.x / GRID_SIZE), 0, gCols - 1); const cy = constrain(floor(p.pos.y / GRID_SIZE), 0, gRows - 1); grid[cx + cy * gCols].push(i); } } function neighborsInRadius(cx, cy) { const ids = []; for (let j = -1; j <= 1; j++) { for (let i = -1; i <= 1; i++) { const x = cx + i, y = cy + j; if (x < 0 || x >= gCols || y < 0 || y >= gRows) continue; ids.push(...grid[x + y * gCols]); } } return ids; } function windowResized() { resizeCanvas(windowWidth, windowHeight); background(0); }