hackerbots-live/static/viz.js

import "https://unpkg.com/butterchurn@2.6.7"
import "https://unpkg.com/butterchurn-presets@2.4.7"
import "https://unpkg.com/butterchurn-presets/lib/butterchurnPresetsExtra.min.js"

export default class Visualizer {
  butterViz = null;
  canvas = null;
  cycleInterval = null;
  presetCycleLength = 15000;

  constructor(mediaElement) {
    var audioContext = new AudioContext();
    var mediaSrc = audioContext.createMediaElementSource(mediaElement);

    this.canvas = document.createElement('canvas');
    this.canvas.className = "butterviz";
    document.body.appendChild(this.canvas);
    this.canvas.width = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;
    this.butterViz = butterchurn.default.createVisualizer(audioContext, this.canvas , {
      width: this.canvas.width,
      height: this.canvas.height,
      pixelRatio: window.devicePixelRatio || 1,
      textureRatio: 1,
    });

    mediaSrc.connect(audioContext.destination);
    this.butterViz.connectAudio(mediaSrc);

    var presets = {};
    if (window.butterchurnPresets) {
      Object.assign(presets, butterchurnPresets.getPresets());
    }
    if (window.butterchurnPresetsExtra) {
      Object.assign(presets, butterchurnPresetsExtra.getPresets());
    }

    this.cycleInterval = setInterval(() => {
      this.butterViz.loadPreset(_.sample(presets), 5.7);
    }, this.presetCycleLength);

    $(this.canvas).click(() => {
      this.butterViz.loadPreset(_.sample(presets), 1.0);
    });

    setTimeout(() => {
      this.butterViz.loadPreset(_.sample(presets));
    }, 0);

  }

  resize() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.butterViz.setRendererSize(this.canvas.offsetWidth, this.canvas.offsetHeight);
  }

  start() {
    if (!document.hidden && this.butterViz) {
      var fps = 60;
      setTimeout(() => {
        requestAnimationFrame(() => {this.start()});
      }, 1000 / fps);
      this.butterViz.render();
    }
  }
}