Miko's Final Project - OpenProcessing

mySketch
xxxxxxxxxx
 
let song;
let haveWeStarted = false; //false until the user clicks on the project window 
let startTime, elapsedTime;
​
​
//The preload function is used to load large files, like audio or video
//or really large, high-quality images
function preload() {
  song = loadSound("Hero.mp3"); 
}
​
//Detect when the user has started by clicking on the screen
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...useful if you need it
    startTime = Date.now();
    haveWeStarted = true; 
  }
}
​
​
function setup() {
  createCanvas(500, 500);
}
​
​
function draw() {
  background("black");
​
  if (haveWeStarted == false) {
    showStartScreen();
  } else {
    showAnimation();
  }
}
​
//Only shown at the beginning, this tells the user how to start
function showStartScreen() {
  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() {
  elapsedTime = Date.now() - startTime;
  elapsedTime /= 1000;
  //Uncomment the line below if you want the time to be integer seconds
  //instead of having a decimal part to it
  // elapsedTime = int(elapsedTime);
  
  
  if( elapsedTime < 7.5  ) {  //first 7.5 seconds
    scene1();
  }
  else if( elapsedTime < 10.5 ) { //next 3 seconds
    scene2();
  }
  else {
    scene3();
  }
  
  //show the timing...you should leave this out when you are finished
  //(keep it in while testing, delete or comment out later)
  showTiming()
}
  
function showTiming() {
  textSize(40);
  textAlign(LEFT, BOTTOM);
  fill("cyan");
  text(elapsedTime, 0, 40);
}
​
function scene1() {
  background("pink");
  textSize(40);
  textAlign(CENTER, CENTER);
  fill("black");
  text("Scene 1", width/2, height/2);
       
}
​
function scene2() {
  background("green");
  textSize(40);
  textAlign(CENTER, CENTER);
  fill("black");
  text("Scene 2", width/2, height/2);
}
​
function scene3() {
  background("blue");
  textSize(40);
  textAlign(CENTER, CENTER);
  fill("black");
  text("Scene 3", width/2, height/2);
}