[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6899e00e8d388191933a22a04b2664f7","versionInt","title","Algorithmic Nostalgia – Interactive Prototype (web)","type","code/react","content","import React, { useEffect, useRef, useState } from \"react\";\n\n// -------------------------------------------------------------\n// Algorithmic Nostalgia: \"過去なき原風景\" 体験用インタラクティブ・プロトタイプ\n// - ブラウザ上で風景（Canvas）と音（Web Audio）をリアルタイム合成\n// - 「夕暮れ」「田園」「家族団らん」などのタグ、温かさ（色）、ほろ苦さ（和声）を操作\n// - Startを押して体験を開始してください（初回は音声再生にユーザー操作が必要）\n// -------------------------------------------------------------\n\nexport default function AlgorithmicNostalgia() {\n // ---------- UI / State ----------\n const [isRunning, setIsRunning] = useState(false);\n const [warmth, setWarmth] = useState(0.75); // 色温度（0=寒色, 1=暖色）\n const [bittersweet, setBittersweet] = useState(0.6); // 和声キャラクター（0=憂い/短調寄り, 1=晴れ/長調寄り）\n const [grainAmount, setGrainAmount] = useState(0.25); // フィルム粒状感\n const [tags, setTags] = useState([\"夕暮れ\", \"田園\", \"家族団らん\"]);\n const [masterVolume, setMasterVolume] = useState(0.6);\n\n // ---------- Canvas refs ----------\n const canvasRef = useRef(null);\n const rafRef = useRef(null);\n const visualStateRef = useRef({ start: performance.now(), w: 0, h: 0, dpr: 1, pan: 0 });\n\n // ---------- Audio refs ----------\n const audioCtxRef = useRef(null);\n const audioNodesRef = useRef(null); // will hold graph + helpers\n const timersRef = useRef({});\n\n // ---------- Helpers ----------\n const toggleTag = (t) => {\n setTags((prev) => (prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]));\n };\n\n // ---------- Visuals (Canvas) ----------\n const startVisuals = () => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext(\"2d\");\n const dpr = window.devicePixelRatio || 1;\n const resize = () => {\n const rect = canvas.getBoundingClientRect();\n canvas.width = Math.max(1, Math.floor(rect.width * dpr));\n canvas.height = Math.max(1, Math.floor(rect.height * dpr));\n visualStateRef.current.w = canvas.width;\n visualStateRef.current.h = canvas.height;\n visualStateRef.current.dpr = dpr;\n };\n resize();\n window.addEventListener(\"resize\", resize);\n\n const hillsSeed = Math.random() * 1000;\n const fireflies = new Array(24).fill(0).map(() => ({\n x: Math.random(),\n y: Math.random() * 0.6 + 0.35,\n r: Math.random() * 1.8 + 0.8,\n p: Math.random() * Math.PI * 2,\n s: Math.random() * 0.4 + 0.6,\n }));\n const houses = new Array(40).fill(0).map(() => ({\n x: Math.random(),\n y: 0.72 + Math.random() * 0.1,\n b: Math.random() * 0.4 + 0.6,\n twinkle: Math.random() * Math.PI * 2,\n }));\n\n const noise = (x) => {\n // Simple smooth noise by summing sines\n return (\n Math.sin(x * 1.3 + hillsSeed) * 0.5 +\n Math.sin(x * 0.7 + hillsSeed * 1.3) * 0.3 +\n Math.sin(x * 0.21 + hillsSeed * 2.1) * 0.2\n );\n };\n\n const draw = (now) => {\n const { w, h } = visualStateRef.current;\n const t = now * 0.001;\n const panSpeed = 0.0015 + warmth * 0.0015; // ゆっくりパン\n visualStateRef.current.pan += panSpeed;\n const pan = visualStateRef.current.pan;\n\n // ---- Sky gradient (dusk) ----\n const g = ctx.createLinearGradient(0, 0, 0, h);\n const dusk = Math.min(1, Math.max(0, warmth));\n const topHue = 210 - dusk * 40; // 藍色→赤み\n const botHue = 30 + dusk * 25; // 橙〜赤\n g.addColorStop(0, `hsl(${topHue}, 40%, ${18 + (1 - dusk) * 12}%)`);\n g.addColorStop(0.65, `hsl(${topHue + 40}, 45%, ${22 + dusk * 10}%)`);\n g.addColorStop(1, `hsl(${botHue}, 70%, ${30 + dusk * 10}%)`);\n ctx.fillStyle = g;\n ctx.fillRect(0, 0, w, h);\n\n // ---- Sun glow (if dusk tag) ----\n if (tags.includes(\"夕暮れ\")) {\n const sunY = h * (0.78 - 0.05 * Math.sin(t * 0.1));\n const sunX = w * (0.2 + 0.1 * Math.sin(t * 0.03));\n const rg = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, Math.min(w, h) * 0.4);\n rg.addColorStop(0, `hsla(${botHue}, 85%, 75%, 0.65)`);\n rg.addColorStop(1, `hsla(${botHue}, 80%, 55%, 0)`);\n ctx.globalCompositeOperation = \"lighter\";\n ctx.fillStyle = rg;\n ctx.fillRect(0, 0, w, h);\n ctx.globalCompositeOperation = \"source-over\";\n }\n\n // ---- Hills (multi layers) ----\n const layers = 4;\n for (let i = 0; i < layers; i++) {\n const depth = i / (layers - 1);\n const yBase = h * (0.55 + depth * 0.35);\n const amp = h * (0.05 + (1 - depth) * 0.07);\n const hue = 110 - depth * 30 + warmth * 15;\n const light = 18 + depth * 15;\n ctx.fillStyle = `hsl(${hue}, ${12 + depth * 18}%, ${light}%)`;\n ctx.beginPath();\n ctx.moveTo(0, h);\n const steps = 80;\n for (let s = 0; s <= steps; s++) {\n const x = (s / steps) * w;\n const nx = (s / steps) * 12 + pan * (0.4 + depth * 0.6);\n const y = yBase + noise(nx) * amp * (0.6 + depth * 0.7);\n ctx.lineTo(x, y);\n }\n ctx.lineTo(w, h);\n ctx.closePath();\n ctx.fill();\n }\n\n // ---- House lights (\"家族団らん\"タグで強め) ----\n const houseBoost = tags.includes(\"家族団らん\") ? 1.0 : 0.5;\n houses.forEach((hh, idx) => {\n const x = hh.x * w + Math.sin(pan * 0.7 + idx) * 6;\n const y = hh.y * h + Math.sin(pan * 1.3 + idx * 1.7) * 2;\n const tw = (Math.sin(hh.twinkle + t * (0.3 + hh.b)) * 0.5 + 0.5) * hh.b * houseBoost;\n ctx.fillStyle = `hsla(${30 + warmth * 15}, 90%, ${60 + tw * 20}%, ${0.35 + tw * 0.45})`;\n ctx.beginPath();\n ctx.arc(x, y, 1.2 + tw * 2.2, 0, Math.PI * 2);\n ctx.fill();\n });\n\n // ---- Fireflies (田園タグで表示) ----\n if (tags.includes(\"田園\")) {\n fireflies.forEach((f, i) => {\n const x = (f.x + Math.sin(t * 0.07 + i) * 0.02 + Math.sin(pan * 0.2 + i) * 0.01) * w;\n const y = (f.y + Math.cos(t * 0.09 + i * 0.3) * 0.01) * h;\n const pulse = (Math.sin(f.p + t * (0.8 + f.s)) * 0.5 + 0.5) ** 2;\n ctx.fillStyle = `hsla(${60 + warmth * 20}, 90%, ${70 + pulse * 20}%, ${0.2 + pulse * 0.5})`;\n ctx.beginPath();\n ctx.arc(x, y, f.r * (0.5 + pulse), 0, Math.PI * 2);\n ctx.fill();\n });\n }\n\n // ---- Film grain / scratches ----\n const grain = grainAmount * 0.4 + 0.05;\n const cell = 3;\n const gw = Math.ceil(w / cell), gh = Math.ceil(h / cell);\n const img = ctx.createImageData(gw, gh);\n for (let i = 0; i < img.data.length; i += 4) {\n const n = Math.floor((Math.random() - 0.5) * 30 * grain);\n img.data[i] = 127 + n; // R\n img.data[i + 1] = 120 + n; // G\n img.data[i + 2] = 110 + n; // B\n img.data[i + 3] = 30 + Math.random() * 18; // A\n }\n const tmp = document.createElement(\"canvas\");\n tmp.width = gw; tmp.height = gh;\n const tctx = tmp.getContext(\"2d\");\n tctx.putImageData(img, 0, 0);\n ctx.imageSmoothingEnabled = false;\n ctx.globalAlpha = 0.35 * grain;\n ctx.drawImage(tmp, 0, 0, gw, gh, 0, 0, w, h);\n ctx.globalAlpha = 1;\n\n // occasional scratches\n if (Math.random() < 0.02 * grain) {\n ctx.globalAlpha = 0.06 + Math.random() * 0.06;\n ctx.strokeStyle = `rgba(200,190,160,0.9)`;\n ctx.beginPath();\n const sx = Math.random() * w;\n ctx.moveTo(sx, h * (0.4 + Math.random() * 0.6));\n ctx.lineTo(sx + (Math.random() - 0.5) * 30, h * (0.2 + Math.random() * 0.6));\n ctx.stroke();\n ctx.globalAlpha = 1;\n }\n\n rafRef.current = requestAnimationFrame(draw);\n };\n\n rafRef.current = requestAnimationFrame(draw);\n\n return () => {\n window.removeEventListener(\"resize\", resize);\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n };\n };\n\n // ---------- Audio (Web Audio) ----------\n const clamp = (x, a, b) => Math.min(b, Math.max(a, x));\n\n const noteFreq = (note, octave) => {\n const table = { C: 0, \"C#\": 1, Db: 1, D: 2, \"D#\": 3, Eb: 3, E: 4, F: 5, \"F#\": 6, Gb: 6, G: 7, \"G#\": 8, Ab: 8, A: 9, \"A#\": 10, Bb: 10, B: 11 };\n const n = table[note];\n const semisFromA4 = n - 9 + (octave - 4) * 12;\n return 440 * Math.pow(2, semisFromA4 / 12);\n };\n\n const makeImpulseResponse = (context, duration = 2.2, decay = 2.5) => {\n const rate = context.sampleRate;\n const len = Math.floor(duration * rate);\n const impulse = context.createBuffer(2, len, rate);\n for (let ch = 0; ch < 2; ch++) {\n const buf = impulse.getChannelData(ch);\n for (let i = 0; i < len; i++) {\n const x = 1 - i / len;\n buf[i] = (Math.random() * 2 - 1) * Math.pow(x, decay);\n }\n }\n return impulse;\n };\n\n const createAudioGraph = async () => {\n const ctx = new (window.AudioContext || window.webkitAudioContext)();\n await ctx.resume();\n\n const master = ctx.createGain();\n master.gain.value = masterVolume;\n master.connect(ctx.destination);\n\n const toneLPF = ctx.createBiquadFilter();\n toneLPF.type = \"lowpass\";\n toneLPF.frequency.value = 3000 + warmth * 10000; // 温かさ→高域開放\n toneLPF.Q.value = 0.6;\n toneLPF.connect(master);\n\n const dryBus = ctx.createGain();\n dryBus.gain.value = 1.0;\n dryBus.connect(toneLPF);\n\n const reverb = ctx.createConvolver();\n reverb.buffer = makeImpulseResponse(ctx, 2.8, 2.4);\n const revGain = ctx.createGain();\n revGain.gain.value = 0.22;\n reverb.connect(master);\n\n const revSend = ctx.createGain();\n revSend.gain.value = 0.7;\n revSend.connect(revGain);\n\n // --- Vinyl hiss (very low) ---\n const vinylBuf = ctx.createBuffer(1, ctx.sampleRate * 2, ctx.sampleRate);\n const vb = vinylBuf.getChannelData(0);\n for (let i = 0; i < vb.length; i++) vb[i] = (Math.random() * 2 - 1) * 0.5;\n const vinylSrc = ctx.createBufferSource();\n vinylSrc.buffer = vinylBuf;\n vinylSrc.loop = true;\n const vinylLPF = ctx.createBiquadFilter();\n vinylLPF.type = \"lowpass\"; vinylLPF.frequency.value = 6000;\n const vinylGain = ctx.createGain(); vinylGain.gain.value = 0.03;\n vinylSrc.connect(vinylLPF); vinylLPF.connect(vinylGain); vinylGain.connect(dryBus);\n vinylSrc.start();\n\n // --- Wind / drone (filtered noise) ---\n const droneBuf = ctx.createBuffer(1, ctx.sampleRate * 2, ctx.sampleRate);\n const db = droneBuf.getChannelData(0);\n let acc = 0;\n for (let i = 0; i < db.length; i++) { // brown-ish noise\n acc += (Math.random() * 2 - 1) * 0.02;\n acc = clamp(acc, -1, 1);\n db[i] = acc * 0.5;\n }\n const drone = ctx.createBufferSource();\n drone.buffer = droneBuf; drone.loop = true;\n const droneLPF = ctx.createBiquadFilter(); droneLPF.type = \"lowpass\"; droneLPF.frequency.value = 500;\n const droneGain = ctx.createGain(); droneGain.gain.value = 0.08 + 0.06 * warmth;\n drone.connect(droneLPF); droneLPF.connect(droneGain); droneGain.connect(dryBus);\n drone.start();\n\n // --- Crickets (FM-ish chirps) ---\n const playChirpGroup = (time) => {\n const base = 3000 + Math.random() * 1200;\n for (let k = 0; k < 3; k++) {\n const t0 = time + k * 0.05;\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n const bp = ctx.createBiquadFilter();\n bp.type = \"bandpass\"; bp.frequency.value = base; bp.Q.value = 6;\n osc.type = \"triangle\"; osc.frequency.setValueAtTime(base + Math.random() * 200, t0);\n gain.gain.setValueAtTime(0.0001, t0);\n gain.gain.exponentialRampToValueAtTime(0.06, t0 + 0.01);\n gain.gain.exponentialRampToValueAtTime(0.0001, t0 + 0.09 + Math.random() * 0.05);\n osc.connect(bp); bp.connect(gain); gain.connect(dryBus); gain.connect(revSend);\n osc.start(t0);\n osc.stop(t0 + 0.2);\n }\n };\n const cricketTimer = setInterval(() => {\n if (ctx.state !== \"running\") return;\n const now = ctx.currentTime;\n const jitter = Math.random() * 0.4;\n playChirpGroup(now + 0.05 + jitter);\n }, 1500);\n\n // --- Distant train horn (on demand) ---\n const triggerHorn = () => {\n const now = ctx.currentTime + 0.02;\n const base = 440 * (0.5 + Math.random() * 0.15); // ~A3-ish\n const osc1 = ctx.createOscillator();\n const osc2 = ctx.createOscillator();\n osc1.type = \"sawtooth\"; osc2.type = \"sine\";\n const gain = ctx.createGain(); gain.gain.setValueAtTime(0.0001, now);\n const bp = ctx.createBiquadFilter(); bp.type = \"bandpass\"; bp.frequency.value = base * 1.2; bp.Q.value = 4;\n osc1.frequency.setValueAtTime(base * 1.05, now);\n osc1.frequency.exponentialRampToValueAtTime(base * 0.75, now + 3.2);\n osc2.frequency.setValueAtTime(base * 2.01, now);\n osc2.frequency.exponentialRampToValueAtTime(base * 1.5, now + 3.2);\n gain.gain.exponentialRampToValueAtTime(0.35, now + 0.5);\n gain.gain.exponentialRampToValueAtTime(0.0001, now + 3.6);\n osc1.connect(bp); osc2.connect(bp); bp.connect(gain);\n gain.connect(revSend); // mostly wet\n gain.connect(dryBus);\n osc1.start(now); osc2.start(now);\n osc1.stop(now + 4.0); osc2.stop(now + 4.0);\n };\n\n // schedule occasional horn if \"田園\"タグが無い場合も稀に鳴らす\n const hornTimer = setInterval(() => {\n if (Math.random() < 0.18) triggerHorn();\n }, 11000);\n\n // --- Pad engine (detuned triads with smooth retune) ---\n const voices = [];\n const createVoice = () => {\n const o = ctx.createOscillator();\n o.type = \"sawtooth\";\n const vGain = ctx.createGain(); vGain.gain.value = 0.0;\n const lpf = ctx.createBiquadFilter(); lpf.type = \"lowpass\"; lpf.frequency.value = 1200 + warmth * 2400;\n o.connect(lpf); lpf.connect(vGain);\n vGain.connect(dryBus); vGain.connect(revSend);\n o.start();\n return { o, vGain, lpf };\n };\n for (let i = 0; i < 6; i++) voices.push(createVoice()); // 3 notes x 2 detune\n\n const setChord = (freqs) => {\n const now = ctx.currentTime;\n for (let i = 0; i < 3; i++) {\n const f = freqs[i];\n const vA = voices[i * 2 + 0];\n const vB = voices[i * 2 + 1];\n vA.o.detune.setValueAtTime(-6, now);\n vB.o.detune.setValueAtTime(6, now);\n vA.o.frequency.cancelScheduledValues(now);\n vB.o.frequency.cancelScheduledValues(now);\n vA.o.frequency.exponentialRampToValueAtTime(f, now + 1.2);\n vB.o.frequency.exponentialRampToValueAtTime(f, now + 1.2);\n vA.vGain.gain.cancelScheduledValues(now);\n vB.vGain.gain.cancelScheduledValues(now);\n vA.vGain.gain.linearRampToValueAtTime(0.05, now + 1.2);\n vB.vGain.gain.linearRampToValueAtTime(0.05, now + 1.2);\n vA.lpf.frequency.linearRampToValueAtTime(1000 + warmth * 2500, now + 1.2);\n vB.lpf.frequency.linearRampToValueAtTime(1000 + warmth * 2500, now + 1.2);\n }\n };\n\n const majorProg = [\n [ [\"C\",4], [\"E\",4], [\"G\",4] ], // C\n [ [\"A\",3], [\"C\",4], [\"E\",4] ], // Am\n [ [\"F\",3], [\"A\",3], [\"C\",4] ], // F\n [ [\"G\",3], [\"B\",3], [\"D\",4] ], // G\n ];\n const minorProg = [\n [ [\"A\",3], [\"C\",4], [\"E\",4] ], // Am\n [ [\"F\",3], [\"A\",3], [\"C\",4] ], // F\n [ [\"C\",4], [\"E\",4], [\"G\",4] ], // C\n [ [\"G\",3], [\"B\",3], [\"D\",4] ], // G\n ];\n\n const toFreqs = (triad) => triad.map(([n, o]) => noteFreq(n, o));\n\n let step = 0;\n const stepChord = () => {\n const useMajor = bittersweet >= 0.5;\n const prog = useMajor ? majorProg : minorProg;\n setChord(toFreqs(prog[step % prog.length]));\n step++;\n };\n\n stepChord();\n const chordMs = 8000 - Math.floor(bittersweet * 2000); // 6-8秒/和音\n const chordTimer = setInterval(stepChord, chordMs);\n\n // expose controls\n audioNodesRef.current = {\n ctx,\n master,\n toneLPF,\n dryBus,\n reverb,\n revGain,\n revSend,\n vinylSrc,\n drone,\n setChord,\n triggerHorn,\n voices,\n };\n\n timersRef.current = { chordTimer, cricketTimer, hornTimer };\n };\n\n const updateAudioTone = () => {\n const nodes = audioNodesRef.current;\n if (!nodes) return;\n const { ctx, toneLPF, voices } = nodes;\n const now = ctx.currentTime;\n toneLPF.frequency.linearRampToValueAtTime(3000 + warmth * 10000, now + 0.5);\n voices.forEach((v) => v.lpf.frequency.linearRampToValueAtTime(1000 + warmth * 2500, now + 0.5));\n };\n\n const setVolume = (v) => {\n const nodes = audioNodesRef.current;\n if (!nodes) return;\n nodes.master.gain.linearRampToValueAtTime(v, nodes.ctx.currentTime + 0.25);\n };\n\n const startAll = async () => {\n if (isRunning) return;\n setIsRunning(true);\n const cleanupVisual = startVisuals();\n await createAudioGraph();\n updateAudioTone();\n\n // store visual cleanup\n audioNodesRef.current._cleanupVisual = cleanupVisual;\n };\n\n const stopAll = async () => {\n setIsRunning(false);\n // stop visuals\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n if (audioNodesRef.current && audioNodesRef.current._cleanupVisual) audioNodesRef.current._cleanupVisual();\n\n // clear timers\n Object.values(timersRef.current || {}).forEach((id) => clearInterval(id));\n timersRef.current = {};\n\n // close audio\n if (audioNodesRef.current) {\n const { ctx } = audioNodesRef.current;\n try { await ctx.close(); } catch (e) {}\n }\n audioNodesRef.current = null;\n };\n\n // update tone when warmth changes\n useEffect(() => { updateAudioTone(); }, [warmth]);\n useEffect(() => { setVolume(masterVolume); }, [masterVolume]);\n\n useEffect(() => {\n return () => { // unmount cleanup\n stopAll();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const triggerHornUI = () => {\n if (audioNodesRef.current && audioNodesRef.current.triggerHorn) {\n audioNodesRef.current.triggerHorn();\n }\n };\n\n // ---------- UI ----------\n return (\n

\n\n

タグ

\n {[(\"夕暮れ\"), (\"田園\"), (\"家族団らん\")].map((t) => (\n \n ))}\n

\n\n

温かさ（色）{Math.round(warmth*100)}

\n setWarmth(parseFloat(e.target.value))} className=\"w-full\" />\n

ほろ苦さ（和声）{Math.round(bittersweet*100)}

\n setBittersweet(parseFloat(e.target.value))} className=\"w-full\" />\n

フィルム粒状{Math.round(grainAmount*100)}

\n setGrainAmount(parseFloat(e.target.value))} className=\"w-full\" />\n

\n\n

音量{Math.round(masterVolume*100)}

\n setMasterVolume(parseFloat(e.target.value))} className=\"w-full\" />\n

\n {!isRunning ? (\n \n ) : (\n <>\n \n \n \n )}\n

※初回は「開始」を押して音声を有効化してください。

\n\n

この試作は、「共有された文化的記憶が喚起する懐かしさ」を、\n ヒルライン・家の灯り・虫の声・遠い汽笛・フィルム粒状といった普遍的手触りに還元して再合成しています。\n UIのパラメータは色温度（温かさ）、和声の指向（ほろ苦さ）に連動します。

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","7913559811170048550","traceTime",1782677642093]

アルゴリズミック・ノスタルジア