p5.js Web Editor | Midterm project

xxxxxxxxxx
//for the sound icon
let SoundMall, SoundWaves, SoundMuseum;
​
// for arrows to go back and forth
let arrow;
​
// for img display as diffrent layers
let HomeImg, fish, seaSt; // to keep track of current img
let mall, museum, malltrn, museumtrn;
let bluBag, BrwnBag, LneBag, OrngBag, pnkBag, rdBag, whtBag, YlwBag, GrnBg;
let art1, art2, art3;
​
// for clicked objects class
let fishObj;
let arrowStObj, arrowMallObj, arrowMuseumObj;
let SeaStrt;
let expMgr;
let museumObj;
let mallObj;
​
// load sound and images
function preload() {
  SoundWaves = loadSound("waves.mp3");
  SoundMall = loadSound("mall.mp3");
  SoundMuseum = loadSound("Mcrowd.mp3");
  //   background home layer
  HomeImg = loadImage("/img/Start.JPG");
  fish = loadImage("/img/fish.png");
  seaSt = loadImage("/img/Artboard1.png");
  arrow = loadImage("/img/arrow.png");
​
  //   mall imgs
  mall = loadImage("/img/Artboard2.png");
  malltrn = loadImage("/img/malltrn.png");
​
  bluBag = loadImage("/img/BluBg.png");
  BrwnBag = loadImage("/img/BrwnBg.png");
  LneBag = loadImage("/img/LneBg.png");
  OrngBag = loadImage("/img/OrngBg.png");
  pnkBag = loadImage("/img/PnkBg.png");
  rdBag = loadImage("/img/RdBg.png");
  whtBag = loadImage("/img/WhteBg.png");
  YlwBag = loadImage("/img/yllwBg.png");
  GrnBg = loadImage("/img/GrnBg.png");
​
  //   museum img
  museum = loadImage("/img/Artboard4.png");
  museumtrn = loadImage("/img/museumtrn.png");
​
  art1 = loadImage("/img/art1.png");
  art2 = loadImage("/img/art2.png");
  art3 = loadImage("/img/art3.png");
​
  //   class
  expMgr = new ExperienceManager();
}
​
function setup() {
  createCanvas(500, 500);
  expMgr.display();
}
​
function draw() {
  // print("X:" + mouseX + ", Y:" + mouseY);
}
​
// class to manage which slide to display.
class ExperienceManager {
  constructor() {
    this.onHome = true;
    this.onStreet = false;
    this.onMall = false;
    this.onMuseum = false;
  }
  display() {
    if (this.onHome) {
      image(HomeImg, 0, 0, 500, 500);
      SoundWaves.play();
      SoundMall.stop();
      SoundMuseum.stop();
      fishObj = new ClickedObj(fish, 215, 320, 90, 90);
      // Call the textGraphics function
      Title("Life Under the Sea", width / 2, 90, 30);
      // Call the instruction box function
      drawInstructionBox(110, 130, 280, 180, 23);
      this.onStreet = false;
      this.onMall = false;
      this.onMuseum = false;
    } else if (this.onStreet) {
      SoundWaves.play();
      SoundMall.stop();
      SoundMuseum.stop();
      image(seaSt, 0, 0, 500, 500);
      arrowStObj = new ClickedObj(arrow, 10, 20, 25, 25);
      mallObj = new ClickedObj(malltrn, 25, 320, 150, 150);
      museumObj = new ClickedObj(museumtrn, 38, 190, 110, 110);
      this.onHome = false;
      this.onMall = false;
      this.onMuseum = false;
    } else if (this.onMall) {
      //     hide clicks
      SoundMall.play();
      SoundMuseum.stop();
      SoundWaves.stop();
      fishObj.x = -100;
      museumObj.x = -100;
      // bags on click display
      image(mall, 0, 0, 500, 500);
      arrowMallObj = new ClickedObj(arrow, 10, 20, 25, 25);
​
      this.onStreet = false;
      this.onHome = false;
      this.onMuseum = false;
    } else if (this.onMuseum) {
      image(museum, 0, 0, 500, 500);
      SoundWaves.stop();
      SoundMall.stop();
      SoundMuseum.play();
      arrowMuseumObj = new ClickedObj(arrow, 10, 20, 25, 25);
      this.onHome = false;
      this.onMall = false;
      this.onStreet = false;
    }
  }
}
​
// this class helps because it removes alot of hard coding so when I change the coordinates of an inage the program will recognise and so i dont need to change it everywhere.
class ClickedObj {
  constructor(imgFileName, x, y, imgWidth, imgHeight) {
    this.imgFileName = imgFileName;
    this.x = x;
    this.y = y;
    this.imgWidth = imgWidth;
    this.imgHeight = imgHeight;
    this.drawObjct();
  }
  drawObjct() {
    if (this.imgFileName) {
      image(this.imgFileName, this.x, this.y, this.imgWidth, this.imgHeight);
      // print("image draw sucessfull");
    }
  }
  isSelected() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.imgWidth &&
      mouseY > this.y &&
      mouseY < this.y + this.imgHeight
    ) {
      return true;
    } else return false;
  }
}
​
// to go to the next layer of the street so all clickable objects are here.
function mouseClicked() {
  //  to go  back to the home layer and instructions and click other objects like the fish etc.
  if (expMgr.onHome) {
    if (fishObj.isSelected()) {
      // print("fish 1 is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = true;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
      //print("done")
    }
  } else if (expMgr.onStreet) {
    if (mallObj.isSelected()) {
      // print("mall is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = false;
      expMgr.onMall = true;
      expMgr.onMuseum = false;
      expMgr.display();
    } else if (museumObj.isSelected()) {
      // print("museum is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = false;
      expMgr.onMall = false;
      expMgr.onMuseum = true;
      expMgr.display();
    } else if (arrowStObj.isSelected()) {
      // print("arrow is clicked");
      expMgr.onHome = true;
      expMgr.onStreet = false;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
    }
  } else if (expMgr.onMall) {
    if (arrowMallObj.isSelected()) {
      // print("arrow is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = true;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
    } else if (mouseX >= 83 && mouseX <= 124 && mouseY >= 90 && mouseY <= 135) {
      image(rdBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 83 &&
      mouseX <= 120 &&
      mouseY >= 200 &&
      mouseY <= 236
    ) {
      image(LneBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 83 &&
      mouseX <= 121 &&
      mouseY >= 220 &&
      mouseY <= 331
    ) {
      image(BrwnBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 353 &&
      mouseX <= 379 &&
      mouseY >= 91 &&
      mouseY <= 140
    ) {
      image(YlwBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 391 &&
      mouseX <= 422 &&
      mouseY >= 96 &&
      mouseY <= 141
    ) {
      image(OrngBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 345 &&
      mouseX <= 381 &&
      mouseY >= 192 &&
      mouseY <= 238
    ) {
      image(bluBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 397 &&
      mouseX <= 423 &&
      mouseY >= 202 &&
      mouseY <= 235
    ) {
      image(GrnBg, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 355 &&
      mouseX <= 381 &&
      mouseY >= 297 &&
      mouseY <= 336
    ) {
      image(pnkBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 391 &&
      mouseX <= 427 &&
      mouseY >= 312 &&
      mouseY <= 332
    ) {
      image(whtBag, width / 4, height / 4, 210, 210);
    }
  } else if (expMgr.onMuseum) {
    if (arrowMuseumObj.isSelected()) {
      // print("arrow is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = true;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
    } else if (
      mouseX >= 126 &&
      mouseX <= 177 &&
      mouseY >= 96 &&
      mouseY <= 199
    ) {
      image(art1, width / 3, height / 3, 250, 300);
    } else if (
      mouseX >= 212 &&
      mouseX <= 293 &&
      mouseY >= 102 &&
      mouseY <= 179
    ) {
      image(art3, width / 3, height / 3, 250, 300);
    } else if (
      mouseX >= 330 &&
      mouseX <= 384 &&
      mouseY >= 97 &&
      mouseY <= 191
    ) {
      image(art2, width / 3, height / 3, 250, 300);
    }
  }
}
​
// Create a function to draw an instruction box
function drawInstructionBox(x, y, width, height, padding) {
  // Draw the instruction box
  fill(95, 158, 160);
  noStroke();
  rect(x, y, width, height, 2);
​
  // Define instruction text
  let instructions = [
    "Welcome to Life under the sea",
    "interactive experiance!",
    "",
    " - Click on places you want to visit,",
    "view bags and art.",
    "- Click the fish below to start.",
  ];
​
  fill(255);
  textSize(16);
  textAlign(LEFT, TOP);
​
  // Draw instruction text
  for (let i = 0; i < instructions.length; i++) {
    text(instructions[i], x + padding, y + padding + i * 20);
  }
}
​
// Create a function to display text with random styling
function Title(textToDisplay, x, y, textSizeValue) {
  // Generate random styling attributes
  let isBold = true;
  // Random color pinl
  let textColor = color(255);
​
  // Apply the styling attributes
  fill(textColor);
  textSize(textSizeValue);
  textFont("zantrokeregular");
  // Apply bold if true
  textStyle(isBold ? BOLD : NORMAL);
  textAlign(CENTER, CENTER);
  text(textToDisplay, x, y);
}
​
Cookies

Sketch Files

Console

Preview
