let img; // image

let pxls = []; // saved pixel array

let nSz = 1 / 20;

let nImg = []; // noise image

let bbox;

let box;

let asp;

let pxd;

let x;

let y;

let halfImag;

let myFont;

let bgColor = [190,190,190,255]//[25,25,25,255];

let res;

​

function preload() {

  // Load image

  // NOTE: You may have to replace this with another URL in case nothing shows up

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

  // OR

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

  // img = loadImage("data/stag_cutout_v001.png");

}

​

function setup() {

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

  asp = img.width / img.height;

  let w = 720;

  let h = 460//w / asp;

  createCanvas(w, h);

  console.log(w, h);

  img.resize(150, 0);

  // Set pixel density

  pixelDensity(1);

  pxd = pixelDensity();

  // Load box

  bbox = [100, 100, img.width, img.height];

  box = new CtrlBox(bbox[0], bbox[1], bbox[2], bbox[3])

  // Load noise img

  for (let x=bbox[0]; x<bbox[0]+bbox[2]; x++){

    for (let y=bbox[1]; y<bbox[1]+bbox[3]; y++) {

      nImg[(y*width)+(x*4)] = noise(x * nSz, y * nSz)

    }

  }

  // Cache pixel array

  image(img, bbox[0], bbox[1]);

  loadPixels();

  let bounds = box.getBounds()

  for (x = bounds[0]; x < bounds[2]; x++) {

    for (y = bounds[1]; y < bounds[3]; y++) {

      let col = fget(x, y, src=pixels)

      fset(x, y, col, src=pxls)

    }

  }

}

​

function fget(x, y, src=pixels) {

  x = parseInt(x);

  y = parseInt(y);

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

  return [

    src[off],

    src[off + 1],

    src[off + 2],

    src[off + 3]

  ];

}

​

function fset(x, y, col, src=pixels) {

  x = parseInt(x);

  y = parseInt(y);

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

  src[off] = col[0];

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

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

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

}

​

/** Calculates (normalized) mouse position relative to (and from center of) box. */

function CtrlBox(x, y, w, h){

  let bbox = [x, y, x+w, y+h];

  let whBbox = [x, y, w, h];

  let mx = bbox[0]; // MouseX relative to box x

  let my = bbox[1]; // MouseY relative to box y

  let xpos = bbox[0];

  let ypos = bbox[1];

  let relative = true; // relative to box?

  let invX = false; // x 0 is at the right and increasing toward left

  let invY = true; // y 0 is at the bottom and increasing toward top

  let nrml = false; // remap to 0-1

  let cntr = false; // Set to center of box

  return {

      show: function(box=true, point=true, txt=true) {

          if (box) {

              noFill()

              stroke(50)

              rect(bbox[0], bbox[1], bbox[2]-bbox[0], bbox[3]-bbox[1])

          }

          if (point) {

              noStroke()

              fill(50)

              ellipse(mx, my, 10, 10)

          }

          if (txt){

              textSize(10);

              text(`x: ${xpos.toFixed(2)} y: ${ypos.toFixed(2)}`, bbox[0], bbox[3]+10)

          }

      },

      getBounds: function(){

          return bbox

      },

      getRect: function(){

          return whBbox

      },

      getMousePos: function(){

          // Returns (constrained) mouseXY

          return [mx, my]

      },

      getValue: function(normalize=false, center=false, invertX=true, invertY=true){

          // Returns relative value according to specifications

          nrml = normalize;

          cntr = center;

          invX = invertX;

          invY = invertY;

          this._calcValue()

          return [xpos, ypos]

      },

      _calcValue: function() {

          // Get absolute position to place stuff in canvas

          //------------------------------

          mx = Math.max(bbox[0], Math.min(bbox[2], mouseX))

          my = Math.max(bbox[1], Math.min(bbox[3], mouseY))

          // Get special value

          //------------------------------

          xpos = mx;

          ypos = my;

          // Remap absolute position to whBbox

          if (relative == true) {

              xpos = xpos-bbox[0];

              ypos = ypos-bbox[1];

          }

          // Normalize to 0-1 for easier calculations

          xpos = xpos/whBbox[2]

          ypos = ypos/whBbox[3]

          if (invX) {

              xpos = 1-xpos

          }

          if (invY) {

              ypos = 1-ypos

          }

          // Offset to center

          if (cntr == true) {

              xpos = (xpos-0.5);

              ypos = (ypos-0.5);

              if (nrml == true) {

                  xpos *= 2;

                  ypos *= 2;

              }

          }

          // Remap normalized range back to whBbox range

          if (nrml == false) {

              xpos = xpos*whBbox[2]

              ypos = ypos*whBbox[3]

          }

          return [xpos, ypos]

      }

  }

}

​

function draw() {

  //==============================

  // WEBGL METHOD

  //==============================

  // background(255)

  // // Show image points

  // for (x = 0; x < img.width; x++) {

  //   for (y = 0; y < img.height; y++) {

  //     plane(1, 1, 1, 1)

  //   }

  // }

  // // SHOW FRAME RATE

  // fill(255, 0, 0);

  // textFont(myFont);

  // textSize(14);

  // text(frameRate().toFixed(2), -width/2, height/2, 0);

  //==============================

  // P2D METHOD

  //==============================

  let col;

  let nv;

  let nvx;

  let nvy;

  let xv;

  let yv;

  image(img, bbox[0], bbox[1]);

  background(bgColor)

  loadPixels();

  let val = box.getValue(normalize=true, center=true, invertX=false, invertY=false)

  let rect = box.getRect()

  let bounds = box.getBounds()

  let distx = 100;

  for (x = bounds[0]; x < bounds[2]; x++) {

    for (y = bounds[1]; y < bounds[3]; y++) {

      nv = nImg[(y*width)+(x*4)]

      nvx = nv*(val[0]*(rect[2]));

      nvy = nv*(val[1]*(rect[3]));

      // nvx = val[0]*rect[2]

      // nvy = val[1]*rect[3]

      xv = x+nvx;

      yv = y+nvy;

      col = [0,0,0,0]

      if (x > 0 && x <= bounds[2] && y > 0 && y <= bounds[3]) {

      }

      col = fget(x, y, src=pxls);

      // Show normal rect

      // fset(xv, yv, [xv, yv, 0.5*255, 255])

      // Make bg transparent

      // fset(x, y, bgColor)

      // Show color

      fset(xv, yv, col)

      // Show stMap

      // fset(x, y, [(val[0]/rect[2])*255,(val[1]/rect[3])*255,0,255])

      // Show distorted stMap

      // fset(x, y, [(xv/bounds[2])*255,(yv/bounds[3])*255,0,255])

    }

  }

  updatePixels();

  fill(255,0,0)

  stroke(255,0,0)

  text(`xv: ${x}`, 0, height-30)

  text(`yv: ${y}`, 0, height-20)

  box.show();

  // SHOW FRAME RATE

  fill(255, 0, 0);

  stroke(255, 0, 0);

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

}

​