KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

arcane.gl

★ 34 Open GitHub ↗

WebGL Music Visualizer

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

arcane.gl
=========
##WebGL Music Visualizer

###TO RUN:

+ [LIVE DEPLOY](http://arcanegl.jit.su) **NOTE: This is an early release using experimental technologies; this only works in Chrome**

+ [Acquire Python](http://www.python.org/download/) [2.x or 3.x is fine]

+ From Terminal/CMD, Run:

Python 2.x
            python -m SimpleHTTPServer 8081
        or
        Python 3.x
            python -m http.server 8081

+ From browser of choice, enter the url

localhost:8081 or 127.0.0.1:8081

###Once setup:

Select a song from the dropdown list.

Paradise Circus is most reactve; Mandala and Surge are full spectrum; Gemini is a minimalistic edge case.

Volume is controlled by a slider. Clear button doesn't work properly.

After song selection, wait for a play button to appear on screen. On click, the visualization begins.

*Left click* and drag to **rotate** camera. *Right click* and drag to **pan** camera. *Two finger/scroll wheel* to **zoom**.

###Technical Achievements:

+ Audio is at 24 hz. Rendering happens at 60 fps. An async callback pings the renderer with new data. If the renderer receives new data, it uses it; otherwise it has its own animation tasks to work on.

+ Since the visual is 2.5x faster [24hz*2.5=60] than audio data, animations were originally extremely jagged. To compensate, I pushed the renderer back a single frame, undetectably out of sync with the audio, to create a single tween frame.

+ Transitions occur in by comparing the current audio data with the previous frame's audio data. These values are the sum across all frequencies. Upon a certain threshold being crossed, a flag is assigned for the next frame. If enough time has passed, the transition is trigger. Alternately, if enough time passes with no trigger, the transition still occurs.

+ Colors are dynamically modified trigonometrically. Colors are modified by using time, cube position, cube indices, frequencies, and static scalars as sin/cos parameters

+ The z axis is manipulated over time, with an expansion and retraction depending on values, as well as influencing x and y positions for several scenes.

+ radial arc length is determined in mathUtils.js and used for certain scenes

###Tech Stack:

WebGL/THREE.js - GPU

Knockout.js    - UI

JQuery         - DOM

arcane.gl

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README