// https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/4
String info="use: mouse move and click";
PImage img;
PImage[] imgsplit = new PImage[4];
int theSplitX, theSplitY;
boolean havesplit = false;
int x=10, y=x, off=20, grid=2, many=grid*grid, spd = 1;

public void settings() {  
  size(640, 360);
}

public void setup() {
  img = loadImage("data/moonwalk.jpg");
  img.resize(width/4, height/4);
  println(info);
}

public void draw() {
  background(200, 200, 0);
  image(img, 0, 0);
  split();
  if ( havesplit ) {
    translate(img.width+10,img.height+10);// - ( theSplitX+off), height/2 - (theSplitY+off));
    off +=spd; 
    if ( off >100 ) spd=-1;
    if ( off <  1 ) spd= 1;
    for (int i = 0; i < 4; i++ ) {
      int k = x+(i%grid)*( theSplitX+off);
      int l = y+(floor(i/grid))*(theSplitY+off);
      image(imgsplit[i], k, l);
    }
  }
}

public void split() {
  stroke(0, 200, 200);
  line(mouseX, 0, mouseX, height); 
  line(0, mouseY, width, mouseY);
  if ( havesplit ) {
    stroke(200, 0, 0);
    line(theSplitX, 0, theSplitX, height/4); 
    line(0, theSplitY, width/4, theSplitY);
  }
}

public void mousePressed() {
  theSplitX=constrain(mouseX, 0, img.width);
  theSplitY=constrain(mouseY, 0, img.height);
  println("x "+theSplitX+ " y "+ theSplitY);
  havesplit = true;
  imgsplit[0] = img.get(0, 0, theSplitX, theSplitY);
  imgsplit[1] = img.get(theSplitX, 0, img.width - theSplitX, theSplitY);
  imgsplit[2] = img.get(0, theSplitY, theSplitX, img.height - theSplitY);
  imgsplit[3] = img.get(theSplitX, theSplitY, img.width - theSplitX, img.height - theSplitY);
}