freq-synth.js

let xRes = window.innerWidth - 50;
let yRes = window.innerHeight - 50;


var backgroundColor = [0, 0, 0];

var frequency = [];
var seriesDistance = 15;

var y;
function setup() {
  createCanvas(
    xRes,
    yRes
  );
  background(backgroundColor);
}

var colorScheme = [
  {
    offset: -seriesDistance,
    color: [82, 254, 0, 30]
  },
  {
    offset: 0,
    color: [255, 204, 0, 40]
  },
  {
    offset: seriesDistance,
    color: [0, 223, 255, 30]
  }
];

var rotation = 0;


var isLoudNoise = debounce(function isLoudNoise (points, max) {
  var lastParts = points.slice(points.length / 3);
  var over = lastParts.filter(v => v > max / 2);
  if (!over.length) return false;


});

function draw() {
  smooth();

  noStroke();
  translate(0, 0);
  fill(...backgroundColor.concat(9));

  rect(0, 0, xRes, yRes);
  noFill();
  var pointDistance = (xRes / frequency.length);
  var max = getMax(frequency) * 2;
  var fittedData = frequency.map((val, i) =>
    [i * pointDistance, max - noise(val) * val * 2]);
  var flippedData = fittedData.reverse().map(([x, y]) => [x, y * -1]);

  translate(0, yRes / 2 + max / 2);
  colorScheme.forEach(metadata =>
    drawLine(flippedData, metadata));

  var loudNoise = isLoudNoise(frequency, max / 2);
  // if () {
  //   ellipse(x, y, max );
  // }
}

function getMax (array) {
  return Math.max(...array);
}

function drawLine (points, metadata) {
  stroke.apply(null, metadata.color);
  beginShape();
  var offsetY = metadata.offset * noise(frameCount);
  points.forEach(function (p) {
    if (p[1] === 0) return;
    curveVertex(p[0], p[1] + offsetY);
  });
  endShape();
}

mic(function (err, data) {
  if (err) throw err;
  frequency = toArray(data);
})

function toArray (arr) {
  return Array.from(arr);
}

function debounce (func, wait = 1000) {
  var timeout = Date.now();
  return function (...args) {
    if (Date.now() - timeout < wait) return false;

    timeout = Date.now();
    return func(...args);
  };
};


var samples = 32;

window.mic = function (cb) {
  if (!navigator.getUserMedia) navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  if (!window.AudioContext) {
    if (!window.webkitAudioContext) {
      cb(new Error('no audiocontext found'));
    }
    window.AudioContext = window.webkitAudioContext;
  }
  //
  // navigator.getUserMedia({ audio: true }, gotStream, function onError (e) {
  //   cb(e);
  // });


  var softSynth = function(f){return eval("for(var t=0,S='RIFF_oO_WAVEfmt "+atob('EAAAAAEAAQBAHwAAQB8AAAEACAA')+"data';++t<1e6;)S+=String.fromCharCode("+f+")")}
  var base = btoa(softSynth('t<32800?((t/16)%256)&255:t<163400?(2*t|t%255)&255:((t-33200)>>4|(t-33200)>>5|(t-33200)+(t-33200)/2*(((t-33200)>>15)%4)|15|100/(-(t-33200)&2057))&255'));
  gotStream();

  function gotStream (stream) {
    var context = new AudioContext();
    var javascriptNode = context.createScriptProcessor(1024, 1, 1);
    javascriptNode.connect(context.destination);

    var analyser = context.createAnalyser();
    analyser.smoothingTimeConstant = 0.4; // easing from one value to another
    analyser.fftSize = samples * 2;

    var sourceNode = context.createBufferSource();
    context.decodeAudioData(base64ToArrayBuffer(base), function(buffer) {
       sourceNode.buffer = buffer;
       sourceNode.connect(context.destination);
       sourceNode.start(0);
    });

    sourceNode.connect(analyser);
    analyser.connect(javascriptNode);

    var array =  new Uint8Array(analyser.frequencyBinCount);
    javascriptNode.onaudioprocess = throttle(function() {
      analyser.getByteFrequencyData(array);
      cb(null, array);
    }, 30);
  }
};

function throttle (callback, limit) {
  var wait = false;
  return function () {
    if (!wait) {
      callback.call();
      wait = true;
      setTimeout(function () {
        wait = false;
      }, limit);
    }
  }
}

function base64ToArrayBuffer(base64) {
  var binaryString =  window.atob(base64);
  var len = binaryString.length;
  var bytes = new Uint8Array( len );
  for (var i = 0; i < len; i++)        {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}