My Sketch

var song;

var haveWeStarted = false;    //false until they click on the project window

var startTime, elapsed;

​

function preload() {

  song = loadSound("vader.mp3");

}

​

function mousePressed() {

  if( haveWeStarted == false ) {

    song.amp(0.25);     // Change to 25% volume

    song.play();        // Start playing the sound

    // song.jump( 10 );     // This fast forwards 10 seconds

startTime = Date.now();

    haveWeStarted = true;

  }

}

​

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

  background("black");

  if( haveWeStarted == false ) {      //if we haven't started yet, show directions

    showStartScreen();

  }

  else {            //but if we have started, show "normal" stuff

    showAnimation();

  }

}

​

//Only shown at the beginning, this tells the user how to start

function showStartScreen() {        //A function that shows some directions

  textSize(40);

  fill("cyan");

  textAlign( CENTER, CENTER );

  text("Click to start", width/2, height/2);

}

​

//Put code here to see an animation during the song

function showAnimation() {        //This just shows elapsed time…

  elapsed = Date.now() - startTime;

  elapsed /= 1000;        //Since in milliseconds, divide by 1000 for seconds

​

  elapsed = int(elapsed);     //The int() function shaves off the decimal part

​

  textSize(40);

  textAlign(LEFT, BOTTOM);

  fill("cyan");

  text(elapsed, 0, 40);

}

​

​