Research

Spin a tesseract

A neon tesseract turning in four dimensions in the browser: drag to orbit it, scroll to zoom, and watch its edges light as a launch progresses.

Make your version Download

Recipe code: spin-tesseract

No Mariwave yet? Download it, and keep the recipe code to open this recipe once it is installed.

What it is

An app you run and watch, opened in its own machine.

What it needs

A Mac with Apple silicon and macOS 27 or later, with Mariwave installed. It runs in its own signed machine on your Mac.

Made by

Mariwave

Source

Eyzaguirre-co-LLC/mari-examples/spin-tesseract at 2a7999b922601fc4b7fd635bee11ce286e964b2b

Picture

sha256 6a5fa2849e0e5a4b4ccfd88b2283d1d56f8eb44f267a7ff8f1be02e27318fd9c

Every recipe

What the agent reads

When you open this recipe, the agent in its machine reads these instructions first.

Spin a Tesseract in this machine

Three files make the page, with no dependencies and no build step:

index.html: the full-window canvas, the name, the status line, the slider and Replay.
tesseract-app.js: WebGL2: one quad for each edge, a shader that falls off into a core, a tube and a halo, additive blending, and dragging and zooming.
tesseract.js: the figure’s numbers with no DOM: 16 corners, 32 edges, the turn in the xw and yz planes, the projections and the order the edges light in.

test-tesseract.js checks the numbers and draws a frame under a stub.

Run it

When this agent was opened on the example, Mariwave copied its files to /session/work/spin-tesseract and serves them on port 8000. It is served over HTTP, never opened as a file, because the page imports ES modules. ?lit=100 opens it with that much of the figure lit.

Test and change it

cd /session/work/spin-tesseract
bun test ./test-tesseract.js

Colours and glow are CYAN, MAGENTA and the shader in tesseract-app.js. A change to the motion or the geometry goes in tesseract.js with a check in test-tesseract.js. Have the person reload the Web view.