let currentImageIndex = 0;

let gridSize = 5;

let squareSizeWidth;

let squareSizeHeight;

​

function preload() {

  // Load your images here

  for (let i = 1; i <= 9; i++) {

    images.push(loadImage(`i${i}.jpg`));

  }

}

​

function setup() {

  let maxCanvasSize = 800;

  let imgWidth = images[currentImageIndex].width;

  let imgHeight = images[currentImageIndex].height;

​

  if (imgWidth > imgHeight) {

    squareSizeWidth = maxCanvasSize / gridSize;

    squareSizeHeight = imgHeight * (squareSizeWidth / imgWidth);

  } else {

    squareSizeHeight = maxCanvasSize / gridSize;

    squareSizeWidth = imgWidth * (squareSizeHeight / imgHeight);

  }

​

  createCanvas(squareSizeWidth * gridSize, squareSizeHeight * gridSize);

​

  // Resize the current image to match the canvas size

  images[currentImageIndex].resize(width, height);

}

​

function draw() {

  clear(); // Clear the canvas to set a black background

​

  for (let x = 0; x < gridSize; x++) {

    for (let y = 0; y < gridSize; y++) {

      let xPos = x * squareSizeWidth;

      let yPos = y * squareSizeHeight;

      let size = map(dist(mouseX, mouseY, xPos, yPos), 0, width, squareSizeWidth, 0);

​

      let imgX = xPos + (squareSizeWidth - size) / 1.2;

      let imgY = yPos + (squareSizeHeight - size) / 1.2;

      image(

        images[currentImageIndex],

        imgX,

        imgY,

        size,

        size,

        xPos,

        yPos,

        squareSizeWidth,

        squareSizeHeight

      );

    }

  }

​

  // Display image size and canvas size at the bottom

  let imageSizeText = `Image Size: ${images[currentImageIndex].width} x ${images[currentImageIndex].height}`;

  let canvasSizeText = `Canvas Size: ${width} x ${height}`;

  noStroke();

  textSize(16);

  textAlign(CENTER);

  fill(0); // Set text color to black

  text(imageSizeText, width / 2, height - 30);

  text(canvasSizeText, width / 2, height - 10);

  // Draw a red boundary around the canvas

  noFill(); // Disable fill

  stroke(255, 0, 0); // Set stroke color to red

  strokeWeight(5); // Set stroke weight to 5 pixels

  rect(0, 0, width, height); // Draw the boundary rectangle

}

​

function mousePressed() {

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

  setup();

}

​

function mouseMoved() {

  redraw();

}

​

​