# Changing order of Overlapping Shapes

**URL:** <https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [July 26, 2024, 3:01am UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830 "2024-07-26T03:01:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![niftynathan7](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@niftynathan7](https://discourse.processing.org/u/niftynathan7)\
**Post date:** [July 26, 2024, 3:01am UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830/1 "2024-07-26T03:01:11Z")

</div>

Heya,

I am trying to make the blue rectangle go over the top of the red one without going over the yellow one, I am only allowed to use 4 rectangles. I have tried to do this using PShape but have come up short, was wondering if someone could help me?

 ![Screenshot 2024-07-26 at 1.00.45 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/b/5b31afa4cb8ff8d91a880a8248e07c301327eabe.png)

```auto
 
PShape RedRect;
PShape BlueRect;

void setup(){
  size(500,500);
BlueRect = createShape(RECT, 100,50,300,100);
RedRect = createShape(RECT,50,100,100,300);
RedRect.setFill(color(255,0,0));
BlueRect.setFill(color(0,0,255));
}

void draw(){
  shape(BlueRect);
  
  fill(255,255,0);
  rect(350,100,100,300);
  
  fill(0,255,0);
  rect(100,350,300,100);
  
  shape(RedRect);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 26, 2024, 7:38am UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830/2 "2024-07-26T07:38:35Z")

</div>

Use P3D mode and use the z coordinate to decide the order.

Actually that might not work- need to think more about it.

I got hooked on the rect() method with PShape you can use 3D coordinates for the rectangle but they can have different Z coordinates for each vertex 😁

---

<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:** [July 26, 2024, 10:24am UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830/3 "2024-07-26T10:24:19Z")

</div>

Hello @niftynathan7,

Take a look here:  
_[beginShape() / Reference / Processing.org](https://processing.org/reference/beginShape_.html)_

You can work in P3D and add a z component to the vertices you want to overlap.

Try cutting 4 pieces of paper and overlapping them on a table and give consideration to which corners overlap and then apply this this to the code.

Experiment to see how this may work:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/d/3dcdff456f292381fa4b0761c815126c2ff65567.png)

I used P3D in above and later different z values for corners; they are all the same in my example only.  
The original shape is from here:  
_[beginShape() / Reference / Processing.org](https://processing.org/reference/beginShape_.html)_

References:  
_[P3D / Processing.org](https://processing.org/tutorials/p3d)_  
_[ortho() / Reference / Processing.org](https://processing.org/reference/ortho_.html)_

`:)`

---

<div class="post-metadata">

**Author:** ![ProcessingOrg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/processingorg/32/18341_2.png) [@ProcessingOrg](https://discourse.processing.org/u/ProcessingOrg)\
**Post date:** [July 26, 2024, 10:46am UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830/4 "2024-07-26T10:46:47Z")

</div>

Heya @niftynathan7 and thanks for sharing that interesting brain teaser! This kinda sounds like a homework-related question. If that is actually the case, could you please add a “homework” label to your post? Thanks!

R.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 26, 2024, 11:05am UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830/5 "2024-07-26T11:05:12Z")

</div>

I always enjoy brain-teasers so I had a go myself and got this 😄  
 ![overlaps](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/e/fee6a6181da579d76217049957fb505b63cdade6.png)

> [@niftynathan7](#):
>
> I am only allowed to use 4 rectangles

Since it appears to be homework I will not include the source code but it follows the approach I suggested earlier and you can see how to use vertex in 3D from @glv’s replay.

Good luck

---

<div class="post-metadata">

**Author:** ![niftynathan7](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@niftynathan7](https://discourse.processing.org/u/niftynathan7)\
**Post date:** [July 26, 2024, 11:22am UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830/6 "2024-07-26T11:22:18Z")

</div>

After messing around a bit I managed to get this:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/d/6db7ba046bbf01bbfcc1b6610cb7d948e8f930d3.png)

I simply copied over a portion of the blue rectangle over the top of the red one in the area it required.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 26, 2024, 1:44pm UTC](https://discourse.processing.org/t/changing-order-of-overlapping-shapes/44830/7 "2024-07-26T13:44:50Z")

</div>

I don’t know why your teacher set this problem, I can think of 2 reasons

1. A simple fun puzzle to get students to think out of the box.
2. Explore Processing to see if the language has features to help control the overlapping of shapes.

If (1) you have cracked it but if (2) then I recommend that you try out the alternative method suggested.