let songB;

​

let rectHeight;

let colorA;

let colorB;

​

let textA;

let textB;

​

let myFont;

​

function preload(){

  songA = loadSound('Ocean.MP3');

  songB = loadSound('NewYork.mp3');

  myFont = loadFont('IBMPlexSerif-Medium.ttf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont(myFont);

  textSize(12);

  noCursor();

  colorA = (color('#C0E2E4'));

  colorB = (color('#ADA183'));

  background(colorA); 

  fill(colorB); 

  noStroke();

  rectHeight = height;

  songA.setLoop(true);

  songB.setLoop(true);

  textA = "-40.698470, 106.048558 (40° 41' 54.5' S, 106° 2' 54.8' E)";

  textB = " 40.698470, -73.951442 (40° 41' 54.5' N, 73° 57' 5.2' W)";

​

}

​

​

function draw(){

  background(colorA);

  rectHeight = map(mouseY, 0, height, height, 0);

  rect(0, 0, width, rectHeight);

  fill(colorB);

  textAlign(CENTER);

  text(textA, width/2, height-50);

  fill(colorA);

  text(textB, width/2, 50);

  fill(color('#F3FFA8'));

  circle(mouseX, mouseY, 16);

  fill(colorB);

​

  let volA = mouseY/height; // 0-1 scale

  let volB = 1 - volA;

  songA.setVolume(volA);

  songB.setVolume(volB);

}

​

function mousePressed() {

  if (songA.isPlaying()) {

    songA.stop();

    songB.stop();

  } else {

    songA.play();

    songB.play();

  }

}

​