How to limit a shape inside a rect?

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

1 Like

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

https://processing.org/reference/get_.html

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

1 Like

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.

1 Like

@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… :frowning:
I’m using Sutherland–Hodgman algorithm to clip my polygons, so I can draw them directly on the screen without going outside the black rectangle.

39

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

1 Like

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

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
…and for more on get see 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

3 Likes