initialLogo = loadImage("assets/barlogo.png");

  barLogo = loadImage("assets/bar.png");

  barBackground = loadImage("assets/jazz.png");

  bottle = loadImage("assets/bottleGlow.png");

  chair = loadImage("assets/chairGlow.png");

  piano = loadImage("assets/pianoGlow.png");

  starter = loadImage("imgStart.png");

  bartender = loadImage("assets/bartender.png");

  chairBackground = loadImage("chairBackground.png");

}

​

var state = "intro";

const space = 80;

var rSide = [];

var black = [];

var mid = [];

var lSide = [];

var osc = [];

var envo = [];

var stars = [];

let glassWidth = 50;

let glassHeight = 150;

let liquidHeight = 0;

let maxLiquidHeight = 120;

​

let gui; //p5.gui https://github.com/bitcraftlab/p5.gui

let play;

let nextButton;

let prevButton;

let trackLoop;

let listLoop;

let randomPlay;

let current_image = 0;

//song list

let image_filelist = ["images/joe.jpg", "images/Howls-Moving-Castle-Thumb.png"];

//album cover

let music_filelist = [

  "playlist/summer.mp3",

  "playlist/compressMerryGoRound.mp3",

];

let imagelist = [];

let musiclist = [];

let vol;

let nowPlaying;

let status = 0;

​

var rKee = ["A", null, null, "F", null, null, null, "K", null, null];

var blKee = ["W", "E", null, "T", "Y", "U", null, "O", "P", null, null];

var midKee = [null, "S", null, null, "G", "H", null, null, "L", null];

var lKee = [null, null, "D", null, null, null, "J", null, null, ";"];

​

function setup() {

  soundFormats("mp3", "ogg");

​

  for (let filename of image_filelist) {

    imagelist.push(loadImage(filename));

  }

​

  for (let filename of music_filelist) {

    musiclist.push(loadSound(filename));

  }

  createCanvas(space * 10, 600);

​

  for (var j = 0; j < 17; j++) {

    envo.push(new p5.Env()); //p5.Envelope,  controls the output volume of oscillator.

    envo[j].setADSR(0.01, 0.05, 1, 0.1);

    envo[j].setRange(1, 0);

    osc.push(new p5.Oscillator());

    osc[j].amp(envo[j]);

  }

​

  for (var i = 0; i < 10; i++) {

    rSide.push(new rSideKey(i, space, rKee[i]));

    black.push(new BlackKey(i + 0.667, space, blKee[i]));

    mid.push(new MidKey(i, space, midKee[i]));

    lSide.push(new lSideKey(i, space, lKee[i]));

  }

  for (var g = 0; g < 50; g++) {

    var xC = random(800);

    var yC = random(200);

    star = new Star(xC, yC);

    stars[g] = star;

  }

  nowPlaying = musiclist[current_image];

}

​

function draw() {

  if (state == "intro") {

    drawIntro();

  } else if (state == "bar") {

    drawFrontBar();

  } else if (state == "piano") {

    drawPiano();

  } else if (state == "inside") {

    drawInside();

  } else if (state == "chair") {

    drawChair();

  } else if (state == "bottle") {

    drawBottle();

  }

}

function mouseClicked() {

  print("Mouse X = " + mouseX);

  print("Mouse Y = " + mouseY);

  if (mouseX > 200 && mouseX < 500 && mouseY > 420 && state == "bar") {

    state = "inside";

  } else if (

    mouseX > 220 &&

    mouseX < 580 &&

    mouseY > 330 &&

    state == "inside"

  ) {

    state = "piano";

  } else if (

    mouseY > 300 &&

    mouseY < 460 &&

    mouseX > 680 &&

    state == "inside"

  ) {

    state = "chair";

  } else if (

    mouseX > 380 &&

    mouseX < 530 &&

    mouseX > 260 &&

    state == "inside"

  ) {

    state = "bottle";

    liquidHeight = 0;

  } else if (

    state == "bottle" &&

    mouseX > 80 &&

    mouseX < 80 + glassWidth &&

    mouseY > 200 &&

    mouseY < 200 + glassHeight &&

    liquidHeight < maxLiquidHeight

  ) {

    liquidHeight += 12;

  }

}

​

function drawInside() {

  if (mouseX > 220 && mouseX < 580 && mouseY > 330) {

    image(piano, 0, 0);

  } else if (mouseY > 300 && mouseY < 460 && mouseX > 680) {

    image(chair, 0, 0);

  } else if (mouseX > 380 && mouseX < 530 && mouseX > 260) {

    image(bottle, 0, 0);

  } else {

    image(barBackground, 0, 0);

  }

}

​

function drawBottle() {

  image(bartender, 0, 0);

  stroke(0);

  strokeWeight(2);

  fill(220);

  textSize(13);

  rect(600, 200, 160, 150);

  strokeWeight(3);

  if (liquidHeight < maxLiquidHeight) {

    text("Welcome to the bar.", 620, 250);

    text("Please fill that cup for me.", 605, 300);

  } else {

    text("Thanks for your help.", 620, 275);

  }

  rect(80, 200, glassWidth, glassHeight);

​

  noStroke();

  fill(242, 142, 28);

  rect(

    80 + 1,

    200 + (glassHeight - liquidHeight),

    glassWidth - 3,

    liquidHeight - 2

  );

}

let created = false;

function drawChair() {

  image(chairBackground, 0, 0);

  if (created == false) {

    gui = createGui();

    vol = createSlider("volume", 140, 380, 310);

    play = createButton("⏯", 280, 420, 29, 29);

    nextButton = createButton("⏭", 420, 420, 29, 29);

    prevButton = createButton("⏮", 140, 420, 29, 29);

    randomPlay = createButton("🔀", 280, 460, 29, 29);

    listLoop = createButton("🔁", 420, 460, 29, 29);

    trackLoop = createButton("🔂", 140, 460, 29, 29);

    created = true;

  }

  stroke("#000000");

  fill(70);

  strokeWeight(10);

  rect(100, 100, 400, 400, 15);

  drawGui();

  image(imagelist[current_image], 175, 120, 250, 250);

  if (prevButton.isPressed) {

    prev();

  }

  if (nextButton.isPressed) {

    next();

  }

  if (play.isPressed) {

    playsong();

  }

  if (vol.isChanged) {

    nowPlaying.setVolume(vol.val);

  }

}

​

function next() {

  current_image = current_image + 1;

​

  if (current_image > imagelist.length - 1) {

    current_image = 0;

  }

​

  nowPlaying.stop();

  nowPlaying = musiclist[current_image];

  nowPlaying.play();

  print("next song is " + current_image);

}

​

function prev() {

  current_image = current_image - 1;

  if (current_image < 0) {

    current_image = imagelist.length - 1;

  }

  nowPlaying.stop();

  nowPlaying = musiclist[current_image];

  nowPlaying.play();

  print("previous song is " + current_image);

}

​

function playsong() {

  if (status == 0) {

    nowPlaying.play();

    status = 1;

  } else {

    status = 0;

    nowPlaying.pause();

  }

}

​

function drawIntro() {

  background(0);

  image(starter, 0, 0);

  fill(255);

  textSize(32);

  stroke(0);

  strokeWeight(4);

​

  text("Press the SPACEBAR to start the experience.", 60, height / 2.1);

  text("Press ESC to go back anytime.", 160, height / 1.6);

  initialLogo.resize(200, 0);

  image(initialLogo, 280, 0);

}

​

function drawPiano() {

  background(255);

  strokeWeight(1);

  stroke(0);

  for (var i = 0; i < rSide.length; i++) {

    if (i === 0 || i === 3 || i === 7) {

      rSide[i].display();

    }

    if (i !== 2 && i !== 6 && i !== 9 && i !== 10) {

      black[i].display();

    }

    if (i === 1 || i === 4 || i === 5 || i === 8) {

      mid[i].display();

    }

    if (i === 2 || i === 6 || i === 9) {

      lSide[i].display();

    }

  }

}

​

function keyPressed() {

  var root = 60;

  if (keyCode === ESCAPE && state == "piano") {

    //Go back from piano to bar

    state = "inside";

  } else if (keyCode === ESCAPE && state == "bottle") {

    //Go back from bottle to bar

    state = "inside";

  } else if (keyCode === ESCAPE && state == "chair") {

    //Go back from chair to bar

    state = "inside";

    nowPlaying.stop();

  } else if (keyCode === ESCAPE && state == "inside") {

    //Go back from inside to bar front

    state = "bar";

  } else if (key == " " && state == "intro") {

    //Go from intro to bar front

    state = "bar";

  }

  if (state == "piano") {

    if (keyCode === 65) {

      rSide[0].red();

      osc[0].start();

      osc[0].freq(midiToFreq(root));

      envo[0].play();

    } else if (keyCode === 87) {

      black[0].red();

      osc[1].start();

      osc[1].freq(midiToFreq(root + 1));

      envo[1].play();

    } else if (keyCode === 83) {

      mid[1].red();

      osc[2].start();

      osc[2].freq(midiToFreq(root + 2));

      envo[2].play();

    } else if (keyCode === 69) {

      black[1].red();

      osc[3].start();

      osc[3].freq(midiToFreq(root + 3));

      envo[3].play();

    } else if (keyCode === 68) {

      lSide[2].red();

      osc[4].start();

      osc[4].freq(midiToFreq(root + 4));

      envo[4].play();

    } else if (keyCode === 70) {

      rSide[3].red();

      osc[5].start();

      osc[5].freq(midiToFreq(root + 5));

      envo[5].play();

    } else if (keyCode === 84) {

      black[3].red();

      osc[6].start();

      osc[6].freq(midiToFreq(root + 6));

      envo[6].play();

    } else if (keyCode === 71) {

      mid[4].red();

      osc[7].start();

      osc[7].freq(midiToFreq(root + 7));

      envo[7].play();

    } else if (keyCode === 89) {

      black[4].red();

      osc[8].start();

      osc[8].freq(midiToFreq(root + 8));

      envo[8].play();

    } else if (keyCode === 72) {

      mid[5].red();

      osc[9].start();

      osc[9].freq(midiToFreq(root + 9));

      envo[9].play();

    } else if (keyCode === 85) {

      black[5].red();

      osc[10].start();

      osc[10].freq(midiToFreq(root + 10));

      envo[10].play();

    } else if (keyCode === 74) {

      lSide[6].red();

      osc[11].start();

      osc[11].freq(midiToFreq(root + 11));

      envo[11].play();

    } else if (keyCode === 75) {

      rSide[7].red();

      osc[12].start();

      osc[12].freq(midiToFreq(root + 12));

      envo[12].play();

    } else if (keyCode === 79) {

      black[7].red();

      osc[13].start();

      osc[13].freq(midiToFreq(root + 13));

      envo[13].play();

    } else if (keyCode === 76) {

      mid[8].red();

      osc[14].start();

      osc[14].freq(midiToFreq(root + 14));

      envo[14].play();

    } else if (keyCode === 80) {

      black[8].red();

      osc[15].start();

      osc[15].freq(midiToFreq(root + 15));

      envo[15].play();

    } else if (keyCode === 186) {

      lSide[9].red();

      osc[16].start();

      osc[16].freq(midiToFreq(root + 16));

      envo[16].play();

    }

  }

}

​

function keyReleased() {

  for (var i = 0; i < 10; i++) {

    rSide[i].white();

    black[i].white();

    mid[i].white();

    lSide[i].white();

  }

}

​

function rSideKey(start, space, kee) {

  this.x = start * space;

  this.keyWidth = space;

  this.col = color(255);

  this.kee = kee;

  this.size = space / 3;

​

  this.display = function () {

    fill(this.col);

​

    beginShape();

    vertex(this.x, 0);

    vertex(this.x, height);

    vertex(this.x + this.keyWidth, height);

    vertex(this.x + this.keyWidth, height * 0.6);

    vertex(this.x + this.keyWidth * 0.667, height * 0.6);

    vertex(this.x + this.keyWidth * 0.667, 0);

    endShape();

​

    fill(0);

    textSize(this.size);

    textFont("Helvetica");

    text(this.kee, this.x + this.keyWidth * 0.4, height - this.size);

  };

​

  this.red = function () {

    this.col = color(255, 0, 0);

  };

​

  this.white = function () {

    this.col = color(255);

  };

}

​

function BlackKey(start, space, kee) {

  this.x = start * space;

  this.keyWidth = space;

  this.col = color(0);

  this.kee = kee;

  this.size = space / 3;

​

  this.display = function () {

    fill(this.col);

    rect(this.x, 0, this.keyWidth * 0.667, height * 0.6);

​

    fill(255);

    textSize(this.size);

    textFont("Helvetica");

    text(this.kee, this.x + this.keyWidth * 0.2, height * 0.6 - this.size);

  };

​

  this.red = function () {

    this.col = color(255, 0, 0);

  };

​

  this.white = function () {

    this.col = color(0);

  };

}

​

function MidKey(start, space, kee) {

  this.x = start * space;

  this.keyWidth = space;

  this.col = color(255);

  this.kee = kee;

  this.size = space / 3;

​

  this.display = function () {

    fill(this.col);

    beginShape();

    vertex(this.x + this.keyWidth * 0.333, 0);

    vertex(this.x + this.keyWidth * 0.333, height * 0.6);

    vertex(this.x, height * 0.6);

    vertex(this.x, height);

    vertex(this.x + this.keyWidth, height);

    vertex(this.x + this.keyWidth, height * 0.6);

    vertex(this.x + this.keyWidth * 0.667, height * 0.6);

    vertex(this.x + this.keyWidth * 0.667, 0);

    endShape();

​

    fill(0);

    textSize(this.size);

    textFont("Helvetica");

    text(this.kee, this.x + this.keyWidth * 0.4, height - this.size);

  };

​

  this.red = function () {

    this.col = color(255, 0, 0);

  };

​

  this.white = function () {

    this.col = color(255);

  };

}

​

function lSideKey(start, space, kee) {

  this.x = start * space;

  this.keyWidth = space;

  this.col = color(255);

  this.kee = kee;

  this.size = space / 3;

​

  this.display = function () {

    fill(this.col);

    beginShape();

    vertex(this.x + this.keyWidth * 0.333, 0);

    vertex(this.x + this.keyWidth * 0.333, height * 0.6);

    vertex(this.x, height * 0.6);

    vertex(this.x, height);

    vertex(this.x + this.keyWidth, height);

    vertex(this.x + this.keyWidth, 0);

    endShape();

​

    fill(0);

    textSize(this.size);

    textFont("Helvetica");

    text(this.kee, this.x + this.keyWidth * 0.4, height - this.size);

  };

​

  this.red = function () {

    this.col = color(255, 0, 0);

  };

​

  this.white = function () {

    this.col = color(255);

  };

}

​

class Star {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

  drawStar(weight) {

    fill(255);

    stroke(255);

    strokeWeight(weight);

    point(this.x, this.y);

    strokeWeight(1);

  }

}

​

function drawFrontBar() {

  background(0);

  fill(99, 70, 45);

  rect(0, 200, 800, 600);

  barLogo.resize(300, 0);

  image(barLogo, 259, 80);

  strokeWeight(2);

  stroke(255);

  fill(105, 105, 105);

  rect(0, 320, 280, 200);

  rect(520, 320, 280, 200);

​

  fill(66, 46, 29);

  rect(300, 420, 200, 180);

  stroke(0);

  strokeWeight(2);

  line(400, 422, 400, 601);

​

  stroke(255);

  strokeWeight(1);

  fill(255, 255, 40);

​

  circle(380, 520, 10);

  circle(420, 520, 10);

​

  if (frameCount % 60 == 0) {

    for (var i = 0; i < 50; i++) {

      var xC = stars[i].x;

      var yC = stars[i].y;

      star = new Star(xC, yC);

      stars[i] = star;

    }

  }

  for (var j = 0; j < stars.length; j++) {

    stars[j].drawStar(random(1, 3));

  }

}

​