메뉴
Conventions for adding a room to the mathwave Three.js gallery — file layout, the buildless ES-module/import-map setup, kiosk navigation, the shared common.js engine, and the ROOMS registry. Use this first whenever creating or modifying any mathwave room.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | mathwave-overview |
| description | Conventions for adding a room to the mathwave Three.js gallery — file layout, the buildless ES-module/import-map setup, kiosk navigation, the shared common.js engine, and the ROOMS registry. Use this first whenever creating or modifying any mathwave room. |
mathwave is a buildless Three.js gallery: ES modules + import maps, Three.js
r0.169 + math.js from CDN, no build step. Serve over HTTP (python3 -m http.server),
never file://. It's a kiosk, not a website — index.html redirects straight
into the first room; there is no landing page or menu.
pieces/<room>.html the page (HUD chrome + importmap + the module <script>)
src/<room>.js the room logic (imports from ./common.js)
Copy an existing pair as your template — pick by room type:
src/fractal.js)src/reaction.js)src/nbody.js)src/wolfram.js)<canvas id="scene">. common.js's renderer, recorder, FPS meter and
kiosk nav all key off #scene. A different id silently breaks all of them.../assets/base.css (there is no ../base.css).<head>):
<script type="importmap">
{ "imports": { "three": "https://unpkg.com/three@0.169.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.169.0/examples/jsm/" } }
</script>
<div class="veil">…</div> + call liftVeil() once the first frame
is up. Fonts: Monoton, DotGothic16, VT323 (preconnect + the Google Fonts link)..hud/.hud-top, .panel + .field + [data-val="<id>"],
.readout (with <b id="fps">–</b>), .hint. Back-link <a class="hud-back" href="parametric.html">.makeRenderer(canvas), onResize(renderer, camera, extra?), loop(fn) where
fn(dt, elapsed), fpsMeter(node) → meter(dt), liftVeil(),
bindRange(id, onInput, fmt) (3rd arg is a formatter fn, not a default),
setVariantCycler(fn) where fn(dir) applies the ↑/↓ change and returns a label
string, reducedMotion (a boolean const), and the vaporwave set-dressing
helpers ramp, addGrid(scene, {...}), addSun(scene, {...}).
The single source of truth for nav order + the batch recorder is the ROOMS array
near the top of src/common.js. Add "<room>.html" there or the room won't
appear in ← → navigation or "record all". (Subagents are told NOT to touch this —
the orchestrator wires it after the room is built.)
setVariantCycler.bindRange (mirror the value into [data-val="<id>"]).R records the canvas (handled globally by common.js — don't bind R yourself).reducedMotion (slow or freeze auto-motion).Adam rejected vaporwave purple and a full PS1 treatment of abstract rooms.
Default: near-black background, vivid cyan→green→amber→magenta accents, clean.
The PS1 look (src/ps1.js) is for rooms with real 3D form (fractals), not abstract
data clouds — see ps1-pipeline.
Never claim a room works from node --check alone — see verify-on-screen.
Build a mathwave room that runs CPU physics/simulation each frame and renders real Three.js 3D geometry — N-body, boids, cloth (Verlet), spiking neural nets, Kohonen SOM, L-systems, RL cartpole, double pendulum. PerspectiveCamera + OrbitControls. Template — src/nbody.js.
Build a mathwave room that is a GPU field simulation on swapped float render targets (ping-pong) — reaction-diffusion, wave/ripple equations, Schrödinger wavefunctions, Lattice-Boltzmann fluids, Lenia/neural cellular automata, Physarum. Template — src/reaction.js.
Build a mathwave room that simulates a CPU integer/cell grid and displays it via a DataTexture + fullscreen display shader — Wolfram CA, Abelian sandpile, Hopfield network, Conway-style automata. Template — src/wolfram.js (+ the fullscreen-quad display pattern from src/fractal.js).
Apply the PlayStation-1 rendering aesthetic to a mathwave room — low-res framebuffer + nearest upscale + 4x4 Bayer ordered dither + 15-bit color crunch, plus optional vertex snapping. Reusable module src/ps1.js. Best on rooms with real 3D FORM (fractals), not abstract data clouds.
Build a mathwave room that is a GPU fragment-shader raymarcher/SDF — fractals (mandelbulb, mandelbox, menger, quaternion Julia), volumetrics (nebula), Truchet/metaballs. Single fullscreen quad, all geometry in the fragment shader, custom uCamPos orbit. Template — src/fractal.js.
The verification discipline for mathwave rooms — how to confirm a room ACTUALLY renders before claiming it works, using agent-browser plus window.__err / window.__diag canaries. Critically, node --check and a green fps reading are NOT sufficient. Use before committing any room.