// ============================================================ // 25 CLOCKS // TRIPLE LISSAJOUS GENERATIVE CLOCK SEQUENCER // p5.js + p5.sound // - Mouse click only starts audio // ============================================================ // ============================================================ // GLOBAL // ============================================================ let clocks = []; let cols; let rows; let cellW; let cellH; let cellSize; let audioStarted = false; let startMillis = 0; // ============================================================ // THREE PLAYHEADS // ============================================================ const PLAYHEAD_COUNT = 3; let currentClocks = [-1, -1, -1]; let previousClocks = [-1, -1, -1]; // ============================================================ // RIPPLES // ============================================================ let ripples = []; // 波紋の拡大速度 px / sec const RIPPLE_SPEED = 300; // 波紋の寿命 sec const RIPPLE_LIFE = 4.5; // 波紋の線幅 const RIPPLE_WEIGHT = 1.2; // 波紋の最大透明度 const RIPPLE_ALPHA = 120; // 発生時の半径 const RIPPLE_START_SIZE = 0.15; // ============================================================ // CHROMATIC ABERRATION // ============================================================ let chromaticShader; let chromaticAmount = 0.008; // ============================================================ // 25 NOTE SCALE // ============================================================ const SCALE = [ 65.41, 73.42, 82.41, 98.0, 110.0, 130.81, 146.83, 164.81, 196.0, 220.0, 261.63, 293.66, 329.63, 392.0, 440.0, 523.25, 587.33, 659.25, 783.99, 880.0, 1046.5, 1174.66, 1318.51, 1567.98, 1760.0, ]; // ============================================================ // SETUP // ============================================================ function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); strokeCap(SQUARE); strokeJoin(MITER); textFont("Helvetica"); textAlign(CENTER, CENTER); startMillis = millis(); setupGrid(); // ========================================================== // CHROMATIC ABERRATION SHADER // ========================================================== chromaticShader = createFilterShader(` precision highp float; varying vec2 vTexCoord; uniform sampler2D tex0; uniform float amount; void main() { vec2 uv = vTexCoord; vec2 center = vec2( 0.5, 0.5 ); vec2 direction = uv - center; float d = length( direction ); vec2 offset = direction * amount * d; float r = texture2D( tex0, uv + offset ).r; float g = texture2D( tex0, uv ).g; float b = texture2D( tex0, uv - offset ).b; float a = texture2D( tex0, uv ).a; gl_FragColor = vec4( r, g, b, a ); } `); } // ============================================================ // GRID // ============================================================ function setupGrid() { clocks = []; const targetSize = constrain(min(width, height) * 0.1, 65, 130); cols = max(4, floor(width / targetSize)); rows = max(4, floor(height / targetSize)); cellW = width / cols; cellH = height / rows; cellSize = min(cellW, cellH); // ========================================================== // CREATE CLOCKS // ========================================================== for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const index = row * cols + col; const x = (col + 0.5) * cellW; const y = (row + 0.5) * cellH; clocks.push({ x: x, y: y, index: index, // ------------------------------------------------------ // VISUAL TYPE // ------------------------------------------------------ type: index % 8, // ------------------------------------------------------ // ROTATION // ------------------------------------------------------ rotation: random(TWO_PI), rotationSpeed: random(-0.12, 0.12), // ------------------------------------------------------ // PHASE // ------------------------------------------------------ phase: random(TWO_PI), // ------------------------------------------------------ // ANIMATION // ------------------------------------------------------ pulse: 0, energy: 0, // ------------------------------------------------------ // NOTE // ------------------------------------------------------ note: index % 25, }); } } currentClocks = [-1, -1, -1]; previousClocks = [-1, -1, -1]; // resize時に古い波紋を削除 ripples = []; } // ============================================================ // DRAW // ============================================================ function draw() { // ========================================================== // BACKGROUND // ========================================================== background(1, 7, 6, 80); // ========================================================== // TIME // ========================================================== const t = (millis() - startMillis) / 1000; const dt = min(deltaTime / 1000, 0.1); // ========================================================== // THREE INDEPENDENT LISSAJOUS PLAYHEADS // ========================================================== let playheads = []; for (let i = 0; i < PLAYHEAD_COUNT; i++) { const playhead = getLissajousPosition(t, i); playheads.push(playhead); // -------------------------------------------------------- // SELECT NEAREST CLOCK // -------------------------------------------------------- currentClocks[i] = findNearestClock(playhead.x, playhead.y); // -------------------------------------------------------- // TRIGGER // -------------------------------------------------------- if (currentClocks[i] !== previousClocks[i]) { triggerClock(currentClocks[i], i); } previousClocks[i] = currentClocks[i]; } // ========================================================== // UPDATE RIPPLES // ========================================================== updateRipples(dt); // ========================================================== // DRAW RIPPLES // // 時計より先に描画するので、 // 波紋は図形の背面になる // ========================================================== drawRipples(); // ========================================================== // UPDATE + DRAW CLOCKS // ========================================================== for (let i = 0; i < clocks.length; i++) { updateClock(clocks[i]); drawClock(clocks[i], t); } // ========================================================== // DRAW THREE PLAYHEADS // ========================================================== for (let i = 0; i < PLAYHEAD_COUNT; i++) { drawPlayhead(playheads[i], i); } // ========================================================== // INFO // ========================================================== drawInfo(); // ========================================================== // FIXED CHROMATIC ABERRATION // ========================================================== chromaticShader.setUniform("amount", chromaticAmount); // ========================================================== // FINAL POST PROCESS // ========================================================== filter(chromaticShader); } // ============================================================ // LISSAJOUS // ============================================================ function getLissajousPosition(t, id) { let a; let b; let phase; let speed; let offsetX; let offsetY; // ========================================================== // PLAYHEAD 01 // ========================================================== if (id === 0) { speed = 0.01; a = 1.7 + sin(t * 0.071) * 0.55; b = 2.9 + sin(t * 0.053 + 2.1) * 0.65; phase = sin(t * 0.031) * PI; offsetX = 0; offsetY = 0; } // ========================================================== // PLAYHEAD 02 // ========================================================== else if (id === 1) { speed = 0.003; a = 2.3 + sin(t * 0.047 + 1.3) * 0.42; b = 3.7 + sin(t * 0.061 + 0.7) * 0.52; phase = PI * 0.67 + sin(t * 0.023) * 1.4; offsetX = 1.7; offsetY = 0.4; } // ========================================================== // PLAYHEAD 03 // ========================================================== else { speed = 0.024; a = 3.1 + sin(t * 0.039 + 2.7) * 0.48; b = 2.1 + sin(t * 0.057 + 4.1) * 0.57; phase = PI * 1.27 + sin(t * 0.027 + 2.0) * 1.8; offsetX = 3.1; offsetY = 2.2; } // ========================================================== // PRIMARY LISSAJOUS // ========================================================== let lx = sin(t * speed * a + phase + offsetX); let ly = sin(t * speed * b + offsetY); // ========================================================== // SECONDARY MODULATION // ========================================================== lx += sin(t * (0.173 + id * 0.037) + id * 1.7) * 0.12; ly += cos(t * (0.117 + id * 0.043) + id * 0.9) * 0.12; // ========================================================== // MICRO MODULATION // ========================================================== lx += sin(t * (4.71 + id * 0.83)) * 0.025; ly += sin(t * (3.91 + id * 0.71)) * 0.025; // ========================================================== // MAP TO SCREEN // ========================================================== const margin = cellSize * 0.35; const px = map(lx, -1.15, 1.15, margin, width - margin); const py = map(ly, -1.15, 1.15, margin, height - margin); return { x: constrain(px, margin, width - margin), y: constrain(py, margin, height - margin), }; } // ============================================================ // FIND NEAREST CLOCK // ============================================================ function findNearestClock(px, py) { let nearest = -1; let nearestDistance = Infinity; for (let i = 0; i < clocks.length; i++) { const c = clocks[i]; const dx = px - c.x; const dy = py - c.y; const distanceSquared = dx * dx + dy * dy; if (distanceSquared < nearestDistance) { nearestDistance = distanceSquared; nearest = i; } } return nearest; } // ============================================================ // TRIGGER CLOCK // ============================================================ function triggerClock(index, playheadID) { if (index < 0 || index >= clocks.length) { return; } const c = clocks[index]; // ========================================================== // VISUAL TRIGGER // ========================================================== c.energy = 1; c.pulse = 1; // ========================================================== // RIPPLE TRIGGER // ========================================================== createRipple(c.x, c.y, playheadID); // ========================================================== // SOUND // ========================================================== if (audioStarted) { playNote(c, playheadID); } } // ============================================================ // CREATE RIPPLE // ============================================================ function createRipple(x, y, playheadID) { ripples.push({ x: x, y: y, radius: cellSize * RIPPLE_START_SIZE, age: 0, playheadID: playheadID, }); } // ============================================================ // UPDATE RIPPLES // ============================================================ function updateRipples(dt) { for (let i = ripples.length - 1; i >= 0; i--) { const r = ripples[i]; // -------------------------------------------------------- // AGE // -------------------------------------------------------- r.age += dt; // -------------------------------------------------------- // EXPAND // -------------------------------------------------------- r.radius += RIPPLE_SPEED * dt; // -------------------------------------------------------- // REMOVE // -------------------------------------------------------- if (r.age >= RIPPLE_LIFE) { ripples.splice(i, 1); } } } // ============================================================ // DRAW RIPPLES // ============================================================ function drawRipples() { push(); noFill(); for (let i = 0; i < ripples.length; i++) { const r = ripples[i]; // ======================================================== // PROGRESS // 0 → 1 // ======================================================== const progress = constrain(r.age / RIPPLE_LIFE, 0, 1); // ======================================================== // FADE // // 最初ははっきり見えて // 徐々に消える // ======================================================== const alpha = RIPPLE_ALPHA * pow(1 - progress, 1.5); // ======================================================== // STROKE // ======================================================== stroke(255, alpha); strokeWeight(RIPPLE_WEIGHT); // ======================================================== // CIRCLE // ======================================================== circle(r.x, r.y, r.radius * 2); } pop(); } // ============================================================ // PLAY NOTE // ============================================================ function playNote(c, playheadID) { // ========================================================== // NOTE // ========================================================== let noteIndex = c.note % SCALE.length; // ========================================================== // OCTAVE // ========================================================== let octaveMultiplier; if (playheadID === 0) { octaveMultiplier = 0.5; } else if (playheadID === 1) { octaveMultiplier = 1.0; } else { octaveMultiplier = 2.0; } let frequency = SCALE[noteIndex] * octaveMultiplier; // ========================================================== // DETUNE // ========================================================== const t = millis() / 1000; const detune = 1 + sin(t * (0.371 + playheadID * 0.071) + c.phase) * 0.008; frequency *= detune; // ========================================================== // OSCILLATOR // ========================================================== const voice = new p5.Oscillator(getWaveform(c.type, playheadID)); voice.freq(frequency); voice.amp(0); voice.start(); // ========================================================== // ENVELOPE // ========================================================== let amplitude; let release; if (playheadID === 0) { amplitude = 0.055; release = 0.55; } else if (playheadID === 1) { amplitude = 0.045; release = 0.38; } else { amplitude = 0.035; release = 0.24; } // ========================================================== // ATTACK // ========================================================== voice.amp(amplitude, 0.015); // ========================================================== // RELEASE // ========================================================== voice.amp(0, release, 0.025); // ========================================================== // STOP // ========================================================== setTimeout(function () { voice.stop(); }, (release + 0.2) * 1000); } // ============================================================ // WAVEFORM // ============================================================ function getWaveform(type, playheadID) { if (playheadID === 0) { return "sine"; } if (playheadID === 1) { return "triangle"; } if (type % 2 === 0) { return "sine"; } return "triangle"; } // ============================================================ // UPDATE CLOCK // ============================================================ function updateClock(c) { c.energy *= 0.9; c.pulse *= 0.86; if (c.energy < 0.001) { c.energy = 0; } if (c.pulse < 0.001) { c.pulse = 0; } } // ============================================================ // IS CLOCK SELECTED? // ============================================================ function isClockSelected(index) { for (let i = 0; i < PLAYHEAD_COUNT; i++) { if (currentClocks[i] === index) { return true; } } return false; } // ============================================================ // SELECTION COUNT // ============================================================ function getSelectionCount(index) { let count = 0; for (let i = 0; i < PLAYHEAD_COUNT; i++) { if (currentClocks[i] === index) { count++; } } return count; } // ============================================================ // DRAW CLOCK // ============================================================ function drawClock(c, t) { push(); translate(c.x, c.y); // ========================================================== // BASE SIZE // ========================================================== const baseSize = cellSize * 0.56; // ========================================================== // PULSE // ========================================================== const pulseScale = 1 + c.pulse * 0.2; scale(pulseScale); // ========================================================== // GEOMETRY // ========================================================== push(); const rotation = c.rotation + t * c.rotationSpeed; rotate(rotation); noFill(); const alpha = 170 + c.energy * 85; stroke(255, alpha); const sw = max(1.2, cellSize * 0.032); strokeWeight(sw); switch (c.type) { case 0: clockDiamond(baseSize); break; case 1: clockGrid(baseSize); break; case 2: clockOverlap(baseSize, t, c); break; case 3: clockDoubleDiamond(baseSize); break; case 4: clockPinwheel(baseSize, t, c); break; case 5: clockNestedSquare(baseSize); break; case 6: clockSquareDiamond(baseSize); break; case 7: clockCrossGrid(baseSize); break; } pop(); // ========================================================== // SELECTED CLOCK // ========================================================== if (isClockSelected(c.index)) { push(); noStroke(); fill(255, 200 + c.energy * 55); textAlign(CENTER, CENTER); textStyle(BOLD); const selectionCount = getSelectionCount(c.index); const textScale = 1 + (selectionCount - 1) * 0.12; textSize(cellSize * 0.22 * textScale); text("25", 0, 0); pop(); } pop(); } // ============================================================ // CLOCK TYPE 01 // ============================================================ function clockDiamond(s) { rectMode(CENTER); square(0, 0, s); push(); rotate(PI / 4); square(0, 0, s * 0.66); pop(); } // ============================================================ // CLOCK TYPE 02 // ============================================================ function clockGrid(s) { rectMode(CENTER); square(0, 0, s); const d = s / 3; line(-s / 2, -d / 2, s / 2, -d / 2); line(-s / 2, d / 2, s / 2, d / 2); line(-d / 2, -s / 2, -d / 2, s / 2); line(d / 2, -s / 2, d / 2, s / 2); } // ============================================================ // CLOCK TYPE 03 // ============================================================ function clockOverlap(s, t, c) { rectMode(CENTER); const movement = sin(t * 0.7 + c.phase) * s * 0.08; square(-s * 0.18 + movement, -s * 0.18, s * 0.62); square(s * 0.18 - movement, s * 0.18, s * 0.62); } // ============================================================ // CLOCK TYPE 04 // ============================================================ function clockDoubleDiamond(s) { push(); rotate(PI / 4); rectMode(CENTER); square(0, 0, s * 0.78); square(0, 0, s * 0.55); pop(); } // ============================================================ // CLOCK TYPE 05 // ============================================================ function clockPinwheel(s, t, c) { rectMode(CENTER); square(0, 0, s); const r = s * 0.34; const handAngle = sin(t * 0.6 + c.phase) * 0.25; push(); rotate(handAngle); for (let i = 0; i < 4; i++) { push(); rotate(i * HALF_PI); line(0, 0, r, -r); line(r, -r, r, 0); pop(); } pop(); square(0, 0, s * 0.18); } // ============================================================ // CLOCK TYPE 06 // ============================================================ function clockNestedSquare(s) { rectMode(CENTER); square(0, 0, s); square(0, 0, s * 0.72); square(0, 0, s * 0.46); } // ============================================================ // CLOCK TYPE 07 // ============================================================ function clockSquareDiamond(s) { rectMode(CENTER); square(0, 0, s * 0.72); push(); rotate(PI / 4); square(0, 0, s * 0.72); pop(); } // ============================================================ // CLOCK TYPE 08 // ============================================================ function clockCrossGrid(s) { rectMode(CENTER); square(0, 0, s * 0.72); rect(0, 0, s, s * 0.48); rect(0, 0, s * 0.48, s); line(-s / 2, 0, s / 2, 0); line(0, -s / 2, 0, s / 2); } // ============================================================ // DRAW PLAYHEAD // ============================================================ function drawPlayhead(p, id) { push(); noFill(); stroke(255, 18); strokeWeight(1); circle(p.x, p.y, cellSize * (0.16 + id * 0.025)); noStroke(); fill(255, 75); circle(p.x, p.y, 3); pop(); } // ============================================================ // INFO // ============================================================ function drawInfo() { noStroke(); fill(255, 80); textAlign(LEFT, BOTTOM); textStyle(NORMAL); textSize(10); text("Taito Otani", 16, height - 16); } // ============================================================ // START AUDIO // ============================================================ function mousePressed() { userStartAudio(); if (!audioStarted) { audioStarted = true; playTestSound(); } } // ============================================================ // TEST SOUND // ============================================================ function playTestSound() { const testOsc = new p5.Oscillator("sine"); testOsc.freq(220); testOsc.amp(0); testOsc.start(); testOsc.amp(0.12, 0.02); testOsc.amp(0, 0.35, 0.05); setTimeout(function () { testOsc.stop(); }, 500); } // ============================================================ // RESIZE // ============================================================ function windowResized() { resizeCanvas(windowWidth, windowHeight); setupGrid(); }

#PCDTokyo2026