# Method to 'fill' a non rectangular shape with a pattern

**URL:** <https://discourse.processing.org/t/method-to-fill-a-non-rectangular-shape-with-a-pattern/35946>\
**Category:** Coding Questions\
**Created:** [March 26, 2022, 7:05am UTC](https://discourse.processing.org/t/method-to-fill-a-non-rectangular-shape-with-a-pattern/35946 "2022-03-26T07:05:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GoodJuJu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goodjuju/32/14504_2.png) [@GoodJuJu](https://discourse.processing.org/u/GoodJuJu)\
**Post date:** [March 26, 2022, 7:05am UTC](https://discourse.processing.org/t/method-to-fill-a-non-rectangular-shape-with-a-pattern/35946/1 "2022-03-26T07:05:52Z")

</div>

I want to fill a non-rectangular shape with a pattern.

Filling a rectangular shape is not a problem… all I need to do is to find the top left, bottom right coordinates and then not exceed them in my loop placing the pattern elements.

Filling a circle should also be fairly straightforward, find the centre but do not exceed the radius… but I’m struggling to think how I could do this with a different shape, for example a star?

Does anyone know of a way to identify a shape and use it as some kind of mask?

Conversely, is it possible to flip this idea and fill everything outside of a shape.

Thank you in advance…

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 26, 2022, 9:59am UTC](https://discourse.processing.org/t/method-to-fill-a-non-rectangular-shape-with-a-pattern/35946/2 "2022-03-26T09:59:29Z")

</div>

Hello @GoodJuJu,

> [@GoodJuJu](#):
>
> Does anyone know of a way to identify a shape and use it as some kind of mask?

A related topic:

> [@Filling a PShape](https://discourse.processing.org/t/filling-a-pshape/33644):
>
> I’d like to be able to generate an arbitrary shape and fill it with a simple pattern. Drawing the shape is easy - something like this would do: void setup(){ size(650, 650, P3D); smooth(8); translate(200, 200); beginShape(); vertex(random(100),random(100)); vertex(random(100), random(100)); vertex(random(100), random(100)); vertex(random(100),random(100)); endShape(); } However, if I wanted to fill in that shape with small blue strokes of circles, I would have no …

I modified code above to have 2 _PGraphics_ and did this:

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

`pg2.mask(pg1);`

The resources here will have more details:  
[https://processing.org/](https://processing.org/)

References:

- [https://processing.org/reference/PImage.html](https://processing.org/reference/PImage.html)
- [https://processing.org/reference/PImage\_mask\_.html](https://processing.org/reference/PImage_mask_.html)
- [https://processing.org/reference/texture\_.html](https://processing.org/reference/texture_.html)
- See tutorials on _PShapes_ and _Images and Pixels_

`:)`

---

<div class="post-metadata">

**Author:** ![GoodJuJu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goodjuju/32/14504_2.png) [@GoodJuJu](https://discourse.processing.org/u/GoodJuJu)\
**Post date:** [April 14, 2022, 7:32pm UTC](https://discourse.processing.org/t/method-to-fill-a-non-rectangular-shape-with-a-pattern/35946/3 "2022-04-14T19:32:45Z")

</div>

I am so sorry I didn’t reply sooner… thank you so much for your help.

The links you sent were really useful 🙂