const canvas = document.getElementById("rainCanvas"); const ctx = canvas.getContext("2d", { alpha: true }); const isEmbedded = window.self !== window.top; document.documentElement.classList.toggle("is-embedded", isEmbedded); const layout = document.getElementById("appLayout"); const panel = document.getElementById("controlPanel"); const mobilePanelToggle = document.getElementById("mobilePanelToggle"); const mobilePanelToggleText = mobilePanelToggle?.querySelector(".mobile-panel-toggle__text"); const panelClose = document.getElementById("panelClose"); const mobileMedia = window.matchMedia("(max-width: 820px)"); const scanlines = document.getElementById("scanlines"); const densityRange = document.getElementById("densityRange"); const speedRange = document.getElementById("speedRange"); const sizeSelect = document.getElementById("sizeSelect"); const glowSelect = document.getElementById("glowSelect"); const flashToggle = document.getElementById("flashToggle"); const scanToggle = document.getElementById("scanToggle"); const densityLabel = document.getElementById("densityLabel"); const speedLabel = document.getElementById("speedLabel"); const densityReadout = document.getElementById("densityReadout"); const speedReadout = document.getElementById("speedReadout"); const sizeReadout = document.getElementById("sizeReadout"); const columnsReadout = document.getElementById("columnsReadout"); const modeReadout = document.getElementById("modeReadout"); const modeButtons = document.querySelectorAll(".mode"); const glyphPools = { kana: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンガギグゲゴザジズゼゾダヂヅデドパピプペポァィゥェォャュョッ", kanji: "電雨空山川気東西南北人心時光影網線機号信夜都界流視網圧層量記録回路波零", digits: "0123456789", latin: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", symbols: "+-*/=%<>[]{}()¦|:;.,^~_#$&" }; const canvasFontFamily = `"MS Gothic","Yu Gothic","Meiryo",monospace`; const state = { width: 1, height: 1, dpr: 1, fontSize: 14, speed: 1.2, density: 0.78, glow: "medium", flash: true, columns: [], lastTime: 0, rafId: 0, mode: "classic", fadeAlpha: 0.18, resizeTimer: 0, lastObservedWidth: 0, lastObservedHeight: 0 }; const sizeProfiles = [ { scale: 0.82, weight: 0.26, speed: 0.9, lengthMin: 18, lengthMax: 44, drift: 0.06 }, { scale: 1, weight: 0.52, speed: 1, lengthMin: 20, lengthMax: 52, drift: 0.1 }, { scale: 1.28, weight: 0.22, speed: 1.08, lengthMin: 14, lengthMax: 34, drift: 0.16 } ]; const presets = { classic: { density: 84, speed: 116, size: 14, glow: "soft", flash: true, fadeAlpha: 0.18 }, dense: { density: 96, speed: 106, size: 12, glow: "soft", flash: true, fadeAlpha: 0.16 }, fast: { density: 88, speed: 176, size: 14, glow: "medium", flash: true, fadeAlpha: 0.2 } }; function syncMobilePanelUI() { if (!mobilePanelToggle) return; const isOpen = layout?.classList.contains("panel-open"); mobilePanelToggle.setAttribute("aria-expanded", isOpen ? "true" : "false"); mobilePanelToggle.setAttribute("aria-label", isOpen ? "Close controls" : "Open controls"); if (mobilePanelToggleText) { mobilePanelToggleText.textContent = isOpen ? "Close" : "Controls"; } } function closeMobilePanel() { if (!layout) return; layout.classList.remove("panel-open"); syncMobilePanelUI(); } function openMobilePanel() { if (!layout) return; layout.classList.add("panel-open"); syncMobilePanelUI(); } function toggleMobilePanel() { if (!mobileMedia.matches || !layout) return; layout.classList.toggle("panel-open"); syncMobilePanelUI(); } if (mobilePanelToggle) { mobilePanelToggle.addEventListener("click", toggleMobilePanel); } if (panelClose) { panelClose.addEventListener("click", closeMobilePanel); } document.addEventListener("click", (event) => { if (!mobileMedia.matches || !layout?.classList.contains("panel-open")) return; const clickedPanel = panel?.contains(event.target); const clickedToggle = mobilePanelToggle?.contains(event.target); if (!clickedPanel && !clickedToggle) { closeMobilePanel(); } }); document.addEventListener("keydown", (event) => { if (event.key === "Escape") { closeMobilePanel(); } }); function handlePanelModeChange() { if (!mobileMedia.matches) { closeMobilePanel(); } else { syncMobilePanelUI(); } scheduleResize(); } if (typeof mobileMedia.addEventListener === "function") { mobileMedia.addEventListener("change", handlePanelModeChange); } else if (typeof mobileMedia.addListener === "function") { mobileMedia.addListener(handlePanelModeChange); } function rand(min, max) { return Math.random() * (max - min) + min; } function pickFromString(str) { return str[Math.floor(Math.random() * str.length)]; } function pickGlyph() { const r = Math.random(); if (r < 0.36) return pickFromString(glyphPools.kana); if (r < 0.5) return pickFromString(glyphPools.kanji); if (r < 0.72) return pickFromString(glyphPools.digits); if (r < 0.88) return pickFromString(glyphPools.latin); return pickFromString(glyphPools.symbols); } function pickSizeProfile() { const r = Math.random(); let cursor = 0; for (const profile of sizeProfiles) { cursor += profile.weight; if (r <= cursor) return profile; } return sizeProfiles[1]; } function getCanvasRect() { const rect = canvas.getBoundingClientRect(); return { width: Math.max(1, Math.floor(rect.width)), height: Math.max(1, Math.floor(rect.height)) }; } function createColumn(index, laneSpacing) { const profile = pickSizeProfile(); const fontSize = Math.max(10, Math.round(state.fontSize * profile.scale)); const step = Math.max(fontSize + 1, Math.round(fontSize * 1.02)); const length = Math.floor(rand(profile.lengthMin, profile.lengthMax)); return { index, profile, x: index * laneSpacing + rand(-laneSpacing * profile.drift, laneSpacing * profile.drift), y: rand(-state.height, 0), speedBase: rand(0.82, 1.55) * state.speed * profile.speed, fontSize, step, length, chars: Array.from({ length }, () => pickGlyph()), swapRate: rand(0.01, 0.032), respawnBias: rand(0.92, 1.08) }; } function buildColumns() { const laneSpacing = Math.max(10, Math.round(state.fontSize * 0.9)); const total = Math.max(12, Math.floor(state.width / laneSpacing)); const nextColumns = []; for (let i = 0; i < total; i++) { if (Math.random() <= state.density) { nextColumns.push(createColumn(i, laneSpacing)); } } state.columns = nextColumns; columnsReadout.textContent = String(total).padStart(3, "0"); } function resizeCanvas(force = false) { const rect = getCanvasRect(); const nextDpr = Math.min(window.devicePixelRatio || 1, 2); const changed = force || rect.width !== state.width || rect.height !== state.height || nextDpr !== state.dpr; if (!changed) return; state.width = rect.width; state.height = rect.height; state.dpr = nextDpr; canvas.width = Math.max(1, Math.floor(state.width * state.dpr)); canvas.height = Math.max(1, Math.floor(state.height * state.dpr)); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.scale(state.dpr, state.dpr); ctx.textBaseline = "top"; ctx.textAlign = "center"; ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0, 0, state.width, state.height); buildColumns(); } function scheduleResize() { clearTimeout(state.resizeTimer); state.resizeTimer = setTimeout(() => resizeCanvas(), 60); } function handleObservedResize(width, height) { const widthDelta = Math.abs(width - state.lastObservedWidth); const heightDelta = Math.abs(height - state.lastObservedHeight); if (isEmbedded && state.lastObservedWidth) { const meaningfulWidthChange = widthDelta >= 8; const meaningfulHeightChange = heightDelta >= 28; if (!meaningfulWidthChange && !meaningfulHeightChange) return; } state.lastObservedWidth = width; state.lastObservedHeight = height; scheduleResize(); } function getAccent(alpha = 1) { return `rgba(112,212,132,${alpha})`; } function getBody(alpha = 1) { return `rgba(90,196,112,${alpha})`; } function getGlowBlur() { if (state.glow === "soft") return 2; if (state.glow === "hard") return 7; return 4; } function drawFade() { ctx.fillStyle = `rgba(0, 0, 0, ${state.fadeAlpha})`; ctx.fillRect(0, 0, state.width, state.height); } function respawnColumn(col) { const laneSpacing = Math.max(10, Math.round(state.fontSize * 0.9)); const next = createColumn(col.index, laneSpacing); col.profile = next.profile; col.x = next.x; col.y = rand(-state.height * 0.28, next.step * 2); col.speedBase = next.speedBase * col.respawnBias; col.fontSize = next.fontSize; col.step = next.step; col.length = next.length; col.chars = next.chars; col.swapRate = next.swapRate; } function drawColumn(col, dt) { col.y += col.speedBase * dt * 0.04; const tailHeight = col.length * col.step; if (col.y - tailHeight > state.height - col.step * 2) { respawnColumn(col); } ctx.font = `${col.fontSize}px ${canvasFontFamily}`; for (let i = 0; i < col.length; i++) { const y = col.y - i * col.step; if (y < -col.step * 3 || y > state.height + col.step * 3) continue; if (Math.random() < col.swapRate) { col.chars[i] = pickGlyph(); } const fade = 1 - i / col.length; const alpha = Math.max(0.18, fade * 0.84); if (i === 0 && state.flash) { ctx.shadowBlur = getGlowBlur(); ctx.shadowColor = getAccent(0.24); ctx.fillStyle = "rgba(230,255,236,0.96)"; } else if (i < 3) { ctx.shadowBlur = getGlowBlur() * 0.45; ctx.shadowColor = getAccent(0.14); ctx.fillStyle = getAccent(Math.max(alpha, 0.5)); } else { ctx.shadowBlur = 0; ctx.fillStyle = getBody(Math.max(0.16, alpha * 0.9)); } ctx.fillText(col.chars[i], col.x + col.step * 0.45, y); } ctx.shadowBlur = 0; } function animate(ts) { if (!state.lastTime) state.lastTime = ts; const dt = Math.min(34, ts - state.lastTime); state.lastTime = ts; drawFade(); for (let i = 0; i < state.columns.length; i++) { drawColumn(state.columns[i], dt); } state.rafId = requestAnimationFrame(animate); } function updateUI() { densityLabel.textContent = `${Math.round(state.density * 100)}%`; densityReadout.textContent = `${Math.round(state.density * 100)}%`; speedLabel.textContent = `${state.speed.toFixed(2)}x`; speedReadout.textContent = `${state.speed.toFixed(2)}x`; sizeReadout.textContent = `${state.fontSize}px`; modeReadout.textContent = state.mode; } function applyMode(mode) { const preset = presets[mode]; state.mode = mode; state.density = preset.density / 100; state.speed = preset.speed / 100; state.fontSize = preset.size; state.glow = preset.glow; state.flash = preset.flash; state.fadeAlpha = preset.fadeAlpha; densityRange.value = preset.density; speedRange.value = preset.speed; sizeSelect.value = String(preset.size); glowSelect.value = preset.glow; flashToggle.checked = preset.flash; modeButtons.forEach((btn) => { btn.classList.toggle("active", btn.dataset.mode === mode); }); updateUI(); resizeCanvas(true); } densityRange.addEventListener("input", () => { state.density = Number(densityRange.value) / 100; updateUI(); buildColumns(); }); speedRange.addEventListener("input", () => { state.speed = Number(speedRange.value) / 100; updateUI(); for (const col of state.columns) { col.speedBase = rand(0.82, 1.55) * state.speed * col.profile.speed; } }); sizeSelect.addEventListener("change", () => { state.fontSize = Number(sizeSelect.value); updateUI(); resizeCanvas(true); }); glowSelect.addEventListener("change", () => { state.glow = glowSelect.value; }); flashToggle.addEventListener("change", () => { state.flash = flashToggle.checked; }); scanToggle.addEventListener("change", () => { scanlines.style.display = scanToggle.checked ? "block" : "none"; }); modeButtons.forEach((btn) => { btn.addEventListener("click", () => { applyMode(btn.dataset.mode); if (mobileMedia.matches) { closeMobilePanel(); } }); }); window.addEventListener("resize", () => { const rect = getCanvasRect(); handleObservedResize(rect.width, rect.height); }); const observedStage = document.querySelector(".stage-inner"); if (observedStage && typeof ResizeObserver !== "undefined") { const resizeObserver = new ResizeObserver((entries) => { const entry = entries[0]; if (!entry) return; const rect = entry.contentRect; handleObservedResize(Math.floor(rect.width), Math.floor(rect.height)); }); resizeObserver.observe(observedStage); } syncMobilePanelUI(); applyMode("classic"); resizeCanvas(true); updateUI(); state.rafId = requestAnimationFrame(animate);

Text Rain