const GAP = 6; const SPEED = 1.6; const HUES = 32; const HOVER_R = 170; const HOVER_PULL = 22; const CAP_RATIO = 0.52; const STROKE_RATIO = 0.2; const DWIDTH_RATIO = 0.80; const TRACK_RATIO = 0.20; let W, H; let cap, sw, dw, track, originX, originY; let cells = []; let colors = []; let hx = -9999, hy = -9999, hoverAmt = 0; function palette(t) { return [ 128 + 127 * Math.cos(6.2832 * (t + 0.00)), 128 + 127 * Math.cos(6.2832 * (t + 0.33)), 128 + 127 * Math.cos(6.2832 * (t + 0.66)), ]; } function layout() { cap = H * CAP_RATIO; let total = () => sw + track + dw + track + dw; sw = cap * STROKE_RATIO; dw = cap * DWIDTH_RATIO; track = cap * TRACK_RATIO; const maxW = W * 0.84; if (total() > maxW) { const k = maxW / total(); cap *= k; sw *= k; dw *= k; track *= k; } originX = (W - total()) / 2; originY = H / 2; } function inI(x, y) { return x >= 0 && x <= sw && Math.abs(y) <= cap / 2; } function inDOuter(x, y) { const hy2 = cap / 2; if (Math.abs(y) > hy2) return false; const xa = dw * 0.42; if (x < 0) return false; if (x <= xa) return true; const rx = dw - xa; const nx = (x - xa) / rx; const ny = y / hy2; return nx * nx + ny * ny <= 1; } function inDCounter(x, y) { const hy2 = cap / 2 - sw; if (hy2 <= 0) return false; if (Math.abs(y) > hy2) return false; if (x <= sw) return false; const xa = dw * 0.42; if (x <= xa) return true; const rx = dw - sw - xa; if (rx <= 0) return false; const nx = (x - xa) / rx; const ny = y / hy2; return nx * nx + ny * ny <= 1; } function inD(x, y) { return inDOuter(x, y) && !inDCounter(x, y); } function insideLogo(px, py) { const y = py - originY; let x = px - originX; if (inI(x, y)) return true; x -= sw + track; if (inD(x, y)) return true; x -= dw + track; if (inD(x, y)) return true; return false; } function buildCells() { layout(); cells = []; const stepY = Math.max(4, Math.round(GAP * 0.9)); const len = GAP * 0.8; const half = len / 2; const th = Math.max(1.4, GAP * 0.34); const hh = th / 2; const top = originY - cap / 2; const startY = top + stepY / 2; for (let y = startY; y <= originY + cap / 2; y += stepY) { for (let x = GAP / 2; x < W; x += GAP) { if (!insideLogo(x, y)) continue; if (!insideLogo(x - half, y - hh)) continue; if (!insideLogo(x + half, y - hh)) continue; if (!insideLogo(x - half, y + hh)) continue; if (!insideLogo(x + half, y + hh)) continue; cells.push({ x, y, u: x / W, v: y / H, len, ox: 0, oy: 0 }); } } } function setup() { W = windowWidth; H = windowHeight; createCanvas(W, H); pixelDensity(Math.min(2, window.devicePixelRatio || 1)); noiseDetail(2, 0.5); noStroke(); for (let k = 0; k < HUES; k++) { const c = palette(k / HUES); colors.push(`rgb(${c[0] | 0},${c[1] | 0},${c[2] | 0})`); } buildCells(); } function windowResized() { W = windowWidth; H = windowHeight; resizeCanvas(W, H); buildCells(); } function draw() { const ctx = drawingContext; ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, W, H); const t = millis() * 0.001 * SPEED; const th = Math.max(1.4, GAP * 0.34); const over = mouseX > 0 && mouseX < W && mouseY > 0 && mouseY < H; hoverAmt += ((over ? 1 : 0) - hoverAmt) * 0.1; if (over) { hx += (mouseX - hx) * 0.2; hy += (mouseY - hy) * 0.2; } const R2 = HOVER_R * HOVER_R; for (let i = 0, n = cells.length; i < n; i++) { const c = cells[i]; const nn = noise(c.u * 2.0, c.v * 2.0, t * 0.2) + 0.22 * Math.sin((c.u + c.v) * 3.0 + t * 0.6); const hi = ((nn % 1) + 1) % 1; let inf = 0; let tx = 0, ty = 0; if (hoverAmt > 0.01) { const dx = hx - c.x, dy = hy - c.y; const d2 = dx * dx + dy * dy; if (d2 < R2) { const d = Math.sqrt(d2) || 0.001; const f = 1 - d / HOVER_R; inf = f * f * hoverAmt; const amt = Math.min(inf * HOVER_PULL, d * 0.6); tx = (dx / d) * amt; ty = (dy / d) * amt; } } c.ox += (tx - c.ox) * 0.14; c.oy += (ty - c.oy) * 0.14; const len = c.len * (1 + 0.45 * inf); ctx.globalAlpha = 0.92 + 0.08 * inf; ctx.fillStyle = colors[(hi * HUES) | 0]; ctx.fillRect(c.x + c.ox - len / 2, c.y + c.oy - th / 2, len, th); } ctx.globalAlpha = 1; }

ひとつひとつが集まる