# Trim primitive shapes

**URL:** <https://discourse.processing.org/t/trim-primitive-shapes/13131>\
**Category:** Coding Questions\
**Created:** [August 1, 2019, 9:19pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131 "2019-08-01T21:19:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [August 1, 2019, 9:19pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/1 "2019-08-01T21:19:38Z")

</div>

Hi there,

need a little help figuring this one out…

Ive had a search but havent found any topics that I think would help mw…

Basically Im trying to mask some lines ive generated with a rectangle.

I’ve seen a few posts about using image masking but I need to be able to save as a.pdf, to edit in vector image software.

In this image, I’d like the purple rectangle to trim/crop the diagonal lines.

thanks very much 🙂

 ![56](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f15337a21f48c774a10b0ab09a221d434e580202.png)

```auto
float blockSize = 100;

void setup() {
 size(480,480); 
}

void draw() {
  background(255);

  strokeWeight(2);
  stroke(255,0,255);
  rect(mouseX,mouseY,blockSize,blockSize);
  
  ladder(width/2,height/2+blockSize/2);  

}

//function to create diagonal lines
void ladder(float x_,float y_) {
  stroke(0);
  strokeWeight(1);
  
  float diag = sqrt(sq(blockSize) + sq(blockSize));
  float x = x_;
  float y = y_;
  float space = blockSize/10;
  
   pushMatrix();
     translate(x + blockSize/2,y);
     rotate(radians(45));
       for(int i = 0; i < diag; i += space) {
       line(-diag/2,i-diag/2,diag/2,i-diag/2); 
       }
   popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 1, 2019, 9:25pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/2 "2019-08-01T21:25:00Z")

</div>

Do you require the intersection points? Or are you just after an image of the square masking the lines?

---

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [August 1, 2019, 9:26pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/3 "2019-08-01T21:26:47Z")

</div>

Yea, I think so…

Im using the .pdf library to save as a .pdf and open in Inkscape.

---

<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:** [August 1, 2019, 9:30pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/4 "2019-08-01T21:30:21Z")

</div>

you could just use `**get()**` to get a part of the screen:

You need the version with 4 parameters:

get(x, y, w, h)

It returns a PImage p1 corresponding to the part of the original PImage

You could then use background, show the p1 and save the screen (or the image using p1.[save()](https://www.processing.org/reference/PImage_save_.html))

[https://www.processing.org/reference/get\_.html](https://www.processing.org/reference/get_.html)

---

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [August 1, 2019, 9:45pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/5 "2019-08-01T21:45:21Z")

</div>

@Chrisir Brilliant!

such a simple solution. thank you.

---

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [August 1, 2019, 10:02pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/6 "2019-08-01T22:02:24Z")

</div>

Oh, no… it seems I spoke too soon.  
When it comes to recording to a .PDF it saves it as an embedded image of diagonal lines, which unfortunately is not what Im after.

I tried using the .SVG library, but that gives me a NPE error. the reference does state that the library does not work with images.

back to the drawing board.

---

<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:** [August 1, 2019, 10:09pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/7 "2019-08-01T22:09:48Z")

</div>

oups.

Alternatively just draw 4 rects over the area you don’t want?

---

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [August 2, 2019, 5:38am UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/8 "2019-08-02T05:38:22Z")

</div>

That won’t work for what I’m trying to achieve. Ultimately there will be a Lot of diagonal line (haches) next to each other in a grid.

The mask rects as you suggested would end up masking the neighbours too.

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [August 2, 2019, 9:41am UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/9 "2019-08-02T09:41:56Z")

</div>

If the pink rectangle is the same proportion as the grid cells and you’re only working with rotated lines, you might be able to solve it as followed: You could write a function to calculate where the rotated lines intersect with the edges of the pink rectangle, save these x and y values, and use those to draw separate lines. Something like this:

```auto
int lines_amount = 7;
float cell_size = 200;
float[] line_intersects;

void setup() {
  size(400, 400);
}

void draw() {
  background(240);
  translate(width/4, height/4);

  line_intersects = new float[lines_amount];
  float lines_distance = cell_size / lines_amount;
  for (int i = 0; i < lines_amount; i++) {
    line_intersects[i] = lines_distance * i;
    println(line_intersects[i]);
    if(i == 0) {
      line(line_intersects[i], line_intersects[i], cell_size, cell_size);
    } else {
      line(line_intersects[i], 0, cell_size, cell_size - line_intersects[i]);
      line(0, line_intersects[i], cell_size - line_intersects[i], cell_size);
    }
  }
}

void mousePressed() {
  lines_amount++;
}

```

The code above isn’t pretty, but you get the idea. Perhaps you could convert it into a class or a shape to speed up the sketch’s performance. Think something like this might work for your situation?

---

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [August 4, 2019, 7:31am UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/10 "2019-08-04T07:31:25Z")

</div>

Thanks for the help @Tiemen this looks like it might help.

But I think I need to re-think my approach for what I’m trying to achieve instead.

thanks all 🙂

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 4, 2019, 10:03am UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/11 "2019-08-04T10:03:12Z")

</div>

I think you want something like this.

> **[Line square intersection - OpenProcessing](https://www.openprocessing.org/sketch/742353)**
>
> Simple implementation of Ray Casting,

This is an amended take on my ray casting example, using light intersection. In this example I’ve only generated lines for one side of the rectangle, you would need to do this for all sides.  
Alternatively amend the code to allow the lines to handle multiple intersections.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/98d329c413988eb1b99918f2dd8ef014454e100a.png)

---

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [August 4, 2019, 1:10pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/12 "2019-08-04T13:10:25Z")

</div>

Raycasting!  
What a great solution.

Thanks @paulgoux

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 4, 2019, 1:16pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/13 "2019-08-04T13:16:01Z")

</div>

Ive updated it with the rest of the lines.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 4, 2019, 1:20pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/14 "2019-08-04T13:20:13Z")

</div>

Please note some of the lines will look a bit thicker as they are draw twice, I’m drawing a set of lines diagonally right down, and another set of lines diagonally up left, those which intersect with the square are trimmed the others however are not, and therefore are drawn twice.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 15, 2019, 1:37pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/15 "2019-08-15T13:37:47Z")

</div>

Just adding mouse interaction for the square, need to iron out glitches.

> **[Line square intersection + mouse - OpenProcessing](https://www.openprocessing.org/sketch/744729)**
>
> Simple implementation of Ray Casting,

---

<div class="post-metadata">

**Author:** ![LuckSmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucksmith/32/5805_2.png) [@LuckSmith](https://discourse.processing.org/u/LuckSmith)\
**Post date:** [August 15, 2019, 2:09pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/16 "2019-08-15T14:09:20Z")

</div>

I’m sorry, guys, am I missing something or a simple `clip(mouseX,mouseY,blockSize,blockSize);` would do the job?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 15, 2019, 2:19pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/17 "2019-08-15T14:19:32Z")

</div>

This example only draws the lines within the clip boundaries,

can this be reversed?

```auto
void setup() {
  size(200, 200);
  imageMode(CENTER);
}

void draw() {
  background(204);
  if (mousePressed) {
    clip(mouseX, mouseY, 100, 100);
  } else {
    noClip();
  }
  line(0, 0, width, height);
  line(0, height, width, 0);
}

```

---

<div class="post-metadata">

**Author:** ![LuckSmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucksmith/32/5805_2.png) [@LuckSmith](https://discourse.processing.org/u/LuckSmith)\
**Post date:** [August 15, 2019, 2:30pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/19 "2019-08-15T14:30:05Z")

</div>

drawing a rect with bg color after drawing the lines would 🙂

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 15, 2019, 2:32pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/20 "2019-08-15T14:32:44Z")

</div>

It seems like the simplest solution, which was suggested initialy and I don’t think it was ever clarified whether the intersection lines were required. If they are I’m not sure the mask would fit that purpose which is why I suggested the intersection function. But yes the simplest solution is to just draw a square over the lines based on the mouse position.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 15, 2019, 6:42pm UTC](https://discourse.processing.org/t/trim-primitive-shapes/13131/21 "2019-08-15T18:42:30Z")

</div>

All done, let me know if you want help explaining the code, or if you notice any bugs I didn’t catch.

[Next page](https://discourse.processing.org/t/trim-primitive-shapes/13131.md?page=2)