let asp;

let pxd;

let halfImag;

​

function preload() {

  // Load image. (should be URL if running with local socket (127.0.0.1:8431))

  img = loadImage("https://images.unsplash.com/photo-1502899845910-573a1d1c390d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");

}

​

function setup() {

  // Set canvas size based on input image's aspect ratio

  asp = img.width / img.height;

  let w = 320;

  let h = w / asp;

  img.resize(w, 0);

  createCanvas(w, h);

  // Set pixel density

  pixelDensity(1);

  pxd = pixelDensity();

}

​

function fget(x, y, wrap = false) {

  if (x >= width) {

    if (wrap == false) {

      return [0, 0, 0, 0]

    }

  }

  x = parseInt(x);

  y = parseInt(y);

  let off = ((y * width) + (x)) * pxd * 4;

  return [

    pixels[off],

    pixels[off + 1],

    pixels[off + 2],

    pixels[off + 3]

  ];

}

​

function fset(x, y, col) {

  let off = ((y * width) + (x)) * pxd * 4;

  pixels[off] = col[0];

  pixels[off + 1] = col[1];

  pixels[off + 2] = col[2];

  pixels[off + 3] = col[3];

}

​

function draw() {

  // Show clean image

  image(img, 0, 0);

  // Get pink color

  loadPixels();

  let nSz = 1 / 20;

  let col;

  let x;

  let y;

  let nv;

  for (x = 0; x < width;) {

    for (y = 0; y < height; y++) {

      nv = noise(x * nSz, y * nSz);

      col = fget(x + nv*mouseX, y+nv*mouseY);

      fset(x, y, col);

    }

    x++;

  }

  updatePixels();

  // SHOW FRAME RATE

  fill(255, 0, 0);

  stroke(255, 0, 0);

  text(frameRate().toFixed(2), 0, height);

}