let initialized = false;

let canvas;

let ctx;

let mic;

let bakingPositionY = 0;

let targetPositionY = 0;

let cloudPositions = []; // Declare globally

let dhtsensorValue = 0;

let cloudX = 100; // Initial X position of the cloud

let cloudY = 50; // Initial Y position of the cloud

let cloudSpeed = 2; // Speed of cloud movement

let humidityValue = 0; // Humidity sensor value

const humidityThreshold = 1650; // Threshold for cloud movement

let ldr, humidity, pulse;

​

​

let ararat,

  ararat_icon,

  rug,

  lavash,

  lavash_icon,

  path,

  pomegranate,

  pomegranate_icon,

  rug_icon,

  empty_rug,

  cloud1,

  cloud2,

  cloud3,

  cloud4,

  cloud5,

  cloud6,

  lavash_baking,

  tonir_back,

  tonir_front,

  pomegranate_page,

  text_start,

  back_home,

  ararat_page,

  ararat_desc,

  pomegranate_desc,

  rug_desc,

  lavash_desc;

​

let pulseData = 0;

let currentPage = "homePage";

​

function preload() {

  ararat = loadImage("IMAGES/ararat.png");

  ararat_icon = loadImage("IMAGES/ararat_icon.png");

  rug = loadImage("IMAGES/rug.png");

  lavash = loadImage("IMAGES/lavash.png");

  lavash_icon = loadImage("IMAGES/lavash_icon.png");

  path = loadImage("IMAGES/path.png");

  pomegranate = loadImage("IMAGES/pomegranate.png");

  pomegranate_icon = loadImage("IMAGES/pomegranate_icon.png");

  rug_icon = loadImage("IMAGES/rug_icon.png");

  empty_rug = loadImage("IMAGES/empty_rug.png");

  cloud1 = loadImage("IMAGES/cloud1.png");

  cloud2 = loadImage("IMAGES/cloud2.png");

  cloud3 = loadImage("IMAGES/cloud3.png");

  cloud4 = loadImage("IMAGES/cloud4.png");

  cloud5 = loadImage("IMAGES/cloud5.png");

  cloud6 = loadImage("IMAGES/cloud6.png");

  lavash_baking = loadImage("IMAGES/lavash_baking.png");

  tonir_back = loadImage("IMAGES/tonir_back.png");

  tonir_front = loadImage("IMAGES/tonir_front.png");

  ararat_page = loadImage("IMAGES/ararat_page.png");

  pomegranate_page = loadImage("IMAGES/pomegranate_page.png");

  text_start = loadImage("IMAGES/text_start.png");

  back_home = loadImage("IMAGES/back_home.png");

  lavash_desc = loadImage("IMAGES/lavash_desc.png");

  pomegranate_desc = loadImage("IMAGES/pomegranate_desc.png");

  ararat_desc = loadImage("IMAGES/ararat_desc.png");

  rug_desc = loadImage("IMAGES/back_home.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  cloudPositions = [

    {

      x: width / 2 - 100,

      y: height / 2 + 300,

      targetX: width / 2,

      targetY: height / 2,

    },

    {

      x: width / 2 + 400,

      y: height / 2 + 200,

      targetX: width / 2,

      targetY: height / 2,

    },

    {

      x: width / 2 + 300,

      y: height / 2,

      targetX: width / 2,

      targetY: height / 2,

    },

    {

      x: width / 2 + 400,

      y: height / 2 + 200,

      targetX: width / 2,

      targetY: height / 2,

    },

    {

      x: width / 2 + 400,

      y: height / 2 + 100,

      targetX: width / 2,

      targetY: height / 2,

    },

    {

      x: width / 2 + 400,

      y: height / 2,

      targetX: width / 2,

      targetY: height / 2,

    },

  ];

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(42, 25, 54);

​

  if (!serialActive) {

    imageMode(CENTER);

    text_start.resize(1000, 0);

    image(text_start, width / 2, height / 2);

    return;

  }

​

  if (currentPage === "homePage") {

    homePage();

  } else if (currentPage === "pomegranatePage") {

    pomegranatePage();

  } else if (currentPage === "rugPage") {

    rugPage();

  } else if (currentPage === "lavashPage") {

    lavashPage();

  } else if (currentPage === "araratPage") {

    araratPage();

  }

}

​

async function keyPressed() {

  if (key === " ") {

    if (!serialActive) {

      await setUpSerial();

    }

  }

  if (key === "F" || key === "f") {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​

function homePage() {

  imageMode(CENTER);

  noStroke();

  fill(42, 25, 54, 220);

  background(42, 25, 54, 220);

​

  lavash_click = rect(width / 2 - 450, height / 2 - 250, 300, 200);

  pomegranate_click = rect(width / 2 + 40, height / 2 - 250, 300, 200);

  rug_click = rect(width / 2 + 100, height / 2 + 50, 300, 200);

  ararat_click = rect(width / 2 - 400, height / 2 + 50, 300, 200);

​

  path.resize(1000, 0);

  image(path, width / 2, height / 2);

​

  if (

    mouseX > width / 2 - 450 &&

    mouseX < width / 2 - 150 &&

    mouseY > height / 2 - 250 &&

    mouseY < height / 2 - 50

  ) {

    image(lavash, width / 2, height / 2, lavash.width*0.5, lavash.height*0.5);

  } else {

    image(lavash, width / 2, height / 2, lavash.width*0.48,lavash.height*0.48);

  }

​

  if (

    mouseX > width / 2 + 40 &&

    mouseX < width / 2 + 340 &&

    mouseY > height / 2 - 250 &&

    mouseY < height / 2 - 50

  ) {

    image(pomegranate, width / 2, height / 2, pomegranate.width*0.5,pomegranate.height*0.5);

  } else {

    image(pomegranate, width / 2, height / 2, pomegranate.width*0.48,pomegranate.height*0.48);

  }

​

  if (

    mouseX > width / 2 + 100 &&

    mouseX < width / 2 + 400 &&

    mouseY > height / 2 + 50 &&

    mouseY < height / 2 + 250

  ) {

    image(rug, width / 2, height / 2, rug.width*0.5,rug.height*0.5);

  } else {

    image(rug, width / 2, height / 2, rug.width*0.48,rug.height*0.48);

  }

​

  if (

    mouseX > width / 2 - 400 &&

    mouseX < width / 2 - 100 &&

    mouseY > height / 2 + 50 &&

    mouseY < height / 2 + 250

  ) {

    image(ararat, width / 2, height / 2, ararat.width*0.5,ararat.height*0.5);

  } else {

    image(ararat, width / 2, height / 2, ararat.width*0.48,ararat.height*0.48);

  }

​

  ararat_icon.resize(1000, 0);

  image(ararat_icon, width / 2, height / 2);

​

  lavash_icon.resize(1000, 0);

  image(lavash_icon, width / 2, height / 2);

​

  pomegranate_icon.resize(1000, 0);

  image(pomegranate_icon, width / 2, height / 2);

​

  rug_icon.resize(1000, 0);

  image(rug_icon, width / 2, height / 2);

}

​

function mousePressed() {

  // Only allow mouse presses on the homePage and if Arduino is connected

  if (currentPage === "homePage" && serialActive) {

    // Ensure all areas do not overlap

    if (

      mouseX > width / 2 + 40 &&

      mouseX < width / 2 + 340 &&

      mouseY > height / 2 - 250 &&

      mouseY < height / 2 - 50

    ) {

      currentPage = "pomegranatePage";

      console.log("Navigate to pomegranatePage");

      return;  // Prevent further checks once a page has been changed

    }

​

    if (

      mouseX > width / 2 + 100 &&

      mouseX < width / 2 + 400 &&

      mouseY > height / 2 + 50 &&

      mouseY < height / 2 + 250

    ) {

      currentPage = "rugPage";

      console.log("Navigate to rugPage");

      return;  // Prevent further checks once a page has been changed

    }

​

    if (

      mouseX > width / 2 - 450 &&

      mouseX < width / 2 - 150 &&

      mouseY > height / 2 - 250 &&

      mouseY < height / 2 - 50

    ) {

      currentPage = "lavashPage";

      console.log("Navigate to lavashPage");

      return;  // Prevent further checks once a page has been changed

    }

​

    if (

      mouseX > width / 2 - 400 &&

      mouseX < width / 2 - 100 &&

      mouseY > height / 2 + 50 &&

      mouseY < height / 2 + 250

    ) {

      currentPage = "araratPage";

      console.log("Navigate to araratPage");

      return;  // Prevent further checks once a page has been changed

    }

  }

​

  // Check for the back_home button click in non-home pages

  if (currentPage !== "homePage") {

    let backHomeX = 50; // Left bottom corner

    let backHomeY = height - back_home.height * 0.5 - 50;

    let backHomeWidth = back_home.width * 0.5;

    let backHomeHeight = back_home.height * 0.5;

​

    if (

      mouseX > backHomeX &&

      mouseX < backHomeX + backHomeWidth &&

      mouseY > backHomeY &&

      mouseY < backHomeY + backHomeHeight

    ) {

      currentPage = "homePage";

      console.log("Navigate to homePage");

    }

  }

}

​

let previousColor;

​

function pomegranatePage() {

  imageMode(CENTER);

  noStroke();

  fill(42, 25, 54, 220);

  background(42, 25, 54, 220);

  image(pomegranate_desc,width/2,height/2,pomegranate_desc.width*0.6,pomegranate_desc.height*0.6);

​

  // Smooth color transition

  let circleColor = map(pulse, 0, 1023, 0, 255);

  let targetColor = color(circleColor, 100, 150); // This creates a color value

  if (!previousColor) {

    previousColor = targetColor; // Initialize previousColor if it's not defined

  }

  let lerpedColor = lerpColor(previousColor, targetColor, 0.1); // Smooth the transition

​

  // Update the previousColor for the next frame

  previousColor = lerpedColor;

​

  // Display background and circle

  imageMode(CENTER);

  // Position the 'back_home' button in the left bottom corner

let backHomeX = 50;  // Left margin

let backHomeY = height - back_home.height * 0.5 - 50; // Bottom margin

image(back_home, backHomeX, backHomeY, back_home.width * 0.5, back_home.height * 0.5);

  fill(lerpedColor);

  noStroke();

  ellipse(width / 2 + 400, height / 2 + 100, 400, 400);

​

  // Display the heartbeat value

  let roundedPulse = round(pulse / 10); // Convert the pulse to a decimal and round it

  fill(255);

  strokeWeight(3);

  textSize(40);

  textAlign(CENTER);

  text(roundedPulse, width / 2 + 500, height / 2 + 400);

​

  // Display the pomegranate page image

  pomegranate_page.resize(1200, 0);

  image(pomegranate_page, width / 2 + 100, height / 2 + 47);

}

​

​

​

function lavashPage() {

  imageMode(CENTER);

  noStroke();

  fill(42, 25, 54);

  background(42, 25, 54);

  imageMode(CENTER);

  // Position the 'back_home' button in the left bottom corner

let backHomeX = 50;  // Left margin

let backHomeY = height - back_home.height * 0.5 - 50; // Bottom margin

image(back_home, backHomeX, backHomeY, back_home.width * 0.5, back_home.height * 0.5);

​

  image(lavash_desc,width/2-80,height/2,lavash_desc.width*0.5,lavash_desc.height*0.5);

​

  // tonir_back.resize(0, width-700);

  // tonir_front.resize(0, width-700);

  // lavash_baking.resize(0, width-600);

​

  // Update the target position based on the light sensor value

  if (ldr <= 50) {

    // Check if the light value is less than the threshold

    targetPositionY = height / 2 + 800; // Inside the tonir

  } else {

    targetPositionY = height / 2 + 100; // Original position outside the tonir

  }

​

  // Smoothly interpolate the bakingPositionY toward targetPositionY

  bakingPositionY += (targetPositionY - bakingPositionY) * 0.1;

​

  // Render the elements

  image(tonir_back, width / 2, height / 2 + 100, tonir_back.width*0.6, tonir_back.width*0.6);

  image(lavash_baking, width / 2, bakingPositionY, lavash_baking.width*0.6, lavash_baking.height*0.6);

  image(tonir_front, width / 2, height / 2 + 100, tonir_front.width*0.6, tonir_front.width*0.6);

}

​

function araratPage() {

  imageMode(CENTER);

  noStroke();

  fill(42, 25, 54);

  background(42, 25, 54);

​

  image(ararat_page, width / 2, height / 2,ararat_page.width*0.6, ararat_page.height*0.6);

  imageMode(CENTER);

  // Position the 'back_home' button in the left bottom corner

let backHomeX = 50;  // Left margin

let backHomeY = height - back_home.height * 0.5 - 50; // Bottom margin

image(back_home, backHomeX, backHomeY, back_home.width * 0.5, back_home.height * 0.5);

​

image(ararat_desc,width/2+10,height/2-560,ararat_desc.width*0.6,ararat_desc.height*0.6);

​

  let clouds = [cloud1, cloud2, cloud3, cloud4, cloud5, cloud6];

  for (let i = 0; i < clouds.length; i++) {

    let cloud = clouds[i];

    let pos = cloudPositions[i];

    if (humidity > humidityThreshold) {

      pos.x += (pos.targetX - pos.x) * 0.01;

      pos.y += (pos.targetY - pos.y) * 0.01;

    } else if (pos.x > cloudPositions[i].x && pos.Y > cloudPositions[i].y){

​

        pos.x -= (pos.targetX - pos.x) * 0.01;

        pos.y -= (pos.targetY - pos.y) * 0.01;

      }

     image(cloud, pos.x, pos.y);

    }

}

​

// Arduino Serial Communication

// function readSerial() {

//   let data = serial.readLine().trim(); // Read data from Arduino

//   if (data) {

//     let value = parseInt(data, 10); // Convert the data to an integer

//     if (value > 2000) {

//       // Reset cloud positions

//       for (let pos of cloudPositions) {

//         pos.targetX = width / 2;

//         pos.targetY = height / 2;

//       }

//     }

//   }

// }

​

function rugPage() {

  // Set the background color

  imageMode(CENTER);

  noStroke();

  fill(42, 25, 54);

  background(42, 25, 54, 220);

​

  // Initialize camera and pixelation logic if not already initialized

  if (!initialized) {

    pico_setup();

    initialized = true;

  }

​

  // Render pixelated video (if applicable)

  drawCameraPixelation();

​

  // Draw the large background rectangles (ensure rug_desc is above these)

  fill(42, 25, 54, 255);

  rectMode(CENTER);

  rect(width / 2 - 600, height / 2, 800, 1400);

  rect(width / 2 + 600, height / 2, 800, 1400);

  rect(width / 2, height / 2 - 400, 1500, 450);

  rect(width / 2, height / 2 + 400, 1500, 450);

​

  // Draw the empty rug image (resize it if necessary)

  empty_rug.resize(500, 0); // Ensure the empty rug image is resized

  image(empty_rug, width / 2, height / 2);

​

  // Draw the description image (rug_desc)

  // Adjust size and position to ensure it fits well on screen

  imageMode(CENTER);

  image(rug_desc, width / 2 - 300, height / 2, rug_desc.width * 0.6, rug_desc.height * 0.6);

​

  // Draw the back home button (ensure it's at the correct position)

  let backHomeX = 50;  // Left margin

  let backHomeY = height - back_home.height * 0.5 - 50; // Bottom margin

  image(back_home, backHomeX, backHomeY, back_home.width * 0.5, back_home.height * 0.5);

}

​

function pico_setup() {

  // Set up the canvas and video capture

  canvas = createCanvas(1500, 900);

  pixelDensity(1);

  ctx = canvas.drawingContext;

  capture = createCapture(VIDEO, () => {

    capture.size(1500, 900);

    capture.hide();

  });

  mic = new p5.AudioIn();

  mic.start();

}

​

​

function pico_setup() {

  canvas = createCanvas(1500, 900);

  pixelDensity(1);

  ctx = canvas.drawingContext;

  capture = createCapture(VIDEO, () => {

    capture.size(1500, 900);

    capture.hide();

  });

  mic = new p5.AudioIn();

  mic.start();

}

​

function drawCameraPixelation() {

  if (capture.loadedmetadata) {

    // Flip the canvas horizontally (mirror effect)

    ctx.save(); // Save the current drawing context

    ctx.scale(-1, 1); // Flip the context horizontally

    ctx.translate(-width, 0); // Move the context to the correct position

​

    // Draw the video image on the canvas (it will be mirrored due to scale)

    ctx.drawImage(capture.elt, 0, 0, width, height); // Draw the video on the canvas

​

    // Get the pixel data from the canvas

    let imageData = ctx.getImageData(0, 0, width, height);

    let rgba = imageData.data;

​

    // Pixelation logic

    const blockSize = 10; // Size of the pixelation blocks

    for (let y = 0; y < height; y += blockSize) {

      for (let x = 0; x < width; x += blockSize) {

        let redSum = 0,

          greenSum = 0,

          blueSum = 0,

          count = 0;

​

        // Calculate the average color of the block

        for (let yy = y; yy < y + blockSize && yy < height; yy++) {

          for (let xx = x; xx < x + blockSize && xx < width; xx++) {

            let index = (yy * width + xx) * 4;

            redSum += rgba[index];

            greenSum += rgba[index + 1];

            blueSum += rgba[index + 2];

            count++;

          }

        }

​

        // Average color

        let avgRed = redSum / count;

        let avgGreen = greenSum / count;

        let avgBlue = blueSum / count;

        let intensity = (avgRed + avgGreen + avgBlue) / 3;

​

        // Determine block color based on intensity

        let blockColor;

        if (intensity < 64) {

          // Black shades

          blockColor = `rgb(${intensity * 0.5}, ${intensity * 0.5}, ${

            intensity * 0.5

          })`;

        } else if (intensity < 128) {

          // Beige (#ddd2a3)

          blockColor = `rgb(221, 210, 163)`;

        } else if (intensity < 192) {

          // Red shades

          blockColor = `rgb(${intensity * 1.2}, 0, 0)`;

        } else {

          // Blue shades

          blockColor = `rgb(0, 0, ${intensity * 1.2})`;

        }

​

        // Draw the pixelated block

        ctx.fillStyle = blockColor;

        ctx.fillRect(x, y, blockSize, blockSize);

      }

    }

​

    ctx.restore(); // Restore the drawing context to its original state

  }

}

​

function readSerial(data) {

  if (data != null) {

    // ensuring there is actual data, then storing it in a variable

    let fromArduino = split(data, ",");

​

    if (fromArduino.length == 3) {

      ldr = fromArduino[0];

      humidity = fromArduino[1];

      pulse = fromArduino[2];

    }

    print(ldr + ',' + humidity + ',' + pulse)

  }

}