p5.js Web Editor | Midterm FINALL

xxxxxxxxxx
let powerButtonWidth;
let powerButtonHeight;
let powerBaseHeight;
let powerBaseWidth;
let buttonImage;
let loadingVideo;
let videoPlaying = false;
let icons = [];
let specialWindowOpen = false;
let specialWindowImage;
let errorShouldSpawn = false;
let specialWindow = null;
​
// Global variable to remember the label of the last clicked icon
let lastIconClicked = null;
​
let currentState;
const State = {
  OFF: "OFF",
  LOADING: "LOADING",
  DESKTOP: "DESKTOP",
  BLUE_SCREEN: "BLUE_SCREEN",
};
​
// Initialize currentState to OFF
currentState = State.OFF;
​
let errorImagesSpawned = false;
​
let originalErrorImage;
​
class Window {
  constructor(image, width, height) {
    this.image = image;
    this.width = width;
    this.height = height;
    this.x = 50;
    this.y = 50;
    this.closeButtonSize = 50; // Size of the close button
  }
​
  draw() {
    image(this.image, this.x, this.y, this.width, this.height);
  }
​
  clicked(mx, my) {
    // Check if close button is clicked
    if (
      mx > this.x + this.width - this.closeButtonSize &&
      mx < this.x + this.width &&
      my > this.y &&
      my < this.y + this.closeButtonSize
    ) {
      clickSound.play();
      specialWindow = null; // Close the window
    }
​
    // Check if the bottom half of the window is clicked
    if (
      this.image === errorImage &&
      mx >= this.x &&
      mx <= this.x + this.width &&
      my >= this.y + this.height / 2 &&
      my <= this.y + this.height
    ) {
      errorShouldSpawn = true;
      // Logic for clicking the bottom half of the error window
      for (let i = 0; i < 40; i++) {
        setTimeout(() => {
          spawnErrorImages();
        }, i * 100); // spawn more error windows over time
      }
​
      // Transition to blue screen after 2 seconds
      setTimeout(() => {
        loop();
        currentState = State.BLUE_SCREEN;
      }, 4000);
    }
  }
}
​
// Icon class definition
class Icon {
  constructor(image, label, x, y, width, height) {
    this.image = image;
    this.label = label;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.isHighlighted = false;
    this.isDragging = false; // New property to track dragging state
    this.offsetX = 0; // Offset between mouse and icon x position during drag
    this.offsetY = 0; // Offset between mouse and icon y position during drag
    this.clickCount = 0;
  }
​
  draw() {
    push();
    if (this.isHighlighted || this.isDragging) {
      tint(0, 0, 255); // Tint for highlight
      fill("blue"); // Color for highlighted text
    } else {
      noTint();
      fill(255); // Default text color
    }
​
    image(this.image, this.x, this.y, this.width, this.height);
    text(this.label, this.x, this.y + this.height + 10); // Adjust text position below the icon
    pop();
  }
​
  contains(px, py) {
    return (
      px >= this.x &&
      px <= this.x + this.width &&
      py >= this.y &&
      py <= this.y + this.height
    );
  }
​
  click() {
    if (this.contains(mouseX, mouseY)) {
      this.isHighlighted = true;
      clickSound.play();
​
      // Check if the current icon is the last clicked icon
      if (lastIconClicked === this.label) {
        this.clickCount++; // Increment only if the same icon is clicked consecutively
      } else {
        // Reset all icons' click counts if a different icon is clicked
        icons.forEach((icon) => (icon.clickCount = 0));
        this.clickCount = 1;
        lastIconClicked = this.label; // Update the last clicked icon label
      }
​
      console.log(
        `Clicked on Icon: ${this.label}, Click Count: ${this.clickCount}`
      );
​
      // Check if the icon is clicked two times in a row
      if (this.clickCount % 2 == 0 && this.label === "midterm.exe") {
        errorImageLogic();
        this.clickCount = 0; // Reset click count after opening the icon
      } else if (this.clickCount % 2 == 0 && this.label === "My Computer") {
        myComputerLogic();
        this.clickCount = 0; // Reset click count after opening the icon
      } else if (this.clickCount % 2 == 0 && this.label === "Recycle Bin") {
        recycleBinLogic();
        this.clickCount = 0; // Reset click count after opening the icon
      } else if (this.clickCount == 1 && this.label === "errorImage") {
        spawnErrorImages();
        this.clickCount = 0; // Reset click count after spawning error images
      }
    } else {
      this.isHighlighted = false;
    }
  }
​
  mousePressed() {
    if (this.contains(mouseX, mouseY)) {
      this.isDragging = true;
      this.offsetX = this.x - mouseX;
      this.offsetY = this.y - mouseY;
    }
  }
​
  mouseReleased() {
    this.isDragging = false;
  }
​
  mouseDragged() {
    if (this.isDragging) {
      this.x = mouseX + this.offsetX;
      this.y = mouseY + this.offsetY;
    }
  }
}
​
function preload() {
  buttonImage = loadImage("powerButton.png");
  buttonImageGreen = loadImage("powerButtonGreen.png");
  windowsImage = loadImage("windowsJPG.jpg");
  windowsSound = loadSound("windowsSound.mp3");
  computerIcon = loadImage("computerIcon.png");
  computerIconBlue = loadImage("computerIconBlue.png");
  clickSound = loadSound("clickSound.mp3");
  midtermIcon = loadImage("midIcon.png");
  midtermIconBlue = loadImage("midIconBlue.png");
  recycleBin = loadImage("recycleBin.png");
  recycleBinBlue = loadImage("recycleBinBlue.png");
  errorImage = loadImage("midtermError.png");
  errorSound = loadSound("errorSound.mp3");
  myComputerWindow = loadImage("myComputerWindow.png");
  recycleBinWindow = loadImage("recycleBinWindow.png");
  glitchSound = loadSound("glitchSound.mp3")
}
​
function drawPowerButton() {
  rect(width / 2, height / 2, powerBaseWidth, powerBaseHeight, 30);
  fill(20);
  rectMode(CENTER);
  rect(width / 2, height / 2, powerButtonWidth, powerButtonHeight, 30);
  fill(150);
  rectMode(CENTER);
  push();
  imageMode(CENTER);
  if (dist(mouseX, mouseY, width / 2, height / 2) < 80) {
    image(buttonImageGreen, width / 2, height / 2, 100, 100);
  } else {
    image(buttonImage, width / 2, height / 2, 100, 100);
  }
  pop();
}
​
function setup() {
  createCanvas(400, 400);
​
  powerButtonWidth = 150;
  powerButtonHeight = 150;
​
  powerBaseWidth = 200;
  powerBaseHeight = 200;
​
  // Initialize icons
  // Initialize icons only when in DESKTOP state
  icons = [
    new Icon(loadImage("computerIcon.png"), "My Computer", 8, 8, 60, 60),
    new Icon(loadImage("midIcon.png"), "midterm.exe", 8, 90, 60, 60),
    new Icon(loadImage("recycleBin.png"), "Recycle Bin", 330, 310, 50, 50),
  ];
  console.log("Setup complete. Current state: " + currentState);
}
​
// Modify draw function to draw the window
function draw() {
  background(80);
​
  switch (currentState) {
    case State.OFF:
      drawPowerButton();
      break;
    case State.LOADING:
      // Loading video logic
      break;
    case State.DESKTOP:
      loadDesktop();
      if (specialWindow) {
        specialWindow.draw();
      }
      break;
    case State.BLUE_SCREEN:
      push();
      background(0, 0, 255); // Blue background
      fill(255); // White text
      textSize(20);
      text(
        "ERROR: Keyboard not found\n Windows has been shut down\n to prevent damage to your computer.\n\nPress R to restart.",
        30,
        height / 10
      );
      if (!errorSound.isPlaying())
      glitchSound.play();
      console.log("Error sound played")
      pop();
      break;
  }
}
​
// Add the keyPressed function
function keyPressed() {
  // Check if the current state is BLUE_SCREEN and the key pressed is 'R'
  if (currentState === State.BLUE_SCREEN && key === 'r') {
    currentState = State.OFF;
    errorShouldSpawn = false;
    specialWindow = null;
    glitchSound.stop();
  }
}
​
function startLoadingVideo() {
  clickSound.play();
  loadingVideo = createVideo("windowsXP.mp4", videoLoaded);
  loadingVideo.hide();
  loadingVideo.play();
}
​
function videoLoaded() {
  loadingVideo.size(400, 400);
  loadingVideo.position(0, 0);
  loadingVideo.show();
  windowsSound.play();
  loadingVideo.onended(function () {
    currentState = State.DESKTOP;
    loadingVideo.hide();
  });
}
​
function mousePressed() {
  console.log(`Mouse pressed in state: ${currentState}`);
​
  if (
    currentState === State.OFF &&
    dist(mouseX, mouseY, width / 2, height / 2) < 80
  ) {
    console.log("Power button clicked. Transitioning to LOADING state.");
    currentState = State.LOADING;
    startLoadingVideo();
  } else if (currentState === State.DESKTOP) {
    // Iterate through icons to check for clicks
    icons.forEach((icon) => {
      icon.click();
      icon.mousePressed();
    });
    logIconStatus(); // Call the function to log the status of icons
  }
}
​
// Function to log the status of each icon and the last clicked icon
function logIconStatus() {
  console.log("Current Icon Status:");
  icons.forEach((icon) => {
    console.log(`Icon: ${icon.label}, Click Count: ${icon.clickCount}`);
  });
  console.log(`Last Icon Clicked: ${lastIconClicked}`);
}
​
function mouseReleased() {
  icons.forEach((icon) => {
    icon.mouseReleased();
  });
}
​
function mouseDragged() {
  icons.forEach((icon) => {
    icon.mouseDragged();
  });
}
​
function loadDesktop() {
  push();
  imageMode(CENTER);
  image(windowsImage, width / 2, height / 2, 400, 400);
  pop();
  icons.forEach((icon) => {
    icon.draw();
  });
  push();
  let hours = nf(hour(), 2);
  let minutes = nf(minute(), 2);
  let seconds = nf(second(), 2);
  fill(255);
  text(hours + ":" + minutes + ":" + seconds, 350, 396);
  pop();
}
​
function spawnErrorImages() {
  
  if(errorShouldSpawn == true){
    noLoop(); // Stop the drawing loop to prevent jittering
    console.log("SPAWNING ERROR MESSAGE");
  for (let i = 0; i < 40; i++) {
    let x = random(width);
    let y = random(height);
    // errorSound.play();
    image(errorImage, x, y, 200, 130);
  }
  }
}
​
function mouseClicked() {
  if (specialWindow) {
    specialWindow.clicked(mouseX, mouseY);
  } else {
    // Check if mouse clicked on the original error image
    if (
      mouseX >= width / 4 &&
      mouseX <= width / 4 + 200 &&
      mouseY >= height / 3 &&
      mouseY <= height / 3 + 130
    ) {
      spawnErrorImages();
    }
  }
}
​
// Logic functions to use the Window class
function myComputerLogic() {
  console.log("\n[Application] Launching Computer");
  specialWindow = new Window(myComputerWindow, 300, 250);
}
​
function recycleBinLogic() {
  console.log("\n[Application] Launching Bin");
  specialWindow = new Window(recycleBinWindow, 300, 250);
}
​
function errorImageLogic() {
  console.log("\n[Application] Launching Error");
  specialWindow = new Window(errorImage, 200, 130);
  errorSound.play();
}
​
Cookies

Sketch Files

Console

Preview
