// let sofa_0;

// let overSofa = false;

// let copy_sofa;

​

// let sofas = []

// let currentSofa = 0;

​

// function preload() {

//   backgroundImage = loadImage("images/room.png");

//   sofa_0 = loadImage("images/sofa_0.png");

//   sofas[0] = loadImage("images/sofa_0.png");

//   sofas[1] = loadImage("images/sofa_1.png");

// }

​

// function setup() {

//   createCanvas(1000, 400);

//   background(220);

//   image(backgroundImage, 0, 0);

//   image(sofa_0, 0, 0);

​

//   // Create a copy of the sofa_0 image for the hover effect

//   copy_sofa = createImage(sofa_0.width, sofa_0.height);

//   copy_sofa.copy(sofa_0, 0, 0, sofa_0.width, sofa_0.height, 0, 0, sofa_0.width, sofa_0.height);

// }

​

// function draw() {

//   // Display the background image

//   image(backgroundImage, 0, 0);

//   image(sofas[currentSofa], 0, 0);

​

//   if (overSofa) {

//     // Apply the hover effect by filling the copy of the image with white

//     copy_sofa.loadPixels();

//     for (let i = 0; i < copy_sofa.pixels.length; i += 4) {

//       copy_sofa.pixels[i] = 255;     // Red

//       copy_sofa.pixels[i + 1] = 255; // Green

//       copy_sofa.pixels[i + 2] = 255; // Blue

//     }

//     copy_sofa.updatePixels();

​

//     // Display the modified image

//     image(copy_sofa, 0, 0);

//   } else {

//     // Display the original image

//     image(sofa_0, 0, 0);

//   }

// }

​

// function mouseMoved() {

//   if (mouseX >= 0 && mouseX <= 200 && mouseY >= 0 && mouseY <= 100) {

//     overSofa = true;

//   } else {

//     overSofa = false;

//   }

// }

​

​

// function mouseClicked() {

//   // Check if the mouse is within the image area

//   if (mouseX >= 0 && mouseX <= 200 && mouseY >= 0 && mouseY <= 100) {

//     // Increment the index to display the next image

//     currentSofa++;

//     if (currentSofa >= sofas.length) {

//       currentSofa = 0; // Loop back to the first image

//     }

//   }

// }

​

​

​

let backgroundImage;

let sofas = []; 

let currentSofa = 0;

​

let leftDecors = [];

let currentLeftDecor = 0;

​

let rightDecors = [];

let currentRightDecor = 0;

​

let lamps = [];

let currentLamp = 0;

​

function preload() {

backgroundImage = loadImage("images/room.png");

​

//loading images of sofa to array of sofas

  sofas[0] = loadImage("images/sofa_0.png");

  sofas[1] = loadImage("images/sofa_1.png");

  sofas[2] = loadImage("images/sofa_2.png");

  sofas[3] = loadImage("images/sofa_3.png");

  sofas[4] = loadImage("images/sofa_4.png");

  sofas[5] = loadImage("images/sofa_5.png");

  leftDecors[0] = loadImage("images/leftDecor_0.png");

  leftDecors[1] = loadImage("images/leftDecor_1.png");

  leftDecors[2] = loadImage("images/leftDecor_2.png");

  leftDecors[3] = loadImage("images/leftDecor_3.png");

  leftDecors[4] = loadImage("images/leftDecor_4.png");

  leftDecors[5] = loadImage("images/leftDecor_5.png");

  rightDecors[0] = loadImage("images/rightDecor_0.png");

  rightDecors[1] = loadImage("images/rightDecor_1.png");

  rightDecors[2] = loadImage("images/rightDecor_2.png");

  rightDecors[3] = loadImage("images/rightDecor_3.png");

  rightDecors[4] = loadImage("images/rightDecor_4.png");

  rightDecors[5] = loadImage("images/rightDecor_5.png");

  lamps[0] = loadImage("images/lamp_0.png");

  lamps[1] = loadImage("images/lamp_1.png");

  lamps[2] = loadImage("images/lamp_2.png");

  lamps[3] = loadImage("images/lamp_3.png");

  lamps[4] = loadImage("images/lamp_4.png");

  lamps[5] = loadImage("images/lamp_5.png");

}

​

​

​

​

​

​

function setup() {

  createCanvas(1000, 400);

  // image(sofas[currentSofa], 0, 0);

  image(backgroundImage, 0, 0);

    image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.5);

    image(leftDecors[currentLeftDecor], width*0.2, height*0.4);

    image(rightDecors[currentRightDecor], width*0.65, height*0.4);

    image(lamps[currentLamp], width/2-lamps[0].width/2, 0);

}

​

function draw() {

  // image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.6);

}

​

function mouseClicked() {

  // checking whether the mouse is within the sofa size

  if (mouseX >= width/2-sofas[0].width/2 && 

      mouseX <= width/2-sofas[0].width/2+ sofas[0].width && 

      mouseY >= height*0.5 && 

      mouseY <= height*0.5+ sofas[0].height) {

    // displaying the next image of sofa in array

    currentSofa++;

    //looping back to the first image in the array after displaying the last image

    if (currentSofa >= sofas.length) {

      currentSofa = 0;

    }

     // displaying a background and new image of sofa, so the previous images of sofa wouldn't be displayed

    // image(backgroundImage, 0, 0);

    // image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.6);

    // image(leftDecors[currentLeftDecor], width*0.2, height*0.4);

  }

   if (mouseX >= width*0.2 && 

      mouseX <= width*0.2+ leftDecors[0].width && 

      mouseY >= height*0.4 && 

      mouseY <= height*0.4+ leftDecors[0].height) {

    // displaying the next image of sofa in array

    currentLeftDecor++;

    //looping back to the first image in the array after displaying the last image

    if (currentLeftDecor >= leftDecors.length) {

      currentLeftDecor = 0;

    }

     // displaying a background and new image of sofa, so the previous images of sofa wouldn't be displayed

    // image(backgroundImage, 0, 0);

    // image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.6);

    // image(leftDecors[currentLeftDecor], width*0.2, height*0.4);

  }

   if (mouseX >= width*0.65 && 

      mouseX <= width*0.65+ rightDecors[0].width && 

      mouseY >= height*0.4 && 

      mouseY <= height*0.4+ rightDecors[0].height) {

    // displaying the next image of sofa in array

    currentRightDecor++;

    //looping back to the first image in the array after displaying the last image

    if (currentRightDecor >= rightDecors.length) {

      currentRightDecor = 0;

    }

  }

  if (mouseX >= width/2-lamps[0].width/2 && 

      mouseX <= width/2-lamps[0].width/2+ lamps[0].width && 

      mouseY >= 0 && 

      mouseY <= height*0.5+ lamps[0].height) {

    // displaying the next image of sofa in array

    currentLamp++;

    //looping back to the first image in the array after displaying the last image

    if (currentLamp >= lamps.length) {

      currentLamp = 0;

    }

  }

    image(backgroundImage, 0, 0);

    image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.5);

    image(leftDecors[currentLeftDecor], width*0.2, height*0.4);

    image(rightDecors[currentRightDecor], width*0.65, height*0.4);

    image(lamps[currentLamp], width/2-lamps[0].width/2, 0);

}

​

​