​

var img, sel;

var x, y, w, h, mX, mY;

var painting = false;

var grid = 20;

​

function preload() {

  src = loadImage("example.jpeg");

}

​

function setup() {

  createCanvas(800, 800);

  rectMode(CORNERS);

​

  src.resize(width, height);

  img = src.get();

}

​

function draw() {

  image(img, 0, 0);

  if (mousePressed) {

    mX = gridify(mouseX);

    mY = gridify(mouseY);

    if (painting) {

      var xDist = abs(mX - gridify(pmouseX));

      var yDist = abs(mY - gridify(pmouseY));

      var steps = max(xDist, yDist);

      for (var i = 0; i < steps; i++) {

        var lerpX = lerp(gridify(pmouseX), mX, (1.0 / steps) * i);

        var lerpY = lerp(gridify(pmouseY), mY, (1.0 / steps) * i);

        image(sel, lerpX - (x), lerpY - (y));

      }

      img = get();

    } else {

      stroke("#FF0000");

      strokeWeight(2);

      noFill();

      rect(x, y, mX, mY);

    }

  }

}

​

function mousePressed() {

  mX = gridify(mouseX);

  mY = gridify(mouseY);

  if (!painting) {

    x = mX;

    y = mY;

  } else {

    x = mX - x;

    y = mY - y;

  }

}

​

function mouseReleased() {

  mX = gridify(mouseX);

  mY = gridify(mouseY);

  if (mX != x && mY != y && !painting) {

    w = abs(x - mX);

    h = abs(y - mY);

    if (mX < x) x = mX;

    if (mY < y) y = mY;

    sel = src.get(x, y, w, h);

    painting = true;

  } else {

    painting = false;

  }

}

​

function keyReleased() {

  if (keyCode == BACKSPACE) {

    img = src.get();

    painting = false;

  }

}

​

function gridify(ele) {

  var out = int(round(ele / grid) * grid);

  return out;

}