var pixelsPerInch = 96;

var canvasWidth = 6 * pixelsPerInch;

var canvasHeight = canvasWidth / pictureAspectRatio;

​

var mouseXFactor, mouseYFactor

​

function preload() {

  img = loadImage("./images/ktr-sketchy.png");

}

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

}

​

function draw() {

  background(255);

​

  mouseXFactor = map(mouseX, 0, width, 0.05, 1);

  mouseYFactor = map(mouseY, 0, height, 0.05, 1);

​

  for (var gridX = 0; gridX < img.width; gridX++) {

    for (var gridY = 0; gridY < img.height; gridY++) {

      var tileWidth = width / img.width;

      var tileHeight = height / img.height;

      var posX = tileWidth * gridX;

      var posY = tileHeight * gridY;

​

      img.loadPixels();

      var c = color(img.get(gridX, gridY));

      var greyscale = round(

        red(c) * 0.222 + green(c) * 0.707 + blue(c) * 0.071

      );

      var w5 = map(greyscale, 0, 255, 5, 0.2);

      strokeWeight(w5 * mouseYFactor + 0.1);

      var c2 = color(img.get(min(gridX + 1, img.width - 1), gridY));

      stroke(c2);

      var greyscale2 = floor(

        red(c2) * 0.222 + green(c2) * 0.707 + blue(c2) * 0.071

      );

      var h5 = 50 * mouseXFactor;

      var d1 = map(greyscale, 0, 255, h5, 0);

      var d2 = map(greyscale2, 0, 255, h5, 0);

      line(posX - d1, posY + d1, posX + tileWidth - d2, posY + d2);

    }

  }

}

​

function mousePressed() {

  console.log(mouseX, mouseY, mouseXFactor, mouseYFactor)

}

​