​

let magDisplaySize = 200;

let magRetrieveSize = 50;

​

function preload() {

  dogImage = loadImage("dog.jpg");

}

​

function setup() {

  createCanvas(640, 480);

}

​

function draw() {

  image(dogImage, 0, 0, width, height);

  magnify(dogImage, mouseX, mouseY);

}

​

​

function magnify(img, x, y) {

  const mapX = map(x, 0, width, 0, img.width);

  const mapY = map(y, 0, height, 0, img.height);

  const retrieveX = constrain(mapX, magRetrieveSize/2, img.width - magRetrieveSize/2) - magRetrieveSize/2;

  const retrieveY = constrain(mapY, magRetrieveSize/2, img.height - magRetrieveSize/2) - magRetrieveSize/2;

  const imageSection = img.get(retrieveX, retrieveY, magRetrieveSize, magRetrieveSize);

  const displayX = constrain(x, magDisplaySize/2, width - magDisplaySize/2) - magDisplaySize/2;

  const displayY = constrain(y, magDisplaySize/2, height - magDisplaySize/2) - magDisplaySize/2;

  image(imageSection, displayX, displayY, magDisplaySize, magDisplaySize);

  noFill();

  strokeWeight(3);

  stroke(255);

  rect(displayX, displayY, magDisplaySize, magDisplaySize);

}

​

function mouseWheel(event) {

  magRetrieveSize += event.delta;

  magRetrieveSize = constrain(magRetrieveSize, 50, magDisplaySize);

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

function keyReleased() {

  fullscreen(!fullscreen());

}