let dim = 900; let num = 100; let time = 0; let friends = []; // ---- IDD text field ---- let fieldRes = 4; let fieldCols, fieldRows; let brightnessGrid; let maxStreamlines = 450; let streamlines = []; let revealedCount = 0; let textTargets = []; // ---- Sound Interaction ---- let mic; let micThreshold = 0.12; let ringPulse = 0; let targetPulse = 0; function setup() { createCanvas(dim, dim); pixelDensity(1); background(250); frameRate(30); // マイク入力の設定 mic = new p5.AudioIn(); mic.start(); buildTextField(); buildTextTargets(); buildStreamlines(); resetAll(); } function draw() { // 0. マイク音量の監視 if (mic) { let vol = mic.getLevel(); if (vol > micThreshold) { targetPulse = 1.0; } } // 伸縮パルスの減衰 ringPulse = lerp(ringPulse, targetPulse, 0.4); targetPulse *= 0.65; // Friend ネットワークの移動と描画 for (let c = 0; c < num; c++) { friends[c].move(); friends[c].expose(); friends[c].exposeConnections(); } if (time % 2 === 0) { for (let c = 0; c < num; c++) { friends[c].findHappyPlace(); } } // 2. IDD の流線を描画 let streamPerFrame = 2; for (let k = 0; k < streamPerFrame; k++) { if (revealedCount < streamlines.length) { drawStreamline(streamlines[revealedCount]); revealedCount++; } } time++; } function mousePressed() { userStartAudio(); background(250); time = 0; revealedCount = 0; resetAll(); } function resetAll() { friends = []; for (let x = 0; x < num; x++) { let fx = dim / 2 + 0.4 * dim * cos(TWO_PI * x / num); let fy = dim / 2 + 0.4 * dim * sin(TWO_PI * x / num); friends.push(new Friend(fx, fy, x)); } for (let k = 0; k < num * 2.2; k++) { let a = floor(random(num)); let b = floor((a + random(22)) % num); if (b < 0 || b >= num) b = 0; if (a !== b) { friends[a].connectTo(b); friends[b].connectTo(a); } } } // ================= Friend / SandPainter ================= class Friend { constructor(x, y, id) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.id = id; this.maxcon = 8; this.lencon = 10 + random(50); this.connections = []; this.numsands = 2; this.sands = []; for (let n = 0; n < this.numsands; n++) this.sands.push(new SandPainter()); this.target = textTargets.length > 0 ? textTargets[id % textTargets.length] : null; } expose() { for (let dx = -2; dx < 3; dx++) { let a = 0.5 - abs(dx) / 5.0; stroke(0, 100 * a); point(this.x + dx, this.y); stroke(255, 120 * a); point(this.x + dx - 1, this.y - 1); } for (let dy = -2; dy < 3; dy++) { let a = 0.5 - abs(dy) / 5.0; stroke(0, 100 * a); point(this.x, this.y + dy); stroke(255, 120 * a); point(this.x - 1, this.y + dy - 1); } } exposeConnections() { for (let n = 0; n < this.connections.length; n++) { let o = friends[this.connections[n]]; for (let s = 0; s < this.numsands; s++) { this.sands[s].render(this.x, this.y, o.x, o.y); } } } move() { this.x += this.vx; this.y += this.vy; this.vx *= 0.92; this.vy *= 0.92; } connectTo(f) { if (this.connections.length < this.maxcon && !this.friendOf(f)) { this.connections.push(f); } } friendOf(x) { return this.connections.indexOf(x) !== -1; } findHappyPlace() { let ax = 0.0; let ay = 0.0; for (let n = 0; n < num; n++) { if (friends[n] !== this) { let ddx = friends[n].x - this.x; let ddy = friends[n].y - this.y; let d = sqrt(ddx * ddx + ddy * ddy); let t = atan2(ddy, ddx); let friend = this.friendOf(n); if (friend) { if (d > this.lencon) { ax += 4.0 * cos(t); ay += 4.0 * sin(t); } } else { if (d < this.lencon) { ax += (this.lencon - d) * cos(t + PI); ay += (this.lencon - d) * sin(t + PI); } } } } let cx = dim / 2; let cy = dim / 2; let cdx = this.x - cx; let cdy = this.y - cy; let distFromCenter = sqrt(cdx * cdx + cdy * cdy); let minRadius = dim * 0.35; if (distFromCenter < minRadius) { let pushAngle = atan2(cdy, cdx); let pushForce = (minRadius - distFromCenter) * 0.18; ax += pushForce * cos(pushAngle); ay += pushForce * sin(pushAngle); } let iBoxWidth = dim * 0.12; let iBoxHeight = dim * 0.28; if (abs(cdx) < iBoxWidth && abs(cdy) < iBoxHeight) { let dirX = cdx >= 0 ? 1 : -1; let forceX = (iBoxWidth - abs(cdx)) * 0.35; ax += dirX * forceX; let dirY = cdy >= 0 ? 1 : -1; let forceY = (iBoxHeight - abs(cdy)) * 0.15; ay += dirY * forceY; } this.vx += ax / 42.22; this.vy += ay / 42.22; } } class SandPainter { constructor() { this.p = random(1.0); this.gray = random(80, 190); this.g = random(0.01, 0.1); } render(x, y, ox, oy) { let cx = dim / 2; let cy = dim / 2; let dx1 = x - cx; let dy1 = y - cy; let renderX = x + dx1 * (ringPulse * 0.18); let renderY = y + dy1 * (ringPulse * 0.18); let dx2 = ox - cx; let dy2 = oy - cy; let renderOX = ox + dx2 * (ringPulse * 0.18); let renderOY = oy + dy2 * (ringPulse * 0.18); let midX = renderOX + (renderX - renderOX) * sin(this.p); let midY = renderOY + (renderY - renderOY) * sin(this.p); let d = dist(mouseX, mouseY, midX, midY); let maxDist = 170; let rawFactor = constrain(map(d, 0, maxDist, 1, 0), 0, 1); let factor = pow(rawFactor, 2.0); let baseCol = color(this.gray, this.gray, this.gray); let targetCol = color(150, 30, 30); let c = lerpColor(baseCol, targetCol, factor); let weight = 1.0 + factor * 0.35 + ringPulse * 0.45; strokeWeight(weight); stroke(red(c), green(c), blue(c), 10 + factor * 15 + ringPulse * 8); point(midX, midY); this.g += random(-0.05, 0.05); let maxg = 0.22; if (this.g < -maxg) this.g = -maxg; if (this.g > maxg) this.g = maxg; let w = this.g / 10.0; // 粒子のループ for (let i = 0; i < 7; i++) { let a = 0.04 - i / 250; let ptX1 = renderOX + (renderX - renderOX) * sin(this.p + sin(i * w)); let ptY1 = renderOY + (renderY - renderOY) * sin(this.p + sin(i * w)); let ptX2 = renderOX + (renderX - renderOX) * sin(this.p - sin(i * w)); let ptY2 = renderOY + (renderY - renderOY) * sin(this.p - sin(i * w)); let soundAlphaBoost = ringPulse * 12; stroke(red(c), green(c), blue(c), max(0, 255 * a * (1 + factor * 0.5) + soundAlphaBoost)); point(ptX1, ptY1); point(ptX2, ptY2); } strokeWeight(1.0); } } // ================= IDD text field ================= function buildTextField() { let pg = createGraphics(dim, dim); pg.pixelDensity(1); pg.background(255); pg.noStroke(); pg.fill(0); pg.textAlign(CENTER, CENTER); pg.textStyle(BOLD); pg.textFont('Georgia'); pg.textSize(dim * 0.28); pg.text('IDD', dim / 2, dim / 2 + dim * 0.01); pg.filter(BLUR, 8); pg.loadPixels(); fieldCols = floor(dim / fieldRes); fieldRows = floor(dim / fieldRes); brightnessGrid = []; for (let i = 0; i < fieldCols; i++) { brightnessGrid[i] = []; for (let j = 0; j < fieldRows; j++) { let px = min(dim - 1, i * fieldRes); let py = min(dim - 1, j * fieldRes); let idx = 4 * (py * dim + px); brightnessGrid[i][j] = pg.pixels[idx]; } } } function getBrightness(x, y) { if (x < 0 || x >= dim || y < 0 || y >= dim) return 255; let gx = constrain(floor(x / fieldRes), 0, fieldCols - 1); let gy = constrain(floor(y / fieldRes), 0, fieldRows - 1); return brightnessGrid[gx][gy]; } function gradientAt(x, y) { let d = fieldRes * 1.5; let bx1 = getBrightness(x + d, y); let bx2 = getBrightness(x - d, y); let by1 = getBrightness(x, y + d); let by2 = getBrightness(x, y - d); return { gx: (bx1 - bx2) / (2 * d), gy: (by1 - by2) / (2 * d) }; } function buildTextTargets() { textTargets = []; let tries = 0; while (textTargets.length < 220 && tries < 5000) { tries++; let x = random(dim * 0.12, dim * 0.88); let y = random(dim * 0.30, dim * 0.70); if (getBrightness(x, y) < 140) textTargets.push({ x: x, y: y }); } } function buildStreamlines() { streamlines = []; let tries = 0; let bx0 = dim * 0.10, bx1 = dim * 0.90; let by0 = dim * 0.26, by1 = dim * 0.74; while (streamlines.length < maxStreamlines && tries < 2000) { tries++; let sx = random(bx0, bx1); let sy = random(by0, by1); let grad = gradientAt(sx, sy); let mag = sqrt(grad.gx * grad.gx + grad.gy * grad.gy); if (mag < 0.10) continue; let fwd = tracePath(sx, sy, 1); let bwd = tracePath(sx, sy, -1); bwd.reverse(); let pts = bwd.concat(fwd.slice(1)); if (pts.length > 5) streamlines.push(pts); } } function tracePath(sx, sy, dir) { let pts = [{ x: sx, y: sy }]; let x = sx, y = sy; let steps = 40; let stepLen = 2.6; for (let i = 0; i < steps; i++) { let grad = gradientAt(x, y); let mag = sqrt(grad.gx * grad.gx + grad.gy * grad.gy); if (mag < 0.02) break; let tx = -grad.gy / mag; let ty = grad.gx / mag; x += dir * tx * stepLen; y += dir * ty * stepLen; if (x < 0 || x >= dim || y < 0 || y >= dim) break; pts.push({ x: x, y: y }); } return pts; } function drawStreamline(sl) { noFill(); strokeWeight(1.0); stroke(0, 70); beginShape(); curveVertex(sl[0].x, sl[0].y); for (let p of sl) curveVertex(p.x, p.y); curveVertex(sl[sl.length - 1].x, sl[sl.length - 1].y); endShape(); strokeWeight(2.2); stroke(20, 30); beginShape(); curveVertex(sl[0].x, sl[0].y); for (let p of sl) curveVertex(p.x, p.y); curveVertex(sl[sl.length - 1].x, sl[sl.length - 1].y); endShape(); }

nexus