let mImage;

​

let xOff;

let yOff;

​

function preload() {

  oImage = loadImage("./abaporu_M.jpg");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  print("Original size: ", oImage.width, " x ", oImage.height);

​

  if (oImage.width > width) {

    oImage.resize(width, 0);

  }

  if (oImage.height > height) {

    oImage.resize(0, height);

  }

  print("Scaled size: ", oImage.width, " x ", oImage.height);

​

  xOff = (width - oImage.width) / 2;

  yOff = (height - oImage.height) / 2;

​

  oImage.loadPixels();

  print("pixel array size: ", oImage.pixels.length);

​

  // copy image so we keep original intact

  mImage = oImage.get();

}

​

function draw() {

  background(0);

​

  // exaggerate values based on mouseY

  let exaggeration = map(mouseY, 0, height, 255, 0);

​

  mImage.loadPixels();

​

  // note: i += 4 in the loop update

  for (let i = 0; i < mImage.pixels.length; i += 4) {

    // get color values from original image, oImage

    let redValue = oImage.pixels[i + 0];

    let greenValue = oImage.pixels[i + 1];

    let blueValue = oImage.pixels[i + 2];

​

    // which is the dominant value

    let maxColorValue = max(redValue, greenValue, blueValue);

​

    // exaggerate the domiant one, but in the mImage

    if (maxColorValue == redValue) {

      mImage.pixels[i + 0] = exaggeration;

    } else if (maxColorValue == greenValue) {

      mImage.pixels[i + 1] = exaggeration;

    } else if (maxColorValue == blueValue) {

      mImage.pixels[i + 2] = exaggeration;

    }

  }

​

  mImage.updatePixels();

​

  push();

  translate(xOff, yOff);

  image(mImage, 0, 0);

  pop();

}

​