Possible at all? Create path on image, generate cutting boxes, separate each box

Processing Coding Questions
1

Dear all,

just getting started with processing and wondering if this is possible within processing?
I haven’t succeeded doing this in photoshop.

I need to dissolve an image into smaller party while each part should be an individual layer (or entity) as I must re-arrange those smaller entities later.

So the idea is to draw a path onto an image. Then have cutting boxes follow the path and finally store each cutting box into a new layer/entity.

Anyone ideas how to solve this? with processing? or maybe even other tools?

thanks in advance
Daniel

processing%20forum%20image
processing forum image.jpg1080×608 44.7 KB

1 Like
2

HI @damomp

I think it can be done with processing, don’t have in mind the whole method, but maybe loading an image, pointing to the pixels in your boxes, saving the pixel array of that boxes and then creating a new image with those pixels, or just coping those pixels in other place :stuck_out_tongue:

Hope this can help you or proportionate a lane of thinking if you don’t have nothing in mind. :smile:

3

Yeah,
use loadImage to load : source = loadImage
make an array of PImage to hold the slices
for loop over the image
use source.get() with 4 parameters
See reference for all these

1 Like
4

if that is homework i can get into trouble,
if not you might start like

example 
// copyright kll-engineering CC BY SA 4.0 

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);
}

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); 
    line(0, theSplitY, width, theSplitY);
  }
}

public void mousePressed() {
  theSplitX=constrain(mouseX, 0, img.width);
  theSplitY=constrain(mouseY, 0, img.height);
  println(theSplitX, 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);
}
5
  • Can the path be diagonal, or left-right – or is the path always straight up-down?
  • Can the path be curved?
  • Can the path be shorter than the image? Can it be longer than the image? What should happen then?
6

yes, it can and should be all of that. however, i thought in the first place for simplicity, it would be easier to go on with a straight line.

7

Okay, so curves later, not now – fine. And always up-down only? What about the third question?

8

yes it can be longer and shorter. “can” not “must” be.

the intention is to further work with the cut-out layers.

9

sticking to the graphic example: the idea is to be able to further manipulate the layers 1 - 4.
rearrange, transform, etc.

this, most importantely would be to have symmetric cut-out boxes appear following the drawing of (whatever shape) of the line.

10

i show you a example to separate one image into a array of 4 separate images
( like with a click on a “cross-point” )
( no problem if you not like it )
but as you still talk LAYERS instead i want ask if you can describe more in detail what that means
( compared to list of images??? )

11

you could have a source image and apply multiple masks one after the other and grab the region that is remaining once the mask is applied. a single mask run might look something like

PImage img;
PImage sub;
PGraphics mask;

void setup() {
  size(800, 600, P2D);
    img = loadImage("persp3.jpg");
    mask = createGraphics(width, height);
    
    mask.beginDraw();
    //mask.rect(32, 32, 128, 128);
    mask.circle(64, 64, 128);
    //mask.ellipse(64, 64, 128, 128);
    mask.endDraw();
    
    img.mask(mask);
    
    int[] imgBounds = getBounds();
    
    sub = createImage(imgBounds[1] - imgBounds[0], imgBounds[3] - imgBounds[2], ARGB);
    sub.copy(img, imgBounds[0], imgBounds[2], imgBounds[1], imgBounds[3], 0, 0, imgBounds[1] - imgBounds[0], imgBounds[3] - imgBounds[2]);
}

int[] getBounds() {
  int minX = 100000, maxX = -100000, minY = 100000, maxY = -100000;
  img.loadPixels();
  for(int y = 0; y < img.height; y++) {
    for(int x = 0; x < img.width; x++) {
      if(alpha(img.pixels[x + y * img.width]) > 0) {
        if(x < minX)
          minX = x;
        if(x > maxX)
          maxX = x;
        if(y < minY)
          minY = y;
        if(y > maxY)
          maxY = y;
      }
    }
  }
  return new int[] { minX, maxX, minY, maxY };
}
 
void draw() { 
  //image(img, 0, 0);
  image(sub, 0, 0);
}

the benefit is you can use just about any shape as the mask and apply it where you need it as it is needed. just a thought. best of luck.

*i haven’t included the image obvs so just replace that line and the mask can just be set as the src img width and height :slight_smile: