VF
CARNIVAL VFX // 2D
Launch Live
HTML5 Canvas 2D / Zero Dependencies / Single File
Web Audio API FFT Reactivity

One File.
Full Screen.
On Beat.

Born inside a university dorm for a live Carnival DJ set with zero budget, zero software setup time, and a laptop already maxed out running audio. A single lightweight HTML file that boots in milliseconds, grabs room acoustics through the microphone, and paints pure rhythmic visual euphoria.

Experience Live Visualizer Clone Repository
60FPS
Sustained Rate
22MODES
Visual Algorithms
<15KB
Zero Build Bundle
0DEPS
Pure Vanilla JS
Interactive Web Audio Sandbox

Live Visualizer Engine

Rendered in real-time on your GPU via HTML5 Canvas. Toggle between the built-in rhythmic beat synthesizer or activate your microphone to react to ambient room sound.

SYNTH BEAT SIMULATOR
FPS: 60
CARNIVAL VFX 01 · QUANTUM NODES & LIQUID BLOB

Live Beat Ready

The engine is running simulated procedural beat pulses. You can keep the simulation, enable synthesized drum beats, or sync with your live room microphone.

Sens: 1.5x
BPM: 128
Shortcuts: Press F for Fullscreen, N for Next Pattern, + / - to adjust BPM.
GPU Accelerated · 60 FPS Target · Single File Architecture
[ENGINE BLUEPRINT // SYSTEM SPECS]

Engine Architecture

Engineered for live stage environments where crashes, memory leaks, and frame drops are unacceptable.

SPEC // ZERO-DEP

Zero Dependencies. Single File.

No npm, no webpack, no external CDN assets required at runtime. When you are backstage setting up 5 minutes before the show with no Wi-Fi, you double-click an HTML file on a USB thumb drive and it boots instantly in any browser.

Payload: ~15 KB Cold Boot: 68ms
PERF // 60 FPS

Canvas 2D Hardware Acceleration

Heavy WebGL pipelines and complex fragment shaders can induce GPU thermal throttling on budget DJ laptops running Ableton or Traktor. Canvas 2D uses native compositor acceleration with minimal overhead, maintaining smooth 60 FPS without fan spin.

GPU Overhead: < 8% Rate: 60 FPS Locked
DSP // WEB AUDIO

Pure Web Audio API FFT

Real-time Fast Fourier Transform (fftSize = 128) converts acoustic room pressure into frequency bins every animation frame. Bass thresholds detect kicks and trigger energy decay spikes.

FFT Bins: 64 Discrete Bands
Input Latency: < 3.2 ms
OPT // MULTI-ASPECT

Ultrawide Stage Projection

Auto-adapts to 16:9 club projectors, 4:3 CRT racks, or 21:9 ultrawide LED backdrops. High-DPI display scaling recalculates devicePixelRatio so visuals stay razor-sharp at 4K.

Aspect Agnostic: 16:9 / 21:9 / 32:9
DPI Scaling: window.devicePixelRatio
[ARCHITECTURE BREAKDOWN // REPOSITORY EDITIONS]

Two Files. On Purpose.

The GitHub repository ships two distinct standalone versions. They were built for different trade-offs and are not drop-in interchangeable. Read this before deploying on stage.

Standard Edition

pattern-drawer.html

14 Patterns

The original file written and used live at the university Carnival party. Rock-solid, thoroughly battle-tested, with timed rotation strictly adhering to minutesPerPattern.

  • 14 Core Algorithmic Patterns
  • Random order rotation keeps audience surprised
  • Timed rotation works properly (default 3 min)
  • On-screen debug status shows mic state & pattern name
  • No logo overlay, no manual BPM fallback keys
Best For: Minimalist sets, backup flash drives, and rock-solid unattended 3-hour sets.
Stage Extended Edition

pattern-drawer_audio_sync_&_image.html

22 Patterns

The actively expanded edition created for high-impact visual performance with logo injection, manual BPM fallback, and 8 additional visual algorithms.

  • 22 Algorithmic Patterns (including DNA, Vinyl, Metaballs)
  • Logo overlay: cycles image0.png, image1.png on beat
  • Manual BPM override with + / - keys
  • Ultrawide filler layers for panoramic projectors
  • Notice: Auto-rotation hardcoded to 5s (see fix below)
Best For: Headlining DJ visuals, festivals, club nights, and full-power projection rigs.
Known Code Quirk & 1-Line Fix

Want 3-minute rotations instead of 5-second rapid switching in Extended?

In pattern-drawer_audio_sync_&_image.html, the rotation check uses a hardcoded 5000 ms interval rather than this.switchInterval. Replace one token to unlock user-configured timing:

- setInterval(() => this.switchPattern(), 5000);
+ setInterval(() => this.switchPattern(), this.switchInterval);
[HANDS-OFF OPERATION // CONSOLE COMMANDS]

VJ Keyboard Shortcuts

Once the browser window is open and you click anywhere to initialize the Web Audio API, the engine runs completely hands-free. Keyboard commands provide instant on-the-fly control.

Click Anywhere

Audio Handshake

Browser security restricts microphone and AudioContext until user interaction. A single mouse click activates room audio listener.

Primary Trigger
N

Next Pattern

Instantly advance to the next visualizer mode without waiting for the scheduled rotation timer to expire.

Pattern Switch
D

Debug Mode

Cycles through every single pattern in rapid 5-second succession with on-screen HUD displaying pattern index and mic signal state.

Inspect & Test
+ / -

Manual BPM

(Extended edition) If performing without a room microphone or with direct headphone monitoring, tap + or - to dial in exact beat cadence.

Fallback Clock
[DEPLOYMENT GUIDE // ZERO BUILD STEP]

Stage Launch Guide

Browsers enforce security policies: getUserMedia requires either http://localhost or an HTTPS origin. Follow these four quick steps.

01

Clone the Git Repository

Fetch the repository containing both base and extended versions plus all demo assets.

git clone https://github.com/mirconegri/CarnivalVisualEffects.git
02

Serve Locally via HTTP

Microphone APIs fail on file:///. Launch a zero-config local server:

python -m http.server 8000
03

Open in Modern Browser

Navigate to your chosen edition:

Base: http://localhost:8000/pattern-drawer.html
Extended: http://localhost:8000/pattern-drawer_audio_sync_&_image.html
04

Click & Hit Fullscreen

Click anywhere on the screen to permit microphone access. Press F11 to enter borderless browser kiosk mode.

Stage Audio Routing

How to Route Club Audio

Method A (Built-in Laptop Mic): The simplest approach. Position the laptop on the DJ booth near the monitor speakers. Carnival VFX will pick up ambient sound with zero extra wires.

Method B (Booth Output to Line-In): Connect a 3.5mm AUX or USB interface from the DJ mixer's Record / Booth Out directly into the laptop's line-in. Select that input in browser permission settings for 100% clean isolation without crowd noise.

Method C (Virtual Audio Cable / Loopback): If your visualizer is running on the exact same laptop as your DJ software (e.g. Rekordbox, Traktor, VirtualDJ), install a virtual audio driver (VB-Audio Cable on Windows or BlackHole on macOS) to mirror DJ output directly into Chrome without physical loopback.

Compatible: Pioneer DJ, Traktor, Ableton Zero DSP Lag

Built in the Open.
Tested on a Real Dance Floor.

Free and open source under the MIT License. Fork it, tweak the algorithms, fix the rotation timer, or compose your own custom projection patterns.

Star on GitHub (mirconegri/CarnivalVisualEffects) Back to Live Visualizer