Butterchurn Music Visualizer

A fullscreen music visualizer using Butterchurn - a WebGL implementation of the Milkdrop Visualizer.

Features

• 🎨 Fullscreen Visualizer - Immersive fullscreen experience
• 🎵 Multiple Audio Sources:
  • Upload audio files
  • Use microphone input
  • Load audio from URL
• 🎭 Preset Management:
  • Browse and select from hundreds of presets
  • Random preset selection
  • Navigate through presets (next/previous)
  • Adjustable blend time for smooth transitions
• 🎛️ Modern UI - Clean, responsive controls that can be toggled

GitHub Pages Setup

1. Push this repository to GitHub

2. Enable GitHub Pages:

   • Go to your repository settings
   • Navigate to "Pages" in the left sidebar
   • Under "Source", select "Deploy from a branch"
   • Choose "main" (or "master") branch and "/ (root)" folder
   • Click "Save"

3. Access your site:

   • Your site will be available at: https://[your-username].github.io/musicviz2/

Local Development

Setup Dependencies (REQUIRED - NO CDN)

IMPORTANT: This project uses ONLY local files from source repositories - no CDN dependencies.

1. Clone Butterchurn:

   git clone https://github.com/jberg/butterchurn.git
   cd butterchurn
   npm install --legacy-peer-deps
   npm run build
   cd ..

   This builds the butterchurn library. Copy butterchurn/dist/butterchurn.min.js to lib/butterchurn.min.js.

2. Clone Butterchurn Presets:

   git clone https://github.com/jberg/butterchurn-presets.git

   This creates the butterchurn-presets/ directory at the root level.

Generate Presets JSON (Optional)

To generate the presets JSON file from the local butterchurn-presets repository:

1. Ensure butterchurn-presets/ directory exists at the root level
2. Run the preset generator:

   node generate-presets-from-local.js

   This creates presets/butterchurn-presets.json from the local preset files.

Add Additional Milkdrop Presets (Optional)

To add thousands of additional Milkdrop presets from ansorre's collection:

Option 1: Clone and Merge (Recommended)

1. Clone the repository:

   git clone https://github.com/ansorre/tens-of-thousands-milkdrop-presets-for-butterchurn.git

2. Run the merge script:

   node merge-milkdrop-presets-from-clone.js

   This script will:

   • Find all JSON preset files in the cloned repository
   • Merge them with your existing presets
   • Save the merged presets to presets/butterchurn-presets.json

   Note: If you cloned to a different location, update CLONED_REPO_PATH in the script.

Option 2: Automatic Download

1. Install the required dependency:

   npm install adm-zip

2. Run the download and merge script:

   node download-and-merge-milkdrop-presets.js

   This script will automatically download and merge the presets.

Note: Both scripts merge presets, so existing presets are preserved. New presets are added without overwriting existing ones.

Quick Start (Windows)

Double-click serve.bat to start a local server. The script will:

• Automatically detect and use Python, Node.js, or PHP
• Open your browser to http://localhost:8000
• Serve the visualizer locally

Manual Server Setup

Simply open index.html in a modern web browser. For best results, use a local server:

Windows:

# Use the provided batch file
serve.bat

# Or manually with Python 3
python -m http.server 8000

Linux/Mac:

# Using Python 3
python3 -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000

Then navigate to http://localhost:8000

Browser Requirements

• WebGL 2.0 support
• Modern browser with Web Audio API support
• For microphone access, HTTPS is required (or localhost)

Usage

1. Select Audio Source:

   • Click "Upload Audio" to select an audio file from your device
   • Click "Use Microphone" to visualize audio from your microphone
   • Enter a URL and click "Load from URL" to stream audio

2. Choose Presets:

   • Select a preset from the dropdown menu
   • Click "Random Preset" for a random selection
   • Use "Next Preset" and "Previous Preset" to navigate
   • Use the "Disable" button to remove buggy presets from rotation
   • Use the "Enable" button to add presets back to rotation

3. Preset Management:

   • Disable Presets: Click the "Disable" button next to the preset dropdown to remove a preset from rotation (it won't appear in next/previous/random navigation)
   • Enable Presets: Click the "Enable" button to add a disabled preset back to rotation
   • Export Disabled List: Open the browser console (F12) and run exportRotation() to get a JSON array of all disabled presets
   • All presets can be manually selected from the dropdown regardless of rotation status

4. Adjust Settings:

   • Use the "Blend Time" slider to control how smoothly presets transition

5. Toggle Controls:

   • Click the "Toggle Controls" button in the top-right to hide/show the control panel

⚠️ Important Note: Modified Butterchurn

This project uses a modified version of Butterchurn. The source code in the butterchurn/ directory has been modified from the original repository to add:

• Extended blend patterns (9 patterns total, up from 3)
• Blend pattern selection (choose specific patterns or use random)
• Pattern enable/disable functionality for rotation control

See BUTTERCHURN_MODIFICATIONS.md for detailed information about the modifications.

⚠️ Do not replace lib/butterchurn.min.js with the original butterchurn build - it must be rebuilt from the modified source using rebuild-butterchurn.bat.

License

This project uses Butterchurn, which is licensed under the MIT License.

Credits

• Butterchurn by jberg (modified for this project)
• Butterchurn Presets by jberg
• Tens of Thousands of Milkdrop Presets by ansorre - Massive collection of 15,000+ Milkdrop presets converted for Butterchurn
• Original Milkdrop by Ryan Geiss