let X = 600

let Y = 600

​

//stages

let landingPage = true;

let gamePage = false;

let resultPage = false;

let citationPage = false;

​

//texts

let welcome = "welcome to the event oracle\n欢迎来到时节占卜\n"

let instructions = "loosen your eyes\n let in the music\nglide your fingers across the keyboard\npress a letter that calls you"

​

//media assets

let metamorphasis 

​

//buttons

let startButton;

​

//animation

let fade = 255;

let fadeTimer = 0;

​

function preload(){

  metamorphasis = loadSound("metamorphasis_clip.mov")

}

​

function setup() {

  createCanvas(X, Y);

  //start oracle button 

  startButton = createButton("* let it happen *");

  startButton.position(X/2 - 50, Y/2 + 50);

  startButton.style('background-color', '#ffcc00');

  startButton.mousePressed(startOracle);

}

​

function draw() {

  textAlign(CENTER);

  background(255, 105, 105);

  textSize(20);

​

  if (landingPage == true) {

    text(welcome, X/2, Y/2 - 50);

    //stop music if it's playing

    if (metamorphasis.isPlaying == true){

      metamorphasis.stop()}

  } 

  else if (gamePage == true) {

    //show instructions

    //fade out after 4 seconds

    if (fadeTimer < 4 * 60) {  // 5 seconds in terms of frame count 

      fadeTimer++;

    } else if (fade > 0) {

      fade -= 3;

    }

    fill(0, 0, 0, fade); // changes fill over time

    text(instructions, X/2, Y/2 - 50);

  }

}

​

function startOracle() {

  landingPage = false;

  gamePage = true;

  startButton.hide();

  metamorphasis.loop();//loop music

  metamorphasis.play();

}

​