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

**URL:** <https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756>\
**Category:** Coding Questions\
**Created:** [September 2, 2019, 10:35am UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756 "2019-09-02T10:35:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![damomp](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@damomp](https://discourse.processing.org/u/damomp)\
**Post date:** [September 2, 2019, 10:35am UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/1 "2019-09-02T10:35:22Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1dc8f64d014d398f7db441bc01ec5ca873bae1d7.jpeg)

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [September 2, 2019, 11:22am UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/2 "2019-09-02T11:22:49Z")

</div>

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 😛

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 2, 2019, 11:34am UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/3 "2019-09-02T11:34:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 2, 2019, 11:53am UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/4 "2019-09-02T11:53:28Z")

</div>

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

> **example**
>
> ```auto
> // 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);
> }  
> 
> ```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 2, 2019, 7:07pm UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/5 "2019-09-02T19:07:14Z")

</div>

- 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?

---

<div class="post-metadata">

**Author:** ![damomp](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@damomp](https://discourse.processing.org/u/damomp)\
**Post date:** [September 2, 2019, 10:06pm UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/6 "2019-09-02T22:06:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 2, 2019, 10:53pm UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/7 "2019-09-02T22:53:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![damomp](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@damomp](https://discourse.processing.org/u/damomp)\
**Post date:** [September 2, 2019, 11:05pm UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/8 "2019-09-02T23:05:48Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![damomp](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@damomp](https://discourse.processing.org/u/damomp)\
**Post date:** [September 2, 2019, 11:07pm UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/9 "2019-09-02T23:07:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 2, 2019, 11:55pm UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/10 "2019-09-02T23:55:03Z")

</div>

> [@damomp](#):
>
> cut-out layers

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??? )

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [September 3, 2019, 12:04am UTC](https://discourse.processing.org/t/possible-at-all-create-path-on-image-generate-cutting-boxes-separate-each-box/13756/11 "2019-09-03T00:04:35Z")

</div>

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

```auto
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 🙂