ワンクリックでManusで任意のスキルを実行

mathwave-overview

スター0

フォーク0

更新日2026年5月30日 17:48

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 ページを確認してインストールできます。

Manusで実行

ソース

vanities

vanities/mathwave

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

mathwave — room conventions

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.

Every room is two files

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:

fragment-shader SDF/raymarch → see raymarched-shader-room (src/fractal.js)
GPU field sim on float textures → see gpu-pingpong-sim-room (src/reaction.js)
CPU physics + real 3D geometry → see cpu-physics-3d-room (src/nbody.js)
CPU integer/cell grid → see grid-cells-room (src/wolfram.js)

Hard conventions (copy them exactly — subagents drift here)

Canvas is <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.
CSS is ../assets/base.css (there is no ../base.css).

Import map (in every piece <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>

Loading veil: <div class="veil">…</div> + call liftVeil() once the first frame is up. Fonts: Monoton, DotGothic16, VT323 (preconnect + the Google Fonts link).
HUD structure: .hud/.hud-top, .panel + .field + [data-val="<id>"], .readout (with <b id="fps">–</b>), .hint. Back-link <a class="hud-back" href="parametric.html">.

What you import from common.js

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, {...}).

Register the room in the kiosk

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.)

Controls every room should expose

↑/↓ cycles an in-room variation via setVariantCycler.
Sliders via bindRange (mirror the value into [data-val="<id>"]).
R records the canvas (handled globally by common.js — don't bind R yourself).
Respect reducedMotion (slow or freeze auto-motion).

Aesthetic

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.

Always finish with verification

Never claim a room works from node --check alone — see verify-on-screen.

このリポジトリの他の Skills

同じリポジトリ

cpu-physics-3d-room

vanities/mathwave

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.

2026-05-300

gpu-pingpong-sim-room

vanities/mathwave

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.

2026-05-300

grid-cells-room

vanities/mathwave

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).

2026-05-300

ps1-pipeline

vanities/mathwave

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.

2026-05-300

raymarched-shader-room

vanities/mathwave

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.

2026-05-300

verify-on-screen

vanities/mathwave

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.

2026-05-300

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 — room conventions

Every room is two files

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:

fragment-shader SDF/raymarch → see raymarched-shader-room (src/fractal.js)
GPU field sim on float textures → see gpu-pingpong-sim-room (src/reaction.js)
CPU physics + real 3D geometry → see cpu-physics-3d-room (src/nbody.js)
CPU integer/cell grid → see grid-cells-room (src/wolfram.js)

Hard conventions (copy them exactly — subagents drift here)

Canvas is <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.
CSS is ../assets/base.css (there is no ../base.css).

Import map (in every piece <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>

Loading veil: <div class="veil">…</div> + call liftVeil() once the first frame is up. Fonts: Monoton, DotGothic16, VT323 (preconnect + the Google Fonts link).
HUD structure: .hud/.hud-top, .panel + .field + [data-val="<id>"], .readout (with <b id="fps">–</b>), .hint. Back-link <a class="hud-back" href="parametric.html">.

What you import from common.js

Register the room in the kiosk

Controls every room should expose

↑/↓ cycles an in-room variation via setVariantCycler.
Sliders via bindRange (mirror the value into [data-val="<id>"]).
R records the canvas (handled globally by common.js — don't bind R yourself).
Respect reducedMotion (slow or freeze auto-motion).

Aesthetic

Always finish with verification

Never claim a room works from node --check alone — see verify-on-screen.