'use strict'; const CONFIG = { background: [4, 3, 6], word: 'INTERACTION', // movement / camera walkSpeed: 1.0, cameraStartX: 0, cameraStartY: 0, cameraClamp: 1e7, // light mouseRadius: 300, // field points cellSize: 150, cellMargin: 260, minPointsPerCell: 4, maxPointsPerCell: 11, fieldBaseAlpha: 0.0048, fieldBrightAlpha: 0.075, fieldRadiusMin: 0.70, fieldRadiusMax: 1.85, // word points wordPointCount: 190, wordBaseAlpha: 0.0055, wordBrightAlpha: 0.105, wordRadiusMin: 0.95, wordRadiusMax: 2.15, // relationships edgeDistance: 88, edgeNearestCount: 2, edgeVisibleThreshold: 0.10, // colors warm: [255, 214, 128], softWarm: [255, 194, 77], white: [245, 242, 235], }; const scene = { frame: 0, w: 0, h: 0, pointerLocked: false, hasPointer: false, fullLight: false, pointerX: 0, pointerY: 0, cameraX: CONFIG.cameraStartX, cameraY: CONFIG.cameraStartY, reveal: 0, lastPointerMove: 0, canvasEl: null, hudEl: null, wordNodes: [], }; function setup() { const cnv = createCanvas(windowWidth, windowHeight); cnv.elt.style.cursor = 'none'; scene.canvasEl = cnv.elt; pixelDensity(Math.min(2, displayDensity())); scene.w = width; scene.h = height; textFont('Georgia'); textAlign(CENTER, CENTER); textStyle(BOLD); smooth(); noStroke(); scene.pointerX = width * 0.5; scene.pointerY = height * 0.5; createHud(); bindPointerLock(); initScene(); background(CONFIG.background[0], CONFIG.background[1], CONFIG.background[2]); } function draw() { scene.frame += 1; updateCamera(); const nodes = collectVisibleNodes(); scene.reveal = computeReveal(nodes); const edges = buildEdges(nodes); drawBackground(); drawLight(); drawEdges(edges); drawNodes(nodes); drawHUD(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); scene.w = width; scene.h = height; scene.pointerX = clamp(scene.pointerX, 0, width); scene.pointerY = clamp(scene.pointerY, 0, height); initScene(); } function mousePressed() { if (!scene.canvasEl) return false; if (document.pointerLockElement === scene.canvasEl) { document.exitPointerLock(); } else if (scene.canvasEl.requestPointerLock) { scene.canvasEl.requestPointerLock(); } scene.hasPointer = true; scene.pointerX = mouseX; scene.pointerY = mouseY; return false; } function keyPressed() { if (key === ' ') { scene.fullLight = !scene.fullLight; return false; } const step = keyIsDown(SHIFT) ? 36 : 18; if (keyCode === UP_ARROW || key === 'w' || key === 'W') scene.cameraY -= step; if (keyCode === DOWN_ARROW || key === 's' || key === 'S') scene.cameraY += step; if (keyCode === LEFT_ARROW || key === 'a' || key === 'A') scene.cameraX -= step; if (keyCode === RIGHT_ARROW || key === 'd' || key === 'D') scene.cameraX += step; return false; } function createHud() { const hud = createDiv(''); hud.position(18, 16); hud.style('position', 'fixed'); hud.style('z-index', '3'); hud.style('pointer-events', 'none'); hud.style('user-select', 'none'); hud.style('color', 'rgba(255, 237, 197, 0.78)'); hud.style('font-family', 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'); hud.style('font-size', '12px'); hud.style('line-height', '1.7'); hud.style('letter-spacing', '0.08em'); scene.hudEl = hud; } function bindPointerLock() { document.addEventListener('pointerlockchange', () => { scene.pointerLocked = document.pointerLockElement === scene.canvasEl; if (scene.pointerLocked) { scene.hasPointer = true; scene.pointerX = width * 0.5; scene.pointerY = height * 0.5; } }); document.addEventListener('pointerlockerror', () => { scene.pointerLocked = false; }); } function initScene() { scene.wordNodes = sampleWordNodes(CONFIG.word); } function sampleWordNodes(word) { const g = createGraphics(1200, 360); g.pixelDensity(1); g.clear(); g.background(0); g.fill(255); g.noStroke(); g.textFont('Georgia'); g.textStyle(BOLD); g.textAlign(CENTER, CENTER); let fontSize = 162; if (width < 900) fontSize = 118; if (width < 640) fontSize = 88; g.textSize(fontSize); g.push(); g.translate(g.width * 0.5, g.height * 0.5); g.text(word, 0, 0); g.pop(); g.loadPixels(); const sampled = []; const step = 7; for (let y = 0; y < g.height; y += step) { for (let x = 0; x < g.width; x += step) { const idx = (y * g.width + x) * 4 + 3; if (g.pixels[idx] > 48) sampled.push({ x, y }); } } const stride = Math.max(1, Math.floor(sampled.length / CONFIG.wordPointCount)); const picked = []; for (let i = 0; i < sampled.length; i += stride) picked.push(sampled[i]); return picked.slice(0, CONFIG.wordPointCount).map((p, id) => { const wx = (p.x - g.width * 0.5) * 0.88; const wy = (p.y - g.height * 0.5) * 0.95; return { id: `word-${id}`, kind: 'word', baseX: wx, baseY: wy, x: wx, y: wy, vx: random(-0.02, 0.02), vy: random(-0.02, 0.02), r: random(CONFIG.wordRadiusMin, CONFIG.wordRadiusMax), phase: random(TWO_PI), seed: random(1000), lit: 0, mem: 0, }; }); } function updateCamera() { if (scene.pointerLocked) { const dx = typeof movedX === 'number' ? movedX : 0; const dy = typeof movedY === 'number' ? movedY : 0; scene.cameraX += dx * CONFIG.walkSpeed; scene.cameraY += dy * CONFIG.walkSpeed; scene.cameraX = clamp(scene.cameraX, -CONFIG.cameraClamp, CONFIG.cameraClamp); scene.cameraY = clamp(scene.cameraY, -CONFIG.cameraClamp, CONFIG.cameraClamp); scene.pointerX = width * 0.5; scene.pointerY = height * 0.5; scene.hasPointer = true; } else if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) { scene.pointerX = mouseX; scene.pointerY = mouseY; scene.hasPointer = true; } } function collectVisibleNodes() { const nodes = []; const c = lightCenter(); if (!c) return nodes; const minCellX = floor((scene.cameraX - width * 0.5 - CONFIG.cellMargin) / CONFIG.cellSize); const maxCellX = floor((scene.cameraX + width * 0.5 + CONFIG.cellMargin) / CONFIG.cellSize); const minCellY = floor((scene.cameraY - height * 0.5 - CONFIG.cellMargin) / CONFIG.cellSize); const maxCellY = floor((scene.cameraY + height * 0.5 + CONFIG.cellMargin) / CONFIG.cellSize); for (let cy = minCellY; cy <= maxCellY; cy += 1) { for (let cx = minCellX; cx <= maxCellX; cx += 1) { const seed = hash2D(cx, cy, 31); const rnd = rng(seed); const count = CONFIG.minPointsPerCell + floor(rnd() * (CONFIG.maxPointsPerCell - CONFIG.minPointsPerCell + 1)); for (let i = 0; i < count; i += 1) { const ox = rnd(); const oy = rnd(); const wx = (cx + ox) * CONFIG.cellSize; const wy = (cy + oy) * CONFIG.cellSize; const sx = worldToScreenX(wx); const sy = worldToScreenY(wy); if (sx < -120 || sx > width + 120 || sy < -120 || sy > height + 120) continue; const driftAmp = 0.10 + rnd() * 0.55; const driftPhase = rnd() * TWO_PI; const dx = Math.sin(scene.frame * 0.0020 + driftPhase) * driftAmp; const dy = Math.cos(scene.frame * 0.0023 + driftPhase * 1.31) * driftAmp; const xx = wx + dx; const yy = wy + dy; const ssx = worldToScreenX(xx); const ssy = worldToScreenY(yy); nodes.push({ id: `field-${cx}-${cy}-${i}`, kind: 'field', x: xx, y: yy, sx: ssx, sy: ssy, lit: lightAmount(ssx, ssy), r: lerp(CONFIG.fieldRadiusMin, CONFIG.fieldRadiusMax, rnd()), phase: driftPhase, seed: seed ^ i, mem: 0, }); } } } for (const n of scene.wordNodes) { const lit = lightAmount(worldToScreenX(n.x), worldToScreenY(n.y)); const drift = 0.08 + 0.16 * lit; n.vx += Math.sin(scene.frame * 0.0022 + n.phase) * 0.007; n.vy += Math.cos(scene.frame * 0.0025 + n.phase * 1.37) * 0.007; // If light touches it, it reacts a little faster — not enough to deform the concept. if (lit > 0) { const speed = 0.0012 * 1.3; // the user's revised idea: about 1.3x, not too fast n.vx += (n.baseX - n.x) * speed * lit; n.vy += (n.baseY - n.y) * speed * lit; } else { n.vx += (n.baseX - n.x) * 0.00012; n.vy += (n.baseY - n.y) * 0.00012; } n.vx *= 0.986; n.vy *= 0.986; n.x += n.vx; n.y += n.vy; n.x += Math.sin(scene.frame * 0.0018 + n.phase) * 0.004 * drift; n.y += Math.cos(scene.frame * 0.0021 + n.phase) * 0.004 * drift; n.lit = lit; n.sx = worldToScreenX(n.x); n.sy = worldToScreenY(n.y); if (n.sx < -160 || n.sx > width + 160 || n.sy < -160 || n.sy > height + 160) continue; nodes.push(n); } return nodes; } function computeReveal(nodes) { const wordNodes = nodes.filter((n) => n.kind === 'word'); if (wordNodes.length === 0) return 0; const avg = wordNodes.reduce((sum, n) => sum + n.lit, 0) / wordNodes.length; return avg; } function buildEdges(nodes) { const active = nodes.filter((n) => n.lit > 0.04); const grid = new Map(); const cell = CONFIG.edgeDistance; const edges = []; const seen = new Set(); for (const n of active) { const gx = floor(n.sx / cell); const gy = floor(n.sy / cell); const key = `${gx}|${gy}`; if (!grid.has(key)) grid.set(key, []); grid.get(key).push(n); } for (const a of active) { const gx = floor(a.sx / cell); const gy = floor(a.sy / cell); const candidates = []; for (let oy = -1; oy <= 1; oy += 1) { for (let ox = -1; ox <= 1; ox += 1) { const bucket = grid.get(`${gx + ox}|${gy + oy}`); if (!bucket) continue; for (const b of bucket) { if (b.id === a.id) continue; const d = dist(a.sx, a.sy, b.sx, b.sy); if (d <= CONFIG.edgeDistance) candidates.push({ b, d }); } } } candidates.sort((u, v) => u.d - v.d); for (const { b, d } of candidates.slice(0, CONFIG.edgeNearestCount)) { const key = a.id < b.id ? `${a.id}|${b.id}` : `${b.id}|${a.id}`; if (seen.has(key)) continue; seen.add(key); const vis = Math.min(a.lit, b.lit); if (vis < CONFIG.edgeVisibleThreshold) continue; edges.push({ a, b, vis, d, mem: 0 }); } } return edges; } function drawBackground() { background(CONFIG.background[0], CONFIG.background[1], CONFIG.background[2]); } function drawLight() { const c = lightCenter(); if (!c) return; const ctx = drawingContext; const radius = scene.fullLight ? Math.max(width, height) * 1.32 : CONFIG.mouseRadius * 1.55; const grad = ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, radius); if (scene.fullLight) { grad.addColorStop(0.00, 'rgba(255, 246, 224, 0.34)'); grad.addColorStop(0.22, 'rgba(255, 226, 170, 0.24)'); grad.addColorStop(0.58, 'rgba(255, 196, 110, 0.12)'); grad.addColorStop(1.00, 'rgba(255, 196, 110, 0)'); } else { grad.addColorStop(0.00, 'rgba(255, 239, 201, 0.44)'); grad.addColorStop(0.18, 'rgba(255, 212, 120, 0.26)'); grad.addColorStop(0.48, 'rgba(255, 179, 62, 0.08)'); grad.addColorStop(1.00, 'rgba(255, 179, 62, 0)'); } push(); blendMode(ADD); noStroke(); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(c.x, c.y, radius, 0, TWO_PI); ctx.fill(); pop(); } function drawEdges(edges) { const ctx = drawingContext; push(); blendMode(ADD); for (const e of edges) { const target = Math.min(e.vis, 1); e.mem = lerp(e.mem, target, target > 0 ? 0.24 : 0.06); if (e.mem < 0.01) continue; const alpha = 0.02 + e.mem * 0.82; const weight = 0.45 + e.mem * 1.35; const grad = ctx.createLinearGradient(e.a.sx, e.a.sy, e.b.sx, e.b.sy); grad.addColorStop(0.00, rgba(CONFIG.white, alpha * 0.18)); grad.addColorStop(0.50, rgba(CONFIG.warm, alpha)); grad.addColorStop(1.00, rgba(CONFIG.white, alpha * 0.18)); ctx.strokeStyle = grad; ctx.lineWidth = weight; ctx.beginPath(); ctx.moveTo(e.a.sx, e.a.sy); ctx.lineTo(e.b.sx, e.b.sy); ctx.stroke(); } pop(); } function drawNodes(nodes) { push(); blendMode(ADD); noStroke(); for (const n of nodes) { const lit = clamp(n.lit, 0, 1); const twinkle = 0.5 + 0.5 * Math.sin(scene.frame * 0.02 + (n.phase || 0) + (n.seed || 0)); // Dark = almost invisible. Light = a strong but soft reveal. const base = n.kind === 'word' ? CONFIG.wordBaseAlpha : CONFIG.fieldBaseAlpha; const bright = n.kind === 'word' ? CONFIG.wordBrightAlpha : CONFIG.fieldBrightAlpha; const litAlpha = n.kind === 'word' ? 1.42 : 1.30; const darkAlpha = litAlpha / 3; const alpha = lerp(darkAlpha, litAlpha, lit) * (0.95 + twinkle * 0.08); if (alpha <= 0.0007) continue; const size = n.r + lit * (n.kind === 'word' ? 2.1 : 1.8); fill(CONFIG.white[0], CONFIG.white[1], CONFIG.white[2], alpha * 255 * 0.20); ellipse(n.sx, n.sy, size * 7.4, size * 7.4); fill(CONFIG.white[0], CONFIG.white[1], CONFIG.white[2], alpha * 255); ellipse(n.sx, n.sy, size, size); } pop(); } function drawHUD() { if (!scene.hudEl) return; scene.hudEl.html(`

INTERACTION DESIGN

暗闇を歩いて、光の中だけを読む

REVEAL ${floor(scene.reveal * 100)}% ${scene.pointerLocked ? ' / WALK MODE' : ' / CLICK TO WALK'}${scene.fullLight ? ' / FULL LIGHT' : ''}

`); } function lightCenter() { if (scene.fullLight) return { x: width * 0.5, y: height * 0.5 }; if (scene.pointerLocked) return { x: width * 0.5, y: height * 0.5 }; if (scene.hasPointer) return { x: scene.pointerX, y: scene.pointerY }; return null; } function lightAmount(screenX, screenY) { if (scene.fullLight) return 1; const c = lightCenter(); if (!c) return 0; const d = dist(screenX, screenY, c.x, c.y); const t = clamp(1 - d / CONFIG.mouseRadius, 0, 1); return t * t * (3 - 2 * t); } function worldToScreenX(wx) { return wx - scene.cameraX + width * 0.5; } function worldToScreenY(wy) { return wy - scene.cameraY + height * 0.5; } function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); } function lerp(a, b, t) { return a + (b - a) * t; } function dist(ax, ay, bx, by) { return Math.hypot(bx - ax, by - ay); } function rgba(arr, a) { return `rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, ${a})`; } function hash2D(x, y, salt = 0) { let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(salt | 0, 1442695041); h = (h ^ (h >>> 13)) >>> 0; h = Math.imul(h, 1274126177); return (h ^ (h >>> 16)) >>> 0; } function rng(seed) { let s = seed >>> 0; if (s === 0) s = 1; return function () { s ^= s << 13; s ^= s >>> 17; s ^= s << 5; return (s >>> 0) / 4294967296; }; }　