PROCESS DOCUMENTATION: tinasolo.com/como-nossos-pais

​

FILES:

graphics.js: Graphics class, creates the interactive graphics.

hotspots.js: Hotspots function, changes cursor for feedback.

letra.js: Letra class, creates Portuguese lyrics.

lyrics.js: Lyrics class, creates English lyrics.

preload.js: Global variables and Preload.

sketch.js: Setup, Draw loop, MouseClicked, and Back button functions.

splash.js: Splash class, creates splash screen.

*/

​

function setup() {

  createCanvas(1300, 740);

  screen = 0;

  letra = new Letra();

  lyrics = new Lyrics();

  graphics = new Graphics();

  splash = new Splash();

}

​

function draw() {

  // Got the screen logic from Stacey's candy shop code: https://editor.p5js.org/staceyao/sketches/70X4-VFDy

​

  hotspots();

  if (screen == 0) {

    // Splash screen

    splash.click();

    splash.render();

  } else if (screen == 1) {

    // Portuguese version

    letra.swap();

    letra.render();

    graphics.swap();

    graphics.render();

    backButton();

  } else if (screen == 2) {

    // English version

    lyrics.swap();

    lyrics.render();

    graphics.swap();

    graphics.render();

    backButton();

  }

}

​

// Switches from splash screen to Portuguese or English versions on mouse click.

function mouseClicked() {

  if (screen == 0 && (dist(mouseX, mouseY, 552, 555) < 80)) {

    song.play();

    songStart = millis();

    screen = 1

  } else if (screen == 0 && (dist(mouseX, mouseY, 795, 555) < 80)) {

    song.play();

    songStart = millis();

    screen = 2

  } else if (screen == 1 || screen == 2) {

    if (dist(mouseX, mouseY, 40, 30) < 40) {

      song.stop();

      screen = 0

    }

  }

}

​

// Shows back button, with text on hover.

function backButton() {

  image(backbutton, 20, 10, 1200, 720);

  if (dist(mouseX, mouseY, 20, 10) < 80) {

    image(backbuttonhover, 20, 10, 1200, 720);

  }

}