VIMATHIC™ — Mathematical VJ Studio

VIMATHIC

▼

0:000:00

▸ PLAYLIST

0 tracks

No tracks loaded

↑ click or drag MP3/WAV

▸ VISUAL STYLE

Color Scheme

Surface Material

Bloom 0.55

▸ DEFORM MODE

▸ RENDER

3D SHAPE

▸ FORMULA

SHADER MODE

Amplitude 0.70

Wave Intensity 1.00

Formula Detail 0.50

Formula Phase 0.00

Spectrum Rings 0.30

Rings follow the formula

FPS
60

ADVANCED

▸ AUDIO SENSITIVITY

Bass Sensitivity 1.20

Treble Sensitivity 1.00

Show track & artist name

▸ STATE & PRESETS

Presets live in this browser's localStorage (per-domain, not in files) — clearing site data deletes them, and nothing here backs the list up. EXPORT writes one .json of the look on screen right now; IMPORT applies that file the way loading a preset does.

▸ CLIP PLAYER

Hold(s)

🎵 Start with music

Camera

MODEL IMPORT

⬆ Drop OBJ / GLTF / GLB here

or click to browse

SHADER EDITOR

SHADER KNOBS — read as uK0…uK3 in your code.
On a numbered SHADER MODE they carry a fixed meaning instead: 1 scale · 2 depth · 3 phase · 4 palette

Shader Knob 1 0.00

Shader Knob 2 0.00

Shader Knob 3 0.00

Shader Knob 4 0.00

CAMERA PROGRAMMER

VIDEO OUTPUT & AUDIO IN

MIDI MAPPING

🎹 MIDI

✎ GLSL SHADER EDITOR

Uniforms: uTime · uBass 0–1.2 · uMid 0–1 · uTreble 0–1.2 · uBeat 0–1 · uAmp · uWI
Vertex: position vec3 · r=length(xz) · ang=atan(z,x) · write into y
Spectrum (vertex only): bandAtRadius(r) · bandAtU(0–1) · uBands[24] · uBandR body radius — Spectrum Rings already adds one band term, set it to 0 to avoid doubling
Knobs: uK0 · uK1 · uK2 · uK3 0–1 — sliders under SHADER EDITOR in the panel, and MIDI-mappable; put one where you would type a constant
Colour (fragment): paletteAt(x) — the chosen scheme, crossfading over 600 ms when you change it; getColor(uCM, x) is the same colour without the fade. SURF lighting now runs over your c automatically
What APPLY takes over: SHADER MODE 1–38 — APPLY installs BOTH programs whichever tab you pressed it on, and your vertex body replaces that displacement, so all 38 numbered entries then draw the same thing. RESET gives them back. Everything else — shape, material, palette, Spectrum Rings, the knobs — still applies

VERTEX (displacement)

FRAGMENT (colour)

🎬 CAMERA PROGRAMMER

Read: time bass mid treble beat bpm R Write: ctx.cam.x/y/z ctx.target.x/y/z ctx.fov ctx.roll
Helpers: orbit(r,speed,h) lerp(a,b,t) clamp(v,lo,hi) sin cos ctx.state persists · ctx.p = params tab

JS CODE

TIMELINE

PARAMS

🎙 AUDIO SOURCE

📁 FILE PLAYBACK active by default

Load MP3 / WAV / FLAC / OGG from your device. Supports drag & drop and crossfade.

All browsers All OS Crossfade

or drag MP3/WAV onto the visualizer

🎤 MICROPHONE / LOOPBACK

Captures any input device — including virtual cables that route system audio.
Windows: install VB-Audio Cable, set it as default playback → select it below.
Mac: install BlackHole 2ch, set it as output → select it below.

Chrome Firefox Safari All OS Virtual loopback

💡 No virtual cable? Works with a real mic too — point it at your speakers for a quick test. For best quality use a loopback device.

BROWSER TAB / SYSTEM AUDIO

Uses getDisplayMedia. You choose what to share in the browser popup.
Tab audio: share a specific browser tab — enable "Share tab audio".
System audio (Windows Chrome only): share entire screen → tick "Share system audio".

Chrome — tab Chrome Win — system Firefox — no audio Safari — no audio

⚠ Firefox does not support audio capture via getDisplayMedia. Use the loopback method instead.

No live capture active — using file playback

📤 VIDEO OUTPUT

TRANSPARENT BACKGROUND All browsers

Renders with alpha channel — stars, grid and background are hidden. Use with OBS Browser Source → Allow transparency for chroma-key-free overlays. Works with any VJ software that reads the browser canvas.

OFF

VIRTUAL CAMERA (captureStream) —

Exposes the canvas as a MediaStream. OBS picks it up as a Browser Source (zero setup) or as a Video Capture Device with the OBS Virtual Camera turned on. A floating preview window confirms the stream is live.

FPS

💡 OBS Browser Source — add source → Browser → paste URL → tick "Allow transparency" for alpha. No plugins needed. Lowest latency option.

🎞️ RECORD CLIP Chrome / Firefox / Edge

Capture the visualizer as a downloadable file. GIF auto-loops on social platforms (Twitter, Telegram, Discord) — best for short snippets. WebM is higher quality with lower memory usage — better for archives & YouTube. Beat-sync mode produces music-aligned perfect loops.

FORMAT

ASPECT

SIZE

FPS

QUALITY

DURATION

SECONDS

💡 Beat mode needs an audio track playing — capture starts on the first detected beat and stops after exactly N beats, so the loop lines up with the bar. GIF keeps every frame as uncompressed RGBA, so the recorder prices the clip before it starts and refuses anything over 1500 MB rather than recording it — 720p · 30fps · 60s prices at 5273 MB and produces no file. 480p · 15fps · 60s fits, and so does 720p · 30fps · 10s; ASPECT: Native is priced at up to 1280×720 whatever SIZE shows. WebM streams to the encoder, so it has no such ceiling.

Ready.

VIMATHIC — Mathematical VJ Studio

VIMATHIC