# How to limit a shape inside a rect?

**URL:** <https://discourse.processing.org/t/how-to-limit-a-shape-inside-a-rect/7586>\
**Category:** Libraries\
**Created:** [January 17, 2019, 10:18am UTC](https://discourse.processing.org/t/how-to-limit-a-shape-inside-a-rect/7586 "2019-01-17T10:18:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![leochk](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@leochk](https://discourse.processing.org/u/leochk)\
**Post date:** [January 17, 2019, 10:18am UTC](https://discourse.processing.org/t/how-to-limit-a-shape-inside-a-rect/7586/1 "2019-01-17T10:18:55Z")

</div>

Hi guys, I’m currently working on a personal project. Basically, I have a Voronoi map and I plan to create a GUI: whenever the user clicks on a voronoi polygon, a window appears and show its informations (height, moisture, biome etc…).  
In addition, I need the window to contain a “zoomed version” of the selected polygon with its neighbors.

The following screen represents what I have so far:  
 ![35](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fbfa9115b2c28b49a2e5c1c6f72f770577ef5455.png)  
As you can see, I almost manage to do it. However, the set of polygon exceeds the black rectangle behind it.

**My question is, how do I “limit” my polygons inside the black rectangle?**

I’m using ControlP5 to generate my GUI, and the polygons+rectangle are drawing inside a CDrawable instance.

---

<div class="post-metadata">

**Author:** ![BennyHacker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bennyhacker/32/2969_2.png) [@BennyHacker](https://discourse.processing.org/u/BennyHacker)\
**Post date:** [January 17, 2019, 9:12pm UTC](https://discourse.processing.org/t/how-to-limit-a-shape-inside-a-rect/7586/2 "2019-01-17T21:12:22Z")

</div>

An easy solution would be storing the limited area as a PImage using get()

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

Assuming you’re not using it every frame, which would cause lag

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 17, 2019, 9:38pm UTC](https://discourse.processing.org/t/how-to-limit-a-shape-inside-a-rect/7586/3 "2019-01-17T21:38:06Z")

</div>

If I understand your question correctly, you’re asking how to clip the shape so it doesn’t go outside the black box, right?

If so, then you could draw the shape to a `PGraphics` instead of drawing it directly to your screen. This would allow you to set the dimensions you want to use. Then you’d draw that `PGraphics` to the screen. In fact, looking at your screenshot, it sounds like `PGraphics` could help you out quite a bit.

Anyway, the `createGraphics()` function is your friend. Take a look at [the reference](https://processing.org/reference/).

---

<div class="post-metadata">

**Author:** ![leochk](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@leochk](https://discourse.processing.org/u/leochk)\
**Post date:** [January 18, 2019, 10:35am UTC](https://discourse.processing.org/t/how-to-limit-a-shape-inside-a-rect/7586/4 "2019-01-18T10:35:51Z")

</div>

@BennyHacker

> An easy solution would be storing the limited area as a PImage using get()

If I use this trick, the `PImage` will lose sharpness after zooming on the polygons, right?

@Kevin

> If so, then you could draw the shape to a `PGraphics` instead of drawing it directly to your screen. This would allow you to set the dimensions you want to use. Then you’d draw that `PGraphics` to the screen. In fact, looking at your screenshot, it sounds like `PGraphics` could help you out quite a bit.

I actually managed to do it manually before seing your solution… ☹  
I’m using [Sutherland–Hodgman algorithm](https://en.wikipedia.org/wiki/Sutherland%E2%80%93Hodgman_algorithm) to clip my polygons, so I can draw them directly on the screen without going outside the black rectangle.

![39](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c2b3f3fba6dd9041971b0b5e416523feba134aab.png)

In the future, I’ll try to use `PGraphics` to make it easier.  
Thank you!

---

<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:** [January 21, 2019, 7:37pm UTC](https://discourse.processing.org/t/how-to-limit-a-shape-inside-a-rect/7586/5 "2019-01-21T19:37:10Z")

</div>

Thanks for sharing the algorithm, and glad you found a solution that works for you!

Note that the canvas also has a clipping mode, with `clip()` and `noClip()`.

[https://processing.org/reference/clip\_.html](https://processing.org/reference/clip_.html)  
[https://processing.org/reference/noClip\_.html](https://processing.org/reference/noClip_.html)

…and, in addition to creating a PGraphics of the proper frame size and just drawing to it – which seems like what you want here – you could also create a larger PGraphics pg and call `pg.clip()`

[http://processing.github.io/processing-javadocs/core/processing/core/PGraphics.html#clip-float-float-float-float-](http://processing.github.io/processing-javadocs/core/processing/core/PGraphics.html#clip-float-float-float-float-)

You can also draw your entire map to a PGraphics pg, then use `pg.get(x, y, w, h)` to return a PImage of your viewport dimensions

[https://processing.org/reference/PImage\_get\_.html](https://processing.org/reference/PImage_get_.html)  
…and for more on get see [https://processing.org/reference/get\_.html](https://processing.org/reference/get_.html)

or if you are keeping your complete drawing in one image and your viewpoint in another, you could copy:

[https://processing.org/reference/PImage\_copy\_.html](https://processing.org/reference/PImage_copy_.html)