let grid;

let img;

​

function preload() 

{

  img = loadImage('nyu.jpg');

}

​

function setup() 

{

  createCanvas(windowWidth, windowHeight);

  createGrid();

}

​

function draw()

{

  showGrid();

}

​

function mousePressed()

{

}

​

function createGrid()

{

  grid = [];

  let pieceSize = width / pieceCount;

  for (let row = 0; row < pieceCount; row++)

  {

    grid[row] = [];

    for (let col = 0; col < pieceCount; col++) 

    {

      let x = col * pieceSize + pieceSize / 2;

      let y = row * pieceSize + pieceSize / 2;

      let imgX = col * (img.width / pieceCount);

      let imgY = row * (img.height / pieceCount);

      let imgW = img.width / pieceCount;

      let imgH = img.height / pieceCount;

​

      let edges = [

        row === 0 ? 0 : -grid[row - 1][col].edges[2], // Top

        col === pieceCount - 1 ? 0 : random([-1, 1]),  // Right

        row === pieceCount - 1 ? 0 : random([-1, 1]),  // Bottom

        col === 0 ? 0 : -grid[row][col - 1].edges[1],  // Left

      ];

​

      grid[row][col] = new Piece(x, y, pieceSize, img.get(imgX, imgY, imgW, imgH), edges);

    }

  }

}

​

function showGrid() 

{

  background(200);

  for (let row = 0; row < pieceCount; row++) 

  {

    for (let col = 0; col < pieceCount; col++) 

    {

      grid[row][col].show();

    }

  }

}

class Piece {

  constructor(x, y, scl, img, edges) {

    this.x = x;

    this.y = y;

    this.scl = scl;

    this.img = img;

    this.edges = edges; // 0 = flat, 1 = tab, -1 = blank

    this.originalScl = scl; // Store original scale for later

    this.zoomedIn = false; // Track if the piece is zoomed in

  }

​

  drawBorder(theta, edgeType) {

    let startPoint = createVector(-0.5 * this.scl, -0.5 * this.scl);

    let endPoint = createVector(0.5 * this.scl, -0.5 * this.scl);

    let offsetX = this.scl * 0.35;

    let offsetY = edgeType * this.scl * 0.2; // Positive for tab, negative for blank

    fill(255,255, 255, 0);

    push();

    translate(this.x, this.y);

    rotate(theta);

    beginShape();

    curveVertex(startPoint.x, startPoint.y);

    curveVertex(startPoint.x, startPoint.y);

    curveVertex(startPoint.x + offsetX, startPoint.y);

    curveVertex(startPoint.x + offsetX, startPoint.y + offsetY);

    curveVertex(endPoint.x - offsetX, endPoint.y + offsetY);

    curveVertex(endPoint.x - offsetX, endPoint.y);

    curveVertex(endPoint.x, endPoint.y);

    curveVertex(endPoint.x, endPoint.y);

    endShape();

    pop();

  }

​

  show() {

    push();

    translate(this.x, this.y);

    imageMode(CENTER);

    // Display part of the image, based on its position in the grid

    let imgX = 0;  // Define the x position for the part of the image to display

    let imgY = 0;  // Define the y position for the part of the image to display

    let imgW = this.scl; // Width of the piece (adjust if needed)

    let imgH = this.scl; // Height of the piece (adjust if needed)

    image(this.img, 0, 0, imgW, imgH, imgX, imgY, imgW, imgH);

    pop();

​

    stroke(0);

    strokeWeight(2);

    // Draw each border with the corresponding rotation

    for (let i = 0; i < 4; i++) {

      if (this.edges[i] !== 0) {

        this.drawBorder(i * HALF_PI, this.edges[i]);

      }

    }

    this.MouseOver();

  }

  MouseOver() {

    // Check if mouse is inside the piece

    let d = dist(mouseX, mouseY, this.x, this.y);

    if (d < this.scl / 2) {

      if (!this.zoomedIn) {

        this.zoomPieceAndNeighbors(true);

      }

    } else {

      if (this.zoomedIn) {

        this.zoomPieceAndNeighbors(false);

      }

    }

  }

​

  zoomPieceAndNeighbors(zoomIn) {

    let newScl = zoomIn ? this.originalScl * 1.09 : this.originalScl;

    this.scl = newScl;

    this.zoomedIn = zoomIn;

​

    // Adjust neighbors

    if (this.row > 0) grid[this.row - 1][this.col].scl = newScl; // Top neighbor

    if (this.row < pieceCount - 1) grid[this.row + 1][this.col].scl = newScl; // Bottom neighbor

    if (this.col > 0) grid[this.row][this.col - 1].scl = newScl; // Left neighbor

    if (this.col < pieceCount - 1) grid[this.row][this.col + 1].scl = newScl; // Right neighbor

  }

}

​

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}