Particula – Advanced Setup Guide
This guide provides everything you need to install, use, and customize the Particula visualizer.
📦 Requirements
- Node.js (https://nodejs.org)
- A modern web browser (Chrome or Firefox recommended)
- (Optional) VB-Cable or VB HiFi Cable for capturing system-wide audio
🖥️ Running Locally
-
Open a terminal in your project folder.
-
Install or verify you have Node.js (v14+). Then run:
bash
npx serve .
- Open your browser at:
http://localhost:3000
Windows shortcut: double-click run.bat to start a server and open the project automatically.
Note: You must serve files via a local server; opening index.html directly from the filesystem won't work, because Particula loads scripts from CDNs.
🎧 Audio Input Setup
Particula can visualize audio from two main sources:
- Audio Player: Streams files placed in the
Songs/ folder.
- Microphone: Captures live sound from your mic or virtual audio cable.
On-Screen Audio Controls
When running Particula, you’ll see a small panel at the top (or a floating one), containing:
- Song Select: Dropdown of
.mp3, .wav, or .ogg files from your Songs/ folder.
- Play/Pause: Toggles playback of the selected file.
- Volume Slider: Adjusts the volume of the audio element.
- Timeline Slider: Lets you seek through the loaded track.
- Use Mic / Use Player: Switch between audio files or microphone input.
If no songs appear:
- Make sure you created a
Songs/ folder
- Ensure you’re running via
npx serve . (not file://)
Tip: Some browsers block autoplay. Click the screen or the Play button to start audio.
🔌 VB-Cable Setup (Windows Only)
To make Particula react to system-wide audio (Spotify, YouTube, etc.), install a virtual cable:
Option 1: VB-Cable
- Install VB-Audio Virtual Cable: https://vb-audio.com/Cable/
- In Windows Sound Settings:
- Playback (Output) →
CABLE Input
- Recording (Input) →
CABLE Output
- Enable "Listen to this device":
- Right-click sound icon → Sound settings → More sound settings
- Recording tab → Right-click
CABLE Output → Properties → Listen tab
- Check "Listen to this device", select your speakers/headphones
- Confirm with OK
Option 2: VB HiFi Cable (Recommended)
- Install HiFi Cable: https://vb-audio.com/Cable/
- Output →
Hi-Fi Cable Input
- Input →
Hi-Fi Cable Output
- In Recording →
Hi-Fi Cable Output → Properties:
- Enable "Listen to this device"
- Advanced → 44100 Hz, 16-bit (CD Quality)
⚠️ Windows Automatic Gain Control (AGC)
Windows 11 can auto-adjust mic input volume, causing fluctuations.
Why It Happens:
- Windows detects
CABLE Output/Hi-Fi Cable Output as a microphone.
- AGC tries to "improve" volume.
- Particula sees unexpected amplitude changes.
Disabling AGC:
- Press
Win + R, type regedit, press Enter
- Search (Ctrl + F) for
CABLE Output or Hi-Fi Cable Output
- Locate audio
Capture entries
- Right-click → New → DWORD (32-bit) Value
- Name it
EnableAGC → value 0
- Restart PC
Proceed carefully. Registry edits can affect system behavior.
🧪 GUI Overview
Particula uses a dat.GUI panel to tweak parameters in real time. Each sphere has its own folder, plus a few global controls:
- Global Particle Count: One master setting for all sphere particle counts
- Fog Settings: Enable/disable fog, set color, and adjust near/far distances
Click outside the GUI or control panels to hide them – click again to show them.
🎛️ GUI Parameter Reference
Per-Sphere Parameters
-
enabled
-
Toggles visibility of the sphere's particle system.
-
particleCount
-
Sets how many particles are generated.
-
particleSize
-
Controls each particle’s rendered size.
-
particleLifetime
-
How many seconds before a particle is "reborn." Once time is up, it respawns at a new position.
-
sphereRadius
-
The maximum distance particles can occupy from the center.
-
innerSphereRadius
-
A 0–1 factor that controls how close to the center initial spawn can be.
-
rotationSpeedMin / rotationSpeedMax
-
Defines the lower/upper bound of rotation speed around the y-axis. The actual speed is tied to audio volume.
-
rotationSmoothness
-
How gently rotation speed transitions in response to volume changes.
-
volumeChangeThreshold
-
Ignores volume differences below this threshold.
-
minFrequency / maxFrequency
- The frequency band (Hz) used for amplitude-based motions.
-
minFrequencyBeat / maxFrequencyBeat
- The frequency band used for detecting beat spikes.
-
noiseScale
- The scale of the Perlin noise field affecting particle movement.
-
dynamicNoiseScale
- If true, noiseScale auto-changes after a peak event.
-
minNoiseScale / maxNoiseScale
- Range for that dynamic noiseScale.
-
noiseStep
- Step size for noiseScale jumps when a beat is detected.
-
noiseSpeed
- How fast the noise "flow" evolves.
-
turbulenceStrength
- Intensity of noise forces.
-
colorStart / colorEnd
- Defines a color gradient for the particles.
-
peakSensitivity
- Controls how easily peaks are triggered. If current amplitude > average * peakSensitivity, we register a peak.
-
beatThreshold
- Raw amplitude threshold for the beat band.
-
beatStrength
- Push intensity applied to particles when a beat is detected.
-
gainMultiplier
- Multiplies frequency data. Raise it to make the sphere more reactive.
-
historyLength (peakDetection)
- Number of amplitude samples stored for averaging.
-
minTimeBetweenPeaks (peakDetection)
- Milliseconds that must pass before detecting another peak.
Global GUI Parameters
-
Global Particle Count
-
Forces all spheres to share the same particle count.
-
Fog
-
enabled: Toggles fog.
- color: Fog color.
- near / far: Adjusts how quickly fog fades in/out.
💾 Presets
Save your favorite sphere + global settings, then load them later or share as JSON.
- Save: Creates a named preset.
- Reset: Returns to defaults.
- Delete: Removes a preset.
- Export/Import: Backs up all presets or loads them from disk.
Presets are stored in your browser’s localStorage by default.
🔧 Troubleshooting
Audio not reacting?
- Ensure microphone permissions are granted.
- Check VB-Cable settings if you want system audio.
- Reload the browser after changing device inputs.
Mic input too quiet or volume shifts unexpectedly?
- Windows AGC might be active. (See above.)
- Try the HiFi Cable with manual volume control.
No songs listed in the dropdown?
- Confirm a
Songs/ folder is present.
- Use a local server (npx serve .).
- Make sure your audio files end in
.mp3, .wav, or .ogg.
🛠️ Dev Mode Tips
- main.js centralizes logic: spheres, audio analyzers, beat detection.
- Each sphere is constructed similarly; you can clone or expand that function.
- Beat detection uses a combination of averaging, thresholds, and time gating.
- Presets are stored per sphere in a structured JSON.
- If you add new parameters, update the GUI code accordingly.
Copy Settings to Other Spheres
In the GUI for Sphere 1, you might see a button named Copy to Spheres 2-5. Clicking it duplicates Sphere 1’s current parameters to the others.
📖 Usage Flow Summary
- Open Particula in your browser via
http://localhost:3000.
- Decide if you want to play local files or capture mic/system audio.
- Adjust sphere parameters in the GUI:
- Turn on or off certain spheres.
- Play with color gradients, noise, or beat detection.
- Hide the GUI by clicking outside it; click again to show.
- Save/Load presets as you discover interesting visuals.
Enjoy exploring Particula! For deeper modifications, read the commented sections in main.js.
Happy visualizing!