let x = 0; // pan X

let y = 0; // pan Y

let img;

let mx, my; // mouse coords;

​

​

var dragging = false; // Is the object being dragged?

var rollover = false; // Is the mouse over the ellipse?

​

// var x, y, w, h;          // Location and size

var offsetX, offsetY;    // Mouseclick offset

function preload(){

    img=loadImage('a5 love chronicles-all.png');

}

function setup() {

  createCanvas(innerWidth, innerHeight);

}

​

function draw() {

  mx = mouseX;

  my = mouseY;

​

  background(255);

  translate(x, y);

​

//   translate(mx, my);

  scale(sf);

//   translate(-mx, -my);

//   translate();

​

image(img,0,0);

  if (mouseIsPressed) {

    x -= pmouseX - mouseX;

    y -= pmouseY - mouseY;

  }

​

  if (dragging) {

    x = mouseX + offsetX;

    y = mouseY + offsetY;

  }

}

​

function mousePressed() {

    // Did I click on the rectangle?

      dragging = true;

      // If so, keep track of relative location of click to corner of rectangle

      offsetX = x-mouseX;

      offsetY = y-mouseY;

  }

  function mouseReleased() {

    // Quit dragging

    dragging = false;

  }

​

window.addEventListener("wheel", function(e) {

  if (e.deltaY > 0)

    sf *= 1.05;

  else

    sf *= 0.95;

});