let clothesImages = [];

let currentImageIndex = 0;

​

function preload() {

  // Load your images into the array

  clothesImages.push(loadImage("clothes1 Large.png")); 

  clothesImages.push(loadImage("clothes2 Large.png"));

  clothesImages.push(loadImage("clothes3 Large.png"));

  clothesImages.push(loadImage("clothes4 Large.png"));

  clothesImages.push(loadImage("clothes5 Large.png"));

  clothesImages.push(loadImage("clothes6 Large.png"));

  clothesImages.push(loadImage("clothes7 Large.png"));

  clothesImages.push(loadImage("clothes8 Large.png"));

  clothesImages.push(loadImage("clothes9 Large.png"));

}

​

function setup() {

  createCanvas(1920, 1080);

​

  // Create buttons

  nextButton = createButton('→');

  backButton = createButton('←');

​

  // Position buttons on each door of the closet

  nextButton.position(355, 180);  // Right door button

  backButton.position(45, 180);  // Left door button

​

  // Style buttons (optional)

  nextButton.size(50, 20);

  backButton.size(50, 20);

​

  // Add functionality to the buttons

  nextButton.mousePressed(showNextImage);

  backButton.mousePressed(showPreviousImage);

}

​

  function draw() {

   background(255, 253, 208);

​

  // Closet drawing

  strokeWeight(3);

​

  // Closet frame

  rectMode(RADIUS);

  fill(166, 138, 109);

  rect(960, height - 550, 350, 400); // Closet body (centered and resized for 1920x1080)

​

  // Closet doors

  rectMode(CORNER);

  fill(196, 164, 132);

  rect(560, 540, 800, 400);  // Door base resized for 1920x1080

  rect(600, 600, 720, 330);   // Lower door resized for 1920x1080

​

  // Closet handle

  rectMode(CENTER);

  strokeWeight(2);

  fill(170, 127, 36);

  rect(960, 850, 100, 14);  // Handle repositioned and resized for 1920x1080

​

  // Closet top design

  fill(196, 164, 132);

  quad(500, 50, 1420, 50, 1360, 130, 560, 130);  // Upper decorative design resized

​

  rectMode(CORNER);

  strokeWeight(0);

  fill(53, 33, 0);

  rect(560, 100, 800, 10);  // Horizontal bar in the design resized

​

  //feet

  strokeWeight(3);

  quad(600, 950, 620, 1000, 720, 1000, 740, 950);  // Left drawer resized

  quad(1320, 950, 1300, 1000, 1200, 1000, 1180, 950);  // Right drawer resized

​

  // Closet sides 

  strokeWeight(3);

  fill(196, 164, 132);

  quad(1300, 130, 1500, 110, 1300, 930, 1320, 900);  // Right side resized

  quad(510, 130, 320, 110, 320, 930, 510, 900);  // Left side resized

​

​

  // Display the current image in the center of the closet

   if (clothesImages[currentImageIndex]) {

    imageMode(CENTER);

    image(clothesImages[currentImageIndex], 960, 600, 450, 450);  // Adjusted image position and size

  }

​

  print(mouseX, mouseY); // Optional: for debugging mouse positions

}

​

function showNextImage() {

  // Increment the image index to show the next image

  currentImageIndex = (currentImageIndex + 1) % clothesImages.length;

}

​

function showPreviousImage() {

  // Decrement the image index to show the previous image

  currentImageIndex = (currentImageIndex - 1 + clothesImages.length) % clothesImages.length;

}

​