Skip to content
Butterchurn is a WebGL implementation of the Milkdrop Visualizer
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 6 commits ahead, 40 commits behind jberg:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
examples
src
.babelrc
.eslintrc
.gitignore
LICENSE
README.md
package.json
yarn.lock

README.md

Butterchurn

Butterchurn is a WebGL implementation of the Milkdrop Visualizer

Try it out

Screenshot of Butterchurn

Usage

Installation

With yarn or npm installed, run

$ yarn add butterchurn butterchurn-presets
or
$ npm install butterchurn butterchurn-presets

Create a visualizer

import butterchurn from 'butterchurn';
import butterchurnPresets from 'butterchurn-presets';

// initialize audioContext and get canvas

const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: 800,
  height: 600
});

// get audioNode from audio source or microphone

visualizer.connectAudio(audioNode);

// load a preset

const presets = butterchurnPresets.getPresets();
const preset = presets['Flexi, martin + geiss - dedicated to the sherwin maxawow'];

visualizer.loadPreset(preset, 0.0); // 2nd argument is the number of seconds to blend presets

// resize visualizer

visualizer.setRendererSize(1600, 1200);

// render a frame

visualizer.render();

Browser Support

Butterchurn requires the browser support WebGL 2.

You can test for support using our minimal isSupported script:

import isButterchurnSupported from "butterchurn/lib/isSupported.min";

if (isButterchurnSupported()) {
  // Load and use butterchurn
}

Integrations

Thanks

License

This project is licensed under the MIT License - see the LICENSE file for details

You can’t perform that action at this time.