// We already have a loop: the draw loop

// 1. Try playing the drum from the draw loop

// 2. Slow draw loop down with frameRate. Do you anticipate any problems with this?

// 3. Keep frameRate, but use millis() to keep track of time

​

​

var kick;

var lastTime;

​

function preload(){

  kick = loadSound('sounds/kick.mp3');

}

​

function setup() {

  createCanvas(600, 400);

  background(100, 233, 100);

  // 2. 

  // frameRate(2);

  lastTime = 0;

}

​

function draw(){

  // 1. 

  //kick.play();

  //3. 

  if(millis() - lastTime > 500){

    kick.play();

    lastTime = millis();

  }

  // 4. Add some interactivity/animation

  // ellipse(mouseX, 200, 20, 20);

   // Problem: need to update drawing at the rate of kick beat (too slow!)

  // One solution that allows animation to go faster

  // While also allowing us to control the tempo: 

  // 5. Play kick drum once every second

  // if(millis() - lastTime > 100){

  //    kick.play();

  //   lastTime = millis();

  // }

  // BUT: Javascript clock is not reliable, and precision is important in music. 

}

​

​