//  

// This sketch shows how to create a sound-activated

// animation. There are five frames in the 'images'

// folder that show a ship being blown in the wind.

// In the sketch, we load these frames and then 

// we choose which frame to show, depending on the

// level of the microphone input. 

​

let frames = [];

let numberOfFrames = 5;

let mic;

​

// Record whether the user has clicked yet

let hasClicked = false;

​

function preload(){

  for (let i = 0; i < numberOfFrames; i++){

    frames[i] = loadImage('images/' + i + '.png');

  }

}

​

function setup(){

  createCanvas(400, 400);

  textAlign(CENTER);

  colorMode(HSB);

​

  // Create the mic object, which we will use to

  // get the microphone volume.

  mic = new p5.AudioIn();

}

​

function draw(){

  background(208, 82, 60);

​

  if (!hasClicked){

    fill(100);

    text('Click to start', width/2, 20);  

  }

  // Get the current level of the input microphone.

  // This will be a number between 0..1

  micLevel = mic.getLevel();

​

  // Use the micLevel variable to pick which frame to show.

  let frameNum = map(micLevel, 0, 1, 0, numberOfFrames);

​

  // Turn frameNum into an integer (whole number)

  frameNum = floor(frameNum);

​

  // Get the image from the array

  let frame = frames[frameNum];

​

  // Draw the frame to the canvas

  image(frame, 0, 0);

}

​

// Start the audio when the user clicks,

// because microphone access requires user interaction.

function mousePressed(){

  userStartAudio();

  mic.start();

​

  // Record that the user has clicked

  hasClicked = true;

}