[{"_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","68c68735f1008191a601dbbb5999f041","versionInt","title","Archetype Rite — Interactive Simulator (prototype)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// === Archetype Rite — Interactive Simulator (Prototype) ===\n// 操作方法：\n// 1) Start を押して Audio を有効化（または Run Demo で自動再生）\n// 2) Archetype を選択\n// 3) Canvas 内をドラッグ：上へドラッグ = 両手を上げる（handsY）\n// 4) HUM と BREATH スライダーで “声の強さ／呼吸の穏やかさ” を操作\n// 5) State が Intro→Threshold→Trial→Revelation→Return と遷移\n// 6) Save Frame でスクリーンショット保存\n\n// ------------------------------\n// 🔎 Dev self-tests (runtime assertions)\n// ------------------------------\nexport function formatLog(prev: string, msg: string, timeStr?: string): string {\n const now = timeStr ?? new Date().toLocaleTimeString();\n const combined = `${now} ${msg}\\n${prev || \"\"}`;\n return combined.slice(0, 2000);\n}\n\nconst clamp01 = (x: number) => Math.max(0, Math.min(1, x));\n\nexport function autopilotValuesAt(t: number) {\n const hum = clamp01(0.5 + 0.4 * Math.sin(t * 1.3));\n const breath = clamp01(0.7 + 0.25 * Math.sin(t * 0.6 + 1.0));\n const hands = clamp01(0.5 + 0.5 * Math.sin(t * 0.9 + 0.3));\n return { hum, breath, hands };\n}\n\nfunction runDevTests() {\n const T = \"00:00:00\";\n const out1 = formatLog(\"\", \"Hello\", T);\n console.assert(out1 === `${T} Hello\\n`, \"formatLog: basic concat with newline\");\n\n const prevLong = \"A\".repeat(2500);\n const out2 = formatLog(prevLong, \"X\", T);\n console.assert(out2.length === 2000, \"formatLog: clamps to 2000 chars\");\n\n const out3 = formatLog(\"Prev\", \"Msg\", T);\n console.assert(out3.startsWith(`${T} Msg\\nPrev`), \"formatLog: order now msg\\\\nprev\");\n\n // autopilot values are always in [0,1]\n for (const tt of [0, 0.5, 1, 2, 10, 100]) {\n const v = autopilotValuesAt(tt);\n console.assert(v.hum >= 0 && v.hum <= 1, \"autopilot hum in range\");\n console.assert(v.breath >= 0 && v.breath <= 1, \"autopilot breath in range\");\n console.assert(v.hands >= 0 && v.hands <= 1, \"autopilot hands in range\");\n }\n}\nif (typeof window !== \"undefined\") {\n try { runDevTests(); } catch { /* no-op */ }\n}\n\nexport default function ArchetypeRiteSimulator() {\n // UI states\n const [running, setRunning] = useState(false);\n const [demo, setDemo] = useState(false);\n const [archetype, setArchetype] = useState(\"World Tree\");\n const [hum, setHum] = useState(0); // 0..1（声の強さ）\n const [breath, setBreath] = useState(0.5); // 0..1（0=激しい, 1=穏やか）\n const [handsY, setHandsY] = useState(0); // 0..1（下→上）\n const [state, setState] = useState(\"Intro\");\n const [progress, setProgress] = useState(0); // 0..1（次の状態まで）\n const [log, setLog] = useState(\"\");\n\n const canvasRef = useRef(null);\n const containerRef = useRef(null);\n\n // Audio\n const audioCtxRef = useRef(null);\n const gainRef = useRef(null);\n const oscRef = useRef(null);\n\n // Pointer drag for handsY\n const draggingRef = useRef(false);\n\n // Particles\n type Particle = { x: number; y: number; vx: number; vy: number; life: number };\n const particlesRef = useRef([]);\n\n // Dimensions\n const [size, setSize] = useState({ w: 960, h: 540 });\n\n // Demo autopilot\n const demoTimeRef = useRef(0);\n const demoTimerRef = useRef(null);\n\n // Archetype presets\n const presets = useMemo(() => {\n return {\n \"World Tree\": {\n baseFreq: 110,\n colors: [\"#0b1f14\", \"#0f4d2e\", \"#56d17a\"],\n text: {\n Intro: \"あなたは世界樹。地と天をつなぐ橋。上へ腕を伸ばし、息を整え、微かな声で世界を満たす。\",\n Threshold: \"樹液が巡り、幹が脈動する。葉はざわめき、冠光が増す。\",\n Trial: \"風が強まる。天地が離れかける。手を高く保ち、声でつなぎとめよ。\",\n Revelation: \"光の柱が立ち、根は星に届く。あなたは道そのもの。\",\n Return: \"樹は静まり、すべての息はゆっくりと循環へ還る。\",\n },\n },\n Hero: {\n baseFreq: 196,\n colors: [\"#1a0c00\", \"#6a2b00\", \"#ffb366\"],\n text: {\n Intro: \"あなたは英雄。灯は小さくとも前進が火を育てる。\",\n Threshold: \"踏み出すごとに色は温み、道が現れる。\",\n Trial: \"恐れは影。速さと声でそれを貫け。\",\n Revelation: \"心は燃え、世界は色づく。\",\n Return: \"足跡は余熱を残し、道は次へと続く。\",\n },\n },\n Trickster: {\n baseFreq: 247,\n colors: [\"#100014\", \"#5a1a6a\", \"#ffd1ff\"],\n text: {\n Intro: \"あなたはトリックスター。秩序は遊びのためにある。\",\n Threshold: \"世界はほどけ、糸は新たに編まれる。\",\n Trial: \"規則をくすぐり、境界を笑え。\",\n Revelation: \"道化の一撃が真実の鈴を鳴らす。\",\n Return: \"笑いは静かに余韻を残す。\",\n },\n },\n Sage: {\n baseFreq: 174,\n colors: [\"#030b18\", \"#0a2a4a\", \"#c8e6ff\"],\n text: {\n Intro: \"あなたは賢者。霧は呼吸で晴れる。\",\n Threshold: \"静けさが形を与え、記号が姿を見せる。\",\n Trial: \"息を長く、声は細く。視界はひらける。\",\n Revelation: \"沈黙の中心に、答えは漂う。\",\n Return: \"霧は水に還り、輪の外周に重なる。\",\n },\n },\n } as const;\n }, []);\n\n const current = presets[archetype as keyof typeof presets];\n\n // Helpers\n const pushLog = (msg: string) => setLog((l) => formatLog(l, msg));\n\n // Audio handling\n const initAudio = async () => {\n if (audioCtxRef.current) return;\n const Ctor: any = (window as any).AudioContext || (window as any).webkitAudioContext;\n const ctx = new Ctor();\n const gain = ctx.createGain();\n gain.gain.value = 0.0;\n\n const osc = ctx.createOscillator();\n osc.type = \"sine\";\n osc.frequency.value = current.baseFreq;\n osc.connect(gain).connect(ctx.destination);\n osc.start();\n\n audioCtxRef.current = ctx;\n gainRef.current = gain;\n oscRef.current = osc;\n };\n\n useEffect(() => {\n // update base freq when archetype changes\n if (oscRef.current && audioCtxRef.current) {\n const target = current.baseFreq;\n try {\n (oscRef.current.frequency as any).setTargetAtTime(target, audioCtxRef.current.currentTime, 0.1);\n } catch {\n oscRef.current.frequency.value = target;\n }\n }\n }, [archetype, current.baseFreq]);\n\n // Audio volume = hum * mix of hands and breath calmness\n useEffect(() => {\n if (!gainRef.current || !audioCtxRef.current) return;\n const ctx = audioCtxRef.current;\n const vol = Math.min(1, Math.max(0, hum * (0.6 + 0.2 * handsY + 0.2 * breath)));\n try {\n (gainRef.current.gain as any).setTargetAtTime(vol * 0.2, ctx.currentTime, 0.05);\n } catch {\n gainRef.current.gain.value = vol * 0.2;\n }\n }, [hum, handsY, breath]);\n\n // Canvas + particles\n useEffect(() => {\n const el = canvasRef.current;\n if (!el) return;\n\n const ctx = el.getContext(\"2d\");\n if (!ctx) return;\n\n let raf = 0;\n const particles: Particle[] = particlesRef.current;\n\n // init particles if empty\n if (particles.length === 0) {\n for (let i = 0; i < 300; i++) {\n particles.push({ x: Math.random(), y: Math.random(), vx: 0, vy: 0, life: Math.random() });\n }\n }\n\n const bgA = current.colors[0];\n const bgB = current.colors[1];\n const fg = current.colors[2];\n\n const archetypeMode = archetype;\n\n let last = performance.now();\n\n const draw = (t: number) => {\n const now = performance.now();\n const dt = Math.min(0.05, (now - last) / 1000);\n last = now;\n\n const width = el.width;\n const height = el.height;\n\n // background gradient\n const grad = ctx.createLinearGradient(0, 0, 0, height);\n grad.addColorStop(0, bgB);\n grad.addColorStop(1, bgA);\n ctx.fillStyle = grad;\n ctx.fillRect(0, 0, width, height);\n\n // compute energy from inputs\n const calm = breath; // 0..1 (1=落ち着き)\n const energy = 0.4 * hum + 0.4 * handsY + 0.2 * (1 - calm); // 0..1 目安\n\n // state machine progression\n const targetPerState = 6; // 秒程度\n setProgress((p) => {\n let next = p + energy * dt * (state === \"Intro\" ? 0.8 : state === \"Threshold\" ? 1.0 : state === \"Trial\" ? 1.2 : 1.0);\n next = Math.min(1, next / (targetPerState / 10));\n if (next >= 1) {\n setProgress(0);\n setState((s) => nextState(s));\n pushLog(`→ ${state} complete`);\n }\n return Math.min(next, 0.9999);\n });\n\n // visual motif per archetype\n const count = 260;\n while (particles.length < count) particles.push({ x: Math.random(), y: Math.random(), vx: 0, vy: 0, life: Math.random() });\n\n for (let i = 0; i < particles.length; i++) {\n const p = particles[i];\n // velocity depends on archetype\n if (archetypeMode === \"World Tree\") {\n p.vx += (Math.sin((p.y * 10 + t * 0.001) * 2) * 0.0001 - p.vx) * 0.1;\n p.vy = -0.02 - energy * 0.05 * (0.5 + Math.random() * 0.5);\n } else if (archetypeMode === \"Hero\") {\n const cx = 0.5, cy = 0.8;\n const dx = p.x - cx;\n const dy = p.y - cy;\n const d = Math.max(0.001, Math.hypot(dx, dy));\n p.vx = (dx / d) * (0.02 + energy * 0.08);\n p.vy = (dy / d) * (0.02 + energy * 0.08);\n } else if (archetypeMode === \"Trickster\") {\n p.vx += (Math.random() - 0.5) * 0.02 * (0.5 + energy);\n p.vy += (Math.random() - 0.5) * 0.02 * (0.5 + energy);\n } else if (archetypeMode === \"Sage\") {\n p.vx += (Math.sin((p.x + p.y + t * 0.0007) * 6.28) * 0.002 - p.vx) * 0.1;\n p.vy = -0.01 - (1 - calm) * 0.02; // 静けさで霧が晴れる\n }\n\n p.x += p.vx * dt * 60;\n p.y += p.vy * dt * 60;\n\n // wrap\n if (p.x < 0) p.x += 1; if (p.x > 1) p.x -= 1;\n if (p.y < 0) p.y += 1; if (p.y > 1) p.y -= 1;\n\n // draw\n const px = p.x * width;\n const py = p.y * height;\n const r = 1.5 + energy * 2.5;\n\n ctx.beginPath();\n ctx.arc(px, py, r, 0, Math.PI * 2);\n ctx.fillStyle = fg;\n ctx.globalAlpha = 0.6;\n ctx.fill();\n }\n\n // overlays per archetype\n ctx.globalAlpha = 1;\n if (archetypeMode === \"World Tree\") {\n // trunk glow based on handsY & hum\n const glow = Math.max(0.05, 0.1 + 0.6 * (0.5 * handsY + 0.5 * hum));\n ctx.fillStyle = fg;\n ctx.globalAlpha = 0.15 + glow * 0.2;\n const w = Math.max(4, width * (0.01 + glow * 0.05));\n ctx.fillRect(width / 2 - w / 2, 0, w, height);\n ctx.globalAlpha = 1;\n } else if (archetypeMode === \"Hero\") {\n // warm vignette increases with energy\n const vignette = ctx.createRadialGradient(width / 2, height * 0.65, 50, width / 2, height * 0.65, Math.max(width, height));\n vignette.addColorStop(0, \"rgba(255,180,100,0.25)\");\n vignette.addColorStop(1, \"rgba(0,0,0,0)\");\n ctx.fillStyle = vignette;\n ctx.fillRect(0, 0, width, height);\n } else if (archetypeMode === \"Trickster\") {\n // jittered ribbons\n ctx.strokeStyle = fg;\n ctx.globalAlpha = 0.4;\n for (let k = 0; k < 8; k++) {\n ctx.beginPath();\n let x = (k / 8) * width;\n let y = height * 0.2;\n ctx.moveTo(x, y);\n for (let s = 0; s < 30; s++) {\n x += (Math.random() - 0.5) * 20 * (0.3 + 0.7 * hum);\n y += 10 + Math.sin((t * 0.001 + s) * 0.6) * 4;\n ctx.lineTo(x, y);\n }\n ctx.stroke();\n }\n ctx.globalAlpha = 1;\n } else if (archetypeMode === \"Sage\") {\n // fog overlay clears with calmness\n const fog = 1 - calm; // 0..1\n ctx.fillStyle = `rgba(200,220,255,${0.35 * fog})`;\n ctx.fillRect(0, 0, width, height);\n }\n\n requestAnimationFrame(draw);\n };\n\n const id = requestAnimationFrame(draw);\n return () => cancelAnimationFrame(id);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [archetype, hum, handsY, breath, state, size.w, size.h]);\n\n // layout / resize\n useEffect(() => {\n const onResize = () => {\n const el = containerRef.current;\n if (!el) return;\n const rect = el.getBoundingClientRect();\n const w = Math.min(1024, Math.max(720, rect.width));\n const h = Math.round((w * 9) / 16);\n setSize({ w, h });\n if (canvasRef.current) {\n canvasRef.current.width = w * devicePixelRatio;\n canvasRef.current.height = h * devicePixelRatio;\n const ctx = canvasRef.current.getContext(\"2d\");\n if (ctx) ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);\n }\n };\n onResize();\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n // pointer events\n const onPointerDown = (e: React.PointerEvent) => {\n draggingRef.current = true;\n (e.target as HTMLElement).setPointerCapture(e.pointerId);\n updateHandsFromEvent(e);\n };\n const onPointerUp = (_e: React.PointerEvent) => {\n draggingRef.current = false;\n };\n const onPointerMove = (e: React.PointerEvent) => {\n if (!draggingRef.current) return;\n updateHandsFromEvent(e);\n };\n const updateHandsFromEvent = (e: React.PointerEvent) => {\n const rect = (e.target as HTMLCanvasElement).getBoundingClientRect();\n const y = (e.clientY - rect.top) / rect.height; // 0..1\n const v = Math.max(0, Math.min(1, 1 - y));\n setHandsY(v);\n };\n\n const nextState = (s: string) => {\n switch (s) {\n case \"Intro\":\n return \"Threshold\";\n case \"Threshold\":\n return \"Trial\";\n case \"Trial\":\n return \"Revelation\";\n case \"Revelation\":\n return \"Return\";\n case \"Return\":\n return \"Intro\";\n default:\n return \"Intro\";\n }\n };\n\n const narration = current.text[state as keyof typeof current.text];\n\n const start = async () => {\n await initAudio();\n if (audioCtxRef.current?.state === \"suspended\") await audioCtxRef.current.resume();\n setRunning(true);\n pushLog(\"Audio started\");\n };\n const stop = async () => {\n setRunning(false);\n if (gainRef.current) gainRef.current.gain.value = 0;\n await audioCtxRef.current?.suspend();\n pushLog(\"Audio suspended\");\n };\n\n // Demo mode driver\n useEffect(() => {\n if (!demo) {\n if (demoTimerRef.current !== null) {\n clearInterval(demoTimerRef.current);\n demoTimerRef.current = null;\n }\n return;\n }\n const id = window.setInterval(() => {\n demoTimeRef.current += 0.05;\n const t = demoTimeRef.current;\n const v = autopilotValuesAt(t);\n setHum(v.hum);\n setBreath(v.breath);\n setHandsY(v.hands);\n }, 50);\n demoTimerRef.current = id;\n return () => clearInterval(id);\n }, [demo]);\n\n const saveFrame = () => {\n const el = canvasRef.current; if (!el) return;\n const url = el.toDataURL(\"image/png\");\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `archetype_${archetype}_${state}.png`;\n a.click();\n };\n\n const reset = () => {\n setState(\"Intro\");\n setProgress(0);\n setHum(0);\n setBreath(0.5);\n setHandsY(0);\n pushLog(\"Reset\");\n };\n\n const toggleDemo = async () => {\n if (!demo) {\n if (!running) await start();\n setDemo(true);\n pushLog(\"Demo mode ON\");\n } else {\n setDemo(false);\n pushLog(\"Demo mode OFF\");\n }\n };\n\n return (\n

Avatar Archetypes — Rite Simulator

\n {!running ? (\n \n ) : (\n \n )}\n \n \n \n

\n\n

\n Archetype\n \n

\n HUM\n setHum(parseFloat(e.target.value))} className=\"w-40\" />\n {hum.toFixed(2)}\n

\n BREATH\n setBreath(parseFloat(e.target.value))} className=\"w-40\" />\n {breath.toFixed(2)}\n

\n \n

\n Raise hands: drag up ｜ Hum: slider ｜ Breath calmness: slider\n

State: {state}

\n\n

Narration

{narration}

\n\n

Traits (プロテウス効果の示唆)

\n {archetype === \"World Tree\" && (\n

姿勢が伸び、腕を上げ続けたくなる
支える／つなぐ所作が増える

\n )}\n {archetype === \"Hero\" && (\n

前傾姿勢・ステップが増える
強い色彩を好む気分になる

\n )}\n {archetype === \"Trickster\" && (\n

斜めの動き・急な転換が増える
冗談やいたずら心が湧く

\n )}\n {archetype === \"Sage\" && (\n

呼吸が深くなり、動作がスローになる
周囲の記号や関係に意識が向く

\n )}\n

\n\n

Experience Log

\n {log}\n

\n\n

\n * ブラウザの制約上、音はユーザー操作後に再生されます（Run Demo ボタンでも開始可）。\n

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