* A simple sound visualization template for CSE412

 * This template is slightly more complicated but allows you

 * to share your code in fullscreen and will also work

 * outside of the p5js online editor environment

 * 

 * Update these comments yourself once your own program 

 *

 * By Professor Jon E. Froehlich

 * https://jonfroehlich.github.io/

 * http://makeabilitylab.cs.washington.edu

 **/

​

​

let mic;

​

function setup() {

  createCanvas(600, 400);

  // Gets a reference to computer's microphone

  // https://p5js.org/reference/#/p5.AudioIn

  mic = new p5.AudioIn();

​

  // Start processing audio input

  // https://p5js.org/reference/#/p5.AudioIn/start

  mic.start();

  // Helpful for debugging

  printAudioSourceInformation();

}

​

function draw() {

  background(180);

  if(!mic.enabled || getAudioContext().state !== 'running'){

    background(180);

    drawEnableMicText();

    return;

  }

  // Put your drawing code here!

  drawFps();

}

​

​

function drawFps(){

  // Draw fps

  push();

  const fpsLblTextSize = 8;

  textSize(fpsLblTextSize);

  const fpsLbl = nf(frameRate(), 0, 1) + " fps";

  const fpsLblWidth = textWidth(fpsLbl);

  const xFpsLbl = 4;

  const yFpsLbl = 10;

  fill(30);

  noStroke();

  rect(xFpsLbl - 1, yFpsLbl - fpsLblTextSize, fpsLblWidth + 2, fpsLblTextSize + textDescent());

​

  fill(150);

  text(fpsLbl, xFpsLbl, yFpsLbl);

  pop();

}

​

// In 2017, Chrome and other browsers started adding additional protection to browsers

// so that media would not auto-play and browsers could not auto-start microphones or

// cameras without the users' permission. So, to get the microphone to work, the user

// must explicitly interact with the page

function drawEnableMicText(){

  push();

  fill(255);

  noStroke();

​

  const fontSize = 20;

  const instructionText = "Touch or click the screen to begin";

  textSize(fontSize);

​

  const strWidth = textWidth(instructionText);

  const xText = width / 2 - strWidth / 2;

  const yText = height / 2 - fontSize / 2;

  text(instructionText, xText, yText);

  pop();

}

​

function touchStarted() {

  if (getAudioContext().state !== 'running') {

    getAudioContext().resume();

    drawAxes();

  }

}

​

function mouseClicked() {

  getAudioContext().resume().then(() => {

    console.log('Playback resumed successfully');

    drawAxes();

  });

}

​

function printAudioSourceInformation(){

  let micSamplingRate = sampleRate();

  print(mic);

​

  // For debugging, it's useful to print out this information

  // https://p5js.org/reference/#/p5.AudioIn/getSources

  mic.getSources(function(devices) {

    print("Your audio devices: ")

    // https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo

    devices.forEach(function(device) {

      print("  " + device.kind + ": " + device.label + " id = " + device.deviceId);

    });

  });

  print("Sampling rate:", sampleRate());

​

  // Helpful to determine if the microphone state changes

  getAudioContext().onstatechange = function() {

    print("getAudioContext().onstatechange", getAudioContext().state);

  }

}