let resizedImg;

let ww = 400;

let hh = 400;

let cnvW = 800;

let cnvH = 800;

​

function preload() {

  source = loadImage('./grid.jpg')

}

​

function setup() {

  let cnv = createCanvas(cnvW, cnvH);

  cnv.position((windowWidth-cnvW)/2, (windowHeight-cnvH)/2);

  let minSide = min(source.width, source.height);

  let maxSide = max(source.width, source.height);

  let scaleFactor = ww*(maxSide/minSide);

  console.log(source.width, source.height)

  source.resize(scaleFactor,0);

  resizedImg = createImage(ww, hh);

  let hw = hh/2;

  let x1 = floor(source.width/2) - hw;

  let x2 = x1 + ww;

  let y1 = floor(source.height/2) - hw;

  let y2 = y1 + hh;

  resizedImg.copy(source, x1, y1, x2, y2, 0, 0, x2, y2);

}

​

function draw() {

  background(220);

  source.resize(ww,0);

  image(source,0, 400, source.width, source.height);

  image(resizedImg, 0, 0, resizedImg.width, resizedImg.height);

  strokeWeight(2);

  stroke(255,255,0);

  noFill();

  rect(0,0, ww, hh);

  rect(0,400, ww, hh);

}