let breathingFrames = [], 

    fringeFrames = [], 

    leftHairFrames = [], 

    rightHairFrames = []; 

​

// Animation control variables for breathing

let currentFrame = 0, 

    nextFrame = 1, 

    blendAmount = 0, 

    fadeSpeed = 0.02; 

​

// Animation control variables for fringes

let currentFringe = 0, 

    nextFringe = 1, 

    fringeBlend = 0, 

    fringeSpeed = 0.05; 

​

// Animation control variables for hair (left and right)

let currentLeft = 0, 

    nextLeft = 1, 

    leftBlend = 0, 

    currentRight = 0, 

    nextRight = 1, 

    rightBlend = 0; 

​

// Hair animation speed and position variables

let hairSpeed = 0.02, 

    xPos = 250, 

    yPos = 180, 

    staticHair, 

    scaleFactor = 3; 

​

// Door animation variables

let door, 

    doorX = 0, 

    doorMoving = false, 

    doorOpening = false, 

    doorSpeed = 10; 

​

// Door click tracking variables

let doorStripWidth = 20, 

    clickCount = 0, 

    lastClickTime = 0; 

​

// Chair image variable

let chair; 

​

// Lamp state variables

let lampOn = false, 

    lampActivated = false, // Track if the lamp is activated by mouse hover

    lampXPos = 650; // X position of the lamp (adjustable)

​

let arm2Angle, 

    arm2Speed = 0.01; // Lamp arm angle and speed variables

​

let glowAlpha = 0; // Lamp glow transparency control

let nameImage;

let knockSound;

let mac;

let cam;

let showCamera = false;

let capturedFrame;

let bgMusic;

let things;

let plant;

let cat;

let spotify;

​

​

function preload() {

  // Load breathing frames

  for (let i = 0; i < 3; i++) breathingFrames.push(loadImage(`b${i + 1}.png`));

  // Load fringe frames

  for (let i = 0; i < 4; i++) fringeFrames.push(loadImage(`hf${i + 1}.png`));

  // Load left hair frames

  for (let i = 0; i < 5; i++) leftHairFrames.push(loadImage(`hl${i + 1}.png`));

  // Load right hair frames

  for (let i = 0; i < 7; i++) rightHairFrames.push(loadImage(`hr${i + 1}.png`));

​

  // Load other images and fonts

  staticHair = loadImage('hb.png');

  chair = loadImage('chair.png');

  door = loadImage('door.png');

  lavishlyYoursFont = loadFont('LavishlyYours-Regular.ttf');

  nameImage = loadImage('name.png');

  knockSound = loadSound("knock.mp3");

  mac = loadImage('mac.png');

things = loadImage('things.png');  

  bgMusic = loadSound("background.mp3");

  plant = loadImage('plant.png');

  cat= loadImage('cat.png');

  spotify=loadImage('spotify.png');

}

​

​

​

​

function setup() {

  // Create a canvas with dimensions 1000x600 pixels

  createCanvas(1000, 600);

  // Set the initial angle of the second arm (arm2) to -PI / 6 (about -30 degrees)

  arm2Angle = -PI / 6;  

 cam = createCapture(VIDEO);

  cam.size(200, 150);

  cam.hide(); // Hide the default video feed

 bgMusic.setVolume(0.1); 

  bgMusic.loop(); 

}

​

​

​

​

​

​

​

function draw() {

  // Set the background color to a light gray (220)

  background(220);

​

  // Breathing Animation

  // Display the current breathing frame

  image(breathingFrames[currentFrame], 0, 0, width, height);

  // Apply a tint effect to transition between frames with varying transparency

  tint(255, 255 * blendAmount);

  // Display the next breathing frame

  image(breathingFrames[nextFrame], 0, 0, width, height);

  // Update the blend amount for smooth animation

  blendAmount += fadeSpeed;

  // Once the blendAmount reaches 1, reset and switch to the next frame

  if (blendAmount >= 1) {

    blendAmount = 0;

    currentFrame = nextFrame;

    nextFrame = (nextFrame + 1) % breathingFrames.length;

  }

  // Remove any tint effect applied previously

  noTint();

​

  // Draw a grid (likely for background or reference purposes)

  drawGrid(600, 150, 5, 10, 30);

  push();

translate(-600, -70); // Move left without affecting others

image(nameImage, width / 2, 50, nameImage.width / 4, nameImage.height / 4);

pop();

​

  drawLamp();

  image(plant, 400, 200, 600, 400);  

  image ( cat, 360,120,100,100);

  image ( spotify, 360,220,100,100);

   let macX = width / 2 - 350; // Adjust X position

  let macY = height / 2 - -68; // Adjust Y position

  let macWidth = 200; // Adjust size as needed

  let macHeight = 150;

  image(mac, macX, macY, macWidth, macHeight);

  let now = new Date();

  let utcHours = now.getUTCHours(); // Get UTC time

  let uaeHours = (utcHours + 4) % 24; // Convert to UAE time

  let minutes = now.getMinutes();

  let seconds = now.getSeconds();

​

  // Format to HH:MM:SS

  let timeString = nf(uaeHours, 2) + ":" + nf(minutes, 2) + ":" + nf(seconds, 2);

​

  // Display time inside monitor

  fill(255, 255, 255); // Red text for LED effect

  textSize(24);

  textStyle(BOLD);

  textFont('Garamond');

  textAlign(CENTER, CENTER);

  text(timeString, macX + macWidth / 2, macY + macHeight / 2-15);  

  // Manual parameters for the wall racks (white bars)

  let rackWidth = 400;  // Width of each bar

  let rackHeight = 10;  // Height of each bar

  let rackYPos1 = 200;  // Y position of the first bar (above monitor)

  let rackYPos2 = 300;  // Y position of the second bar (below monitor)

​

  // Draw the first white bar (rack) moved to the left

  fill(255);  // Set color to white

  rect(160, rackYPos1, rackWidth, rackHeight); // Manually set X position to 100

​

  // Draw the second white bar (rack) moved to the left

  rect(160, rackYPos2, rackWidth, rackHeight); // Manually set X position to 100

if (showCamera) {

  // Camera view

  background("#87CEEB"); // Light blue background

  fill("#F7F0DE");

  ellipse(width / 2, height / 2, 300, 500);

  image(cam, width / 2 - 90, height / 2 - 120, 180, 240); // Show live feed

  // Exit button

  fill("red");

  rect(width - 40, 10, 30, 30, 5);

  fill(255);

  textAlign(CENTER, CENTER);

  textSize(20);

  text("X", width - 25, 25);

} else {

  // Mirror view

  fill("#BCCFEB");

  push();

translate(105, 350); // Move the origin for the mirror

// Draw the mirror shape (outline)

noStroke();

fill("#BCCFEB");

ellipse(100, -90, 65, 85); // Mirror outline

​

fill("#F7F0DE");

if (capturedFrame) {

  // Create an oval mask for the captured frame

  let maskImage = createImage(55, 75);

  maskImage.loadPixels();

  for (let i = 0; i < maskImage.width; i++) {

    for (let j = 0; j < maskImage.height; j++) {

      let d = dist(i, j, maskImage.width / 2, maskImage.height / 2);

      if (d < maskImage.width / 2) {

        maskImage.set(i, j, color(255));

      } else {

        maskImage.set(i, j, color(0));

      }

    }

  }

  maskImage.updatePixels();

  capturedFrame.mask(maskImage);

  // Calculate position so the captured frame is centered in the mirror

  let capturedW = 55, capturedH = 75;

  let mirrorCenterX = 100;  // mirror center x (relative to translate)

  let mirrorCenterY = -90;  // mirror center y (relative to translate)

  let drawX = mirrorCenterX - capturedW / 2;

  let drawY = mirrorCenterY - capturedH / 2;

  image(capturedFrame, drawX, drawY, capturedW, capturedH);

} else {

  // If no captured frame exists, draw a placeholder ellipse

  ellipse(100, -90, 55, 75);

}

pop();

}

  image(things,250,180,600,400);

  // Set dimensions for the hair frames

  let hairWidth = 400 * scaleFactor, hairHeight = 200 * scaleFactor;

  let xOffset = (hairWidth - 400) / 2, yOffset = (hairHeight - 200) / 2;

​

  // Draw the fringe animation frame

  image(fringeFrames[currentFringe], xPos - xOffset, yPos - yOffset, hairWidth, hairHeight);

  fringeBlend += fringeSpeed;

  if (fringeBlend >= 1) {

    fringeBlend = 0;

    currentFringe = nextFringe;

    nextFringe = (nextFringe + 1) % fringeFrames.length;

  }

​

  // Draw the left side of the hair animation

  image(leftHairFrames[currentLeft], xPos - xOffset, yPos - yOffset, hairWidth, hairHeight);

  leftBlend += hairSpeed;

  if (leftBlend >= 1) {

    leftBlend = 0;

    currentLeft = nextLeft;

    nextLeft = (nextLeft + 1) % leftHairFrames.length;

  }

​

  // Draw the right side of the hair animation

  image(rightHairFrames[currentRight], xPos - xOffset, yPos - yOffset, hairWidth, hairHeight);

  rightBlend += hairSpeed;

  if (rightBlend >= 1) {

    rightBlend = 0;

    currentRight = nextRight;

    nextRight = (nextRight + 1) % rightHairFrames.length;

  }

​

  // Draw the static hair frame on top of the animated hair

  image(staticHair, xPos - xOffset, yPos - yOffset, hairWidth, hairHeight);

​

  // Draw the chair image positioned slightly offset from the hair

  image(chair, xPos - xOffset + 55, yPos - yOffset + 20, hairWidth, hairHeight);

  // Door Animation

  // If the door image exists, draw it at the current doorX position

  if (door) image(door, doorX, 0, width, height);

  // Handle the door movement

  if (doorMoving) {

    // Adjust the door's X position based on whether it is opening or closing

    doorX += doorOpening ? -doorSpeed : doorSpeed;

    // Stop the door movement once it reaches the fully opened or closed position

    if (doorOpening && doorX <= -width + doorStripWidth) doorMoving = false;

    if (!doorOpening && doorX >= 0) doorMoving = false;

  }

  }

​

​

function mousePressed() {

  let currentTime = millis();

​

  // Double-click logic for door movement

  if (currentTime - lastClickTime < 300) {

    clickCount++;

  } else {

    clickCount = 1;

  }

  lastClickTime = currentTime;

​

  if (!doorMoving && clickCount >= 2) {

    doorOpening = !doorOpening;

    doorMoving = true;

    clickCount = 0;

  }

​

  // Mirror detection using the actual drawn mirror position:

  let mirrorCenterX = 205;

  let mirrorCenterY = 260;

  let halfWidth = 32.5;

  let halfHeight = 42.5;

​

  // Check if mouse click is within the mirror's bounding box

  if (!showCamera &&

      mouseX > mirrorCenterX - halfWidth && mouseX < mirrorCenterX + halfWidth &&

      mouseY > mirrorCenterY - halfHeight && mouseY < mirrorCenterY + halfHeight) {

    showCamera = true; // Show camera when clicking on mirror

  } 

​

  // Check if exit button is clicked in camera mode (at top right)

  else if (showCamera &&

           mouseX > width - 40 && mouseX < width - 10 &&

           mouseY > 10 && mouseY < 40) {

    capturedFrame = cam.get();  // Save captured frame

    showCamera = false;         // Hide camera and return to main screen

  }

​

  // Check if the cat image is clicked

  if (mouseX > 360 && mouseX < 460 && mouseY > 120 && mouseY < 220) {

    // Open the desired link

    window.open('https://editor.p5js.org/Nekonxtdoor/full/mxZYneC-B', '_blank');

  }

​

  // Check if the Spotify image is clicked

  if (mouseX > 360 && mouseX < 460 && mouseY > 220 && mouseY < 320) {

    // Redirect to the Spotify URL

    window.open('https://open.spotify.com/user/mrkmr55m4xyv3s5wheuuzne1c?si=gG4hrO2jR7i-Qf7nqto7FA', '_blank');

    if (!bgMusic.isPlaying()) {

      bgMusic.loop();

    }

  }

}

​

​

function drawGrid(x, y, cols, rows, cellSize) {

  stroke(255, 255, 255, 200); 

  strokeWeight(3);

  for (let i = 0; i <= cols; i++) line(x + i * cellSize, y, x + i * cellSize, y + rows * cellSize);

  for (let j = 0; j <= rows; j++) line(x, y + j * cellSize, x + cols * cellSize, y + j * cellSize);

}

function drawLamp() {

  let baseX = 730, baseY = 500;  // Change the X and Y coordinates for placement

  let arm1Length = 100, arm2Length = 60;

  fill(255);

  noStroke();

  rect(baseX - 20, baseY, 40, 20);

  stroke(255);

  strokeWeight(10);

  line(baseX, baseY, baseX, baseY - arm1Length);

  let arm2X = baseX;

  let arm2Y = baseY - arm1Length;

  let lampX = arm2X + cos(arm2Angle) * arm2Length;

  let lampY = arm2Y - sin(arm2Angle) * arm2Length;

  line(arm2X, arm2Y, lampX, lampY);

  fill(255);

  ellipse(lampX, lampY, 30, 30);

  // Lamp light turns on when mouse is over it

  let d = dist(mouseX, mouseY, lampX, lampY);

  if (d < 30) {

    glowAlpha = min(glowAlpha + 5, 150);  // Smoothly increase glow intensity

  } else {

    glowAlpha = max(glowAlpha - 5, 0);  // Smoothly decrease glow intensity when mouse moves away

  }

  // Draw the glow with a constant transparency and adjustable intensity

  noStroke();

  fill(255, 255, 200, 100);  // Constant transparency for the glow (100)

  ellipse(lampX, lampY + 80, 300, 180);  // Glow size

​

  // Glow intensity changes with `glowAlpha`

  fill(255, 255, 200, glowAlpha);  // Variable intensity based on `glowAlpha`

  ellipse(lampX, lampY + 80, 300, 180);  // Glow with intensity

​

  // Slower arm movement, only if lamp is activated

  if (lampActivated) {

    arm2Angle += arm2Speed * 0.5;  // Slower arm movement (reduce speed)

    if (arm2Angle > -PI / 6 + 0.2 || arm2Angle < -PI / 6 - 0.2) arm2Speed *= -1;

  }

}

​

​

function mouseMoved() {

  // Check if mouse is over the lamp and activate it when hovered

  let baseX = lampXPos, baseY = 500;

  let arm1Length = 100, arm2Length = 120;

  let arm2X = baseX;

  let arm2Y = baseY - arm1Length;

  let lampX = arm2X + cos(arm2Angle) * arm2Length;

  let lampY = arm2Y - sin(arm2Angle) * arm2Length;

​

  let d = dist(mouseX, mouseY, lampX, lampY);

  if (d < 30 && !lampActivated) {

    // Activate the lamp when mouse hovers over it for the first time

    lampActivated = true;

  }

​

}

​

​

function showCameraScreen() {

  fill("#87CEEB");

  rect(0, 0, width, height);

​

  // Draw circular mask for camera feed

  push();

  let camMask = createGraphics(150, 150);

  camMask.ellipse(75, 75, 150, 150);

  cam.loadPixels();

  camMask.image(cam, 0, 0, 150, 150);

  camMask.mask(camMask);

  imageMode(CENTER);

  image(camMask, width / 2, height / 2, 150, 150);

  pop();

​

  // Draw exit button

  fill("red");

  noStroke();

  rect(width - 30, 10, 20, 20);

  fill("white");

  textAlign(CENTER, CENTER);

  text("X", width - 20, 20);

}

​