// Phosphor Falls: a waterfall of green katakana and digits; drag through it to scramble the stream. const HISS = 'sfx_Z2bwgGofdE3n'; const GLITCH = 'sfx_PnQuCYqE7xys'; const CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789012345'; const NC = CHARS.length; const params = { speed: 1, density: 0.75, size: 18, ripple: 1, trail: 1, ink: '#22e06a', head: '#d8ffe9', sound: 0.6, }; let g, cs, cols, rows, chars, heat, drawn, rowShift, streams; let stamp = 0; let pulses = []; let splashes = []; let inkS = [], headS = []; let lastPx = null, lastPy = null, lastGlitch = 0, hissVoice = null; let mistGrad, vignette, overlay; let heatUntil = 0; function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(Math.min(1.5, displayDensity())); g = drawingContext; gui.add(params, 'speed', 0.2, 3).name('Speed'); gui.add(params, 'density', 0.1, 1).name('Density'); gui.add(params, 'size', 10, 36, 1).name('Glyph size').onChange(layout); gui.add(params, 'ripple', 0, 2).name('Ripple strength'); gui.add(params, 'trail', 0.3, 2.5).name('Trail length'); gui.addColor(params, 'ink').name('Glyphs').onChange(buildStyles); gui.addColor(params, 'head').name('Heads').onChange(buildStyles); gui.add(params, 'sound', 0, 1).name('Sound').onChange((v) => sfx && (sfx.volume = v)); if (typeof sfx !== 'undefined' && sfx) sfx.volume = params.sound; buildStyles(); layout(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); layout(); } function buildStyles() { const a = color(params.ink), h = color(params.head); for (let i = 0; i < 16; i++) { const al = ((i + 1) / 16).toFixed(3); inkS[i] = `rgba(${red(a)|0},${green(a)|0},${blue(a)|0},${al})`; headS[i] = `rgba(${red(h)|0},${green(h)|0},${blue(h)|0},${al})`; } if (width) makeGradients(); } function makeGradients() { const a = color(params.ink); const rgb = `${red(a)|0},${green(a)|0},${blue(a)|0}`; mistGrad = g.createLinearGradient(0, height * 0.72, 0, height); mistGrad.addColorStop(0, `rgba(${rgb},0)`); mistGrad.addColorStop(1, `rgba(${rgb},0.16)`); vignette = g.createRadialGradient(width / 2, height * 0.45, Math.min(width, height) * 0.2, width / 2, height / 2, Math.max(width, height) * 0.75); vignette.addColorStop(0, 'rgba(0,0,0,0)'); vignette.addColorStop(1, 'rgba(0,0,0,0.7)'); // Static overlay: vignette + scanlines, drawn once overlay = document.createElement('canvas'); overlay.width = Math.max(1, width); overlay.height = Math.max(1, height); const o = overlay.getContext('2d'); o.fillStyle = vignette; o.fillRect(0, 0, width, height); o.fillStyle = 'rgba(0,0,0,0.18)'; for (let y = 0; y < height; y += 3) o.fillRect(0, y, width, 1); } function newStream(s, first) { s.len = random(8, 30) * params.trail; s.speed = random(6, 22); s.y = first ? random(-rows, rows) : -random(0, rows * 0.5); if (random() > params.density) s.y -= random(rows * 0.5, rows * 1.5); return s; } function layout() { cs = params.size; cols = Math.ceil(width / cs) + 1; rows = Math.ceil(height / cs) + 1; const n = cols * rows; chars = new Uint8Array(n).map(() => (Math.random() * NC) | 0); heat = new Float32Array(n); drawn = new Uint32Array(n); rowShift = new Float32Array(rows).map(() => random(-1, 1)); streams = []; for (let c = 0; c < cols; c++) streams.push([newStream({}, true), newStream({}, true)]); pulses = []; splashes = []; makeGradients(); } function pointerState(t) { if (typeof vybe !== 'undefined' && vybe.rendering) { return { x: width * (0.5 + 0.38 * Math.sin(t * 0.7)), y: height * (0.5 + 0.3 * Math.sin(t * 1.13 + 1)), pressed: true }; } return { x: mouseX, y: mouseY, pressed: mouseIsPressed }; } function mousePressed() { if (typeof sfx !== 'undefined' && sfx && !hissVoice) hissVoice = sfx.loop(HISS, { volume: 0.25 }); } function addHeat(px, py, R, amt) { heatUntil = millis() / 1000 + 2.5; const c0 = Math.max(0, Math.floor((px - R) / cs)), c1 = Math.min(cols - 1, Math.ceil((px + R) / cs)); const r0 = Math.max(0, Math.floor((py - R) / cs)), r1 = Math.min(rows - 1, Math.ceil((py + R) / cs)); for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) { const d = Math.hypot(c * cs + cs / 2 - px, r * cs + cs / 2 - py); if (d < R) { const i = r * cols + c, v = (1 - d / R) * amt; if (v > heat[i]) heat[i] = v; } } } function addRing(px, py, rad, w, amt) { heatUntil = millis() / 1000 + 2.5; const R = rad + w; const c0 = Math.max(0, Math.floor((px - R) / cs)), c1 = Math.min(cols - 1, Math.ceil((px + R) / cs)); const r0 = Math.max(0, Math.floor((py - R) / cs)), r1 = Math.min(rows - 1, Math.ceil((py + R) / cs)); for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) { const d = Math.hypot(c * cs + cs / 2 - px, r * cs + cs / 2 - py); const k = 1 - Math.abs(d - rad) / w; if (k > 0) { const i = r * cols + c, v = k * amt; if (v > heat[i]) heat[i] = v; } } } function draw() { const dt = Math.min(deltaTime / 1000, 0.05) || 0.016; const t = millis() / 1000; stamp++; // Pointer: moving through the falls disturbs them; dragging sends out glitch rings const p = pointerState(t); if (lastPx !== null && p.x >= 0 && p.y >= 0 && p.x <= width && p.y <= height) { const v = Math.hypot(p.x - lastPx, p.y - lastPy) / dt; const strength = Math.min(1, v / 900) * (p.pressed ? 1.3 : 0.6) * params.ripple; if (strength > 0.02) addHeat(p.x, p.y, cs * (4 + 4 * params.ripple), strength); if (p.pressed && v > 120 && t - lastGlitch > 0.16 && params.ripple > 0) { lastGlitch = t; pulses.push({ x: p.x, y: p.y, t0: t }); if (pulses.length > 6) pulses.shift(); if (typeof sfx !== 'undefined' && sfx) sfx.play(GLITCH, { volume: random(0.12, 0.26), rate: random(0.8, 1.3), pan: constrain((p.x / width) * 2 - 1, -1, 1) * 0.6 }); } } lastPx = p.x; lastPy = p.y; for (let k = pulses.length - 1; k >= 0; k--) { const pu = pulses[k], age = t - pu.t0; if (age > 1.1) { pulses.splice(k, 1); continue; } addRing(pu.x, pu.y, age * 520, cs * 1.6, params.ripple * 0.9 * (1 - age / 1.1)); } const heatLive = t < heatUntil; const decay = Math.exp(-dt * 2.4); if (heatLive) for (let i = 0; i < heat.length; i++) heat[i] *= decay; for (let k = 0; k < chars.length * 0.012; k++) chars[(Math.random() * chars.length) | 0] = (Math.random() * NC) | 0; if (Math.random() < 0.1) rowShift[(Math.random() * rows) | 0] = random(-1, 1); // Background g.globalCompositeOperation = 'source-over'; g.fillStyle = '#020a07'; g.fillRect(0, 0, width, height); g.font = `${(cs * 0.92).toFixed(1)}px monospace`; g.textAlign = 'center'; g.textBaseline = 'middle'; const glyph = (i, c, r, a, head) => { const h = heat[i]; if (h > 0.08 && Math.random() < h * 0.7) chars[i] = (Math.random() * NC) | 0; const shift = h > 0.12 ? Math.round(rowShift[r] * h * 2.2) * cs : 0; const al = Math.min(1, a + h * 0.55); if (al < 0.03) return; const hot = head || (h > 0.45 && Math.random() < 0.35); g.fillStyle = (hot ? headS : inkS)[Math.min(15, (al * 16) | 0)]; g.fillText(CHARS[chars[i]], c * cs + cs / 2 + shift, r * cs + cs / 2); drawn[i] = stamp; }; // Streams const spd = params.speed; for (let c = 0; c < cols; c++) { for (const s of streams[c]) { const prev = s.y; s.y += s.speed * spd * dt; if (prev < rows - 1 && s.y >= rows - 1 && splashes.length < 260) { for (let k = 0; k < 3; k++) splashes.push({ x: c * cs + cs / 2, y: height - cs * 0.5, vx: random(-60, 60), vy: random(-160, -50), life: 1 }); } if (s.y - s.len > rows) { newStream(s, false); continue; } const top = Math.floor(s.y); const L = Math.ceil(s.len); for (let k = 0; k <= L; k++) { const r = top - k; if (r < 0) break; if (r >= rows) continue; const b = Math.pow(1 - k / s.len, 1.6); if (b <= 0) break; glyph(r * cols + c, c, r, k === 0 ? 1 : b * 0.85, k === 0); } } } // Scrambled cells outside the streams if (heatLive) for (let i = 0; i < heat.length; i++) { if (heat[i] > 0.07 && drawn[i] !== stamp) { const r = (i / cols) | 0; glyph(i, i - r * cols, r, heat[i] * 0.35, false); } } // Glitch bars near fresh rings for (const pu of pulses) { const age = t - pu.t0; if (age < 0.25 && Math.random() < 0.6) { g.fillStyle = inkS[3]; const by = pu.y + random(-6, 6) * cs; g.fillRect(pu.x - random(40, 220), by, random(80, 440), random(1, 3)); } } // Spray where the falls pool for (let k = splashes.length - 1; k >= 0; k--) { const sp = splashes[k]; sp.life -= dt * 1.4; if (sp.life <= 0) { splashes.splice(k, 1); continue; } sp.vy += 320 * dt; sp.x += sp.vx * dt; sp.y += sp.vy * dt; g.fillStyle = headS[Math.min(15, (sp.life * 9) | 0)]; g.fillRect(sp.x, sp.y, 2, 2); } g.globalCompositeOperation = 'source-over'; const mist = 0.85 + 0.15 * Math.sin(t * 0.7); g.globalAlpha = mist; g.fillStyle = mistGrad; g.fillRect(0, height * 0.72, width, height * 0.28); g.globalAlpha = 1; if (overlay) g.drawImage(overlay, 0, 0, width, height); } /* @vybe:motion v1 (timeline, layers and states; edit them in the studio's Motion panel) {"v":1,"duration":6,"loop":true,"tracks":[{"control":"speed","keys":[{"time":0,"value":1.28},{"time":0.6166666666666667,"value":0.8},{"time":5.316666666666666,"value":1.28}]},{"control":"density","keys":[{"time":4.85,"value":0.916}]},{"control":"size","keys":[{"time":0.75,"value":18}]},{"control":"ripple","keys":[{"time":1.65,"value":1.18},{"time":2.783333333333333,"value":1.18}]},{"control":"trail","keys":[{"time":5.35,"value":1.75}]},{"control":"ink","keys":[{"time":0.6166666666666667,"value":"#daff24"},{"time":0.8833333333333333,"value":"#26fdee"},{"time":2.0166666666666666,"value":"#26f9fd"},{"time":3.216666666666667,"value":"#54fd26"},{"time":3.3833333333333333,"value":"#e08824"},{"time":3.816666666666667,"value":"#c1e024"},{"time":4.316666666666666,"value":"#fd2626"},{"time":5.383333333333334,"value":"#8726fd"},{"time":5.983333333333333,"value":"#d8ff14"}]}],"layers":[],"sounds":[],"variations":[]} */