# Shapes inside other shapes

**URL:** <https://discourse.processing.org/t/shapes-inside-other-shapes/32619>\
**Category:** Processing for Android\
**Created:** [October 5, 2021, 12:43am UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619 "2021-10-05T00:43:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [October 5, 2021, 12:43am UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/1 "2021-10-05T00:43:13Z")

</div>

Hi there! I have done a loop of vertical lines, but I don’t want them to leak out the rhombus behind. Is there a (easy) way to draw the lines **inside** the yellow rhombus as you can see in the picture below?

 ![IMG_20211004_203241](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e142ec86e3ecbe63aa15d5bac6eae30e0ac312fe.jpeg)

```auto
size(1000,1000);
background(255,255,255);
noStroke();

//quad yellow
noStroke();
fill(255,255,0);
quad(500,300,700,500,500,700,300,500);

strokeWeight(25);
stroke(0,0,0);
for(float x=312.5;x<700;x=x+50){
  line(x,300,x,700);
}

```

 ![IMG_20211004_214021](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/54195f44f4d2ce0b6b57f9f1c2c67420e7a09d34.jpeg)

---

<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:** [October 5, 2021, 2:07am UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/2 "2021-10-05T02:07:45Z")

</div>

is the last image you found the solution? in any case based on [this post](https://discourse.processing.org/t/using-pgraphics-to-create-a-mask/16740/2) by @GSA_IxD you could do it like so

```auto
PGraphics mask, buffer;

void setup() {
  size(1024, 1024, P2D);
  
  mask = createGraphics(width, height, P2D);
  buffer = createGraphics(width, height, P2D); 
}

void draw() {
  background(255);
  updateMask();
  updateBuffer();
  buffer.mask(mask);
  image(buffer, 0, 0);
}

void updateMask() {
  mask.beginDraw();
  mask.noStroke();
  mask.fill(255);
  mask.quad(500, 300, 700, 500, 500, 700, 300, 500);
  mask.endDraw();
}

void updateBuffer() {
  buffer.beginDraw();
  buffer.background(255, 255, 0);
  buffer.strokeWeight(25);
  buffer.stroke(0, 0, 0);
  for (float x=312.5; x<700; x=x+50) {
    buffer.line(x, 300, x, 700);
  }
  buffer.endDraw();
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [October 5, 2021, 8:30pm UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/3 "2021-10-05T20:30:31Z")

</div>

Hahaha! I made the last image with Photoshop, I tried to do something with masks but I was not able to get that result. Thank you so much for your Code but It does something really different

 ![IMG_20211005_162750](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d78a6caadb73d97c1228d7fb4e1ed7cbbdeb9608.jpeg)

How could I do something as you can see in the second picture of my first message?

---

<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:** [October 5, 2021, 10:18pm UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/4 "2021-10-05T22:18:22Z")

</div>

that’s weird it looks like this on my machine

 ![hmmm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/300877fb2561c6d77dd21ba147f2e015babb8562.png)

maybe it’s because i am using processing 4? or maybe you just need to mess with the way the masks are applied? masks can be very finicky

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [October 5, 2021, 10:32pm UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/5 "2021-10-05T22:32:38Z")

</div>

I am using APDE Android ProcessIng IDE, maybe that is the reason, that app is so tricky! Any idea about solving that? 😅

---

<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:** [October 5, 2021, 10:38pm UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/6 "2021-10-05T22:38:23Z")

</div>

maybe ask here [Processing for Android - Processing Foundation](https://discourse.processing.org/c/processing-android/12)

or someone else will be along with an answer soon no doubt

edit: i’m guessing there is a difference in the way android implements masks and it probably has to do with the blend functions available in android.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [October 5, 2021, 10:41pm UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/7 "2021-10-05T22:41:51Z")

</div>

Thank you so much my friend!

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [October 6, 2021, 2:01am UTC](https://discourse.processing.org/t/shapes-inside-other-shapes/32619/8 "2021-10-06T02:01:25Z")

</div>

Could I repeat a mask with several elements in the same file?