# Having trouble with rotating and translating specific elements and overlapping them on top of each other

**URL:** <https://discourse.processing.org/t/having-trouble-with-rotating-and-translating-specific-elements-and-overlapping-them-on-top-of-each-other/46664>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [July 5, 2025, 9:25am UTC](https://discourse.processing.org/t/having-trouble-with-rotating-and-translating-specific-elements-and-overlapping-them-on-top-of-each-other/46664 "2025-07-05T09:25:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deathlord719](https://avatars.discourse-cdn.com/v4/letter/d/f07891/32.png) [@Deathlord719](https://discourse.processing.org/u/Deathlord719)\
**Post date:** [July 5, 2025, 9:25am UTC](https://discourse.processing.org/t/having-trouble-with-rotating-and-translating-specific-elements-and-overlapping-them-on-top-of-each-other/46664/1 "2025-07-05T09:25:14Z")

</div>

I am a beginner to processing and coding in general. I am trying to recreate the following image in processing.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/e/0e40f3fff4bec0edecdb82ca90ae21dca455b0ea.png)  
There was already another post on this(they solved it by copying over an area of blue rectangle onto the intersecting area, but I want to achieve the effect by actually controlling the draw order of overlapping shapes), and I decided to attempt it myself, using P3D, and tried to get to rotate the blue rectangle around the Y axis so one side would be higher using rotateY(), and then translate() -ing the blue rectangle backwards. But I can’t get the blue rectangle “straight”, and also unlike the picture, I can see the outline of the rectangle underneath in overlapping regions. Is my entire approach wrong or am I missing something small?  
Here’s my code:

```auto
size(300,300,P3D);
background(255);
rectMode(CENTER);
fill(0,0,255);
rotateY(radians(-3));
translate(0,0,-7);
rect(150,75,150,75);
translate(0,0,7);
rotateY(radians(3));
fill(255,255,0);
rect(225,150,75,150);
fill(0,255,0);
rect(150,225,150,75);
fill(255,0,0);
rect(75,150,75,150);

```

Have marked it as homework, as there was another post on this question in 2024 and it was marked as homework so I am assuming this is a common homework question, but this is not my homework.

---

<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 5, 2025, 12:23pm UTC](https://discourse.processing.org/t/having-trouble-with-rotating-and-translating-specific-elements-and-overlapping-them-on-top-of-each-other/46664/2 "2025-07-05T12:23:54Z")

</div>

> [@Deathlord719](#):
>
> Have marked it as homework, as there was another post on this question in 2024 and it was marked as homework so I am assuming this is a common homework question, but this is not my homework.

Hello @Deathlord719,

Read this section on _Homework Policy_ and tag it appropriately:  
[https://discourse.processing.org/faq#homework](https://discourse.processing.org/faq#homework)

There is a tutorial here to help understand transformations:

> **[P3D](https://processing.org/tutorials/p3d/)**
>
> Developing advanced graphics applications in Processing using P3D (OpenGL) mode.

They accumulate!  
Order is important!

See tutorial to understand all of this and draw your shapes as if they are in the physical 3D world and overlap.

Take a look a these:

> **[hint() / Reference](https://processing.org/reference/hint_.html)**
>
> This function is used to enable or disable special features that control how graphics are drawn. In the course of developing Processing, we had to make hard decisions about tradeoffs between performan…

May or may not be needed! Experiment.

> [@Deathlord719](#):
>
> I decided to attempt it myself, using P3D

Keep at it!  
Take a look at resources I provided.

Have fun!

> **Hint \< Click here if you want one!**
>
> ```auto
> size(300,300,P3D);
> // hint( ? ); //Look at resources!
> 
> translate(width/2, height/2); // 0, 0 origin is at center of sketch
> 
> // Do not rotate top and bottom one!
> fill(0, 0, 255);
> push();
> translate(0, 50, 0);
> //rotateY(radians(-5)); // I did not use. May add symmetry.
> rectMode(CENTER);
> rect(0, 0, 100, 50);
> pop();
> 
> // Rest of code...
> 
> ```

Building on the concepts above:

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

References:  
[ortho() / Reference / Processing.org](https://processing.org/reference/ortho_.html) Another good one to try!  
[rectMode() / Reference / Processing.org](https://processing.org/reference/rectMode_.html)

`:)`

---

<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 5, 2025, 2:49pm UTC](https://discourse.processing.org/t/having-trouble-with-rotating-and-translating-specific-elements-and-overlapping-them-on-top-of-each-other/46664/3 "2025-07-05T14:49:55Z")

</div>

You might try  
`hint(DISABLE_OPTIMIZED_STROKE);`  
to avoid lines appearing in front of nearer shapes.

---

<div class="post-metadata">

**Author:** ![Deathlord719](https://avatars.discourse-cdn.com/v4/letter/d/f07891/32.png) [@Deathlord719](https://discourse.processing.org/u/Deathlord719)\
**Post date:** [July 9, 2025, 7:09am UTC](https://discourse.processing.org/t/having-trouble-with-rotating-and-translating-specific-elements-and-overlapping-them-on-top-of-each-other/46664/4 "2025-07-09T07:09:25Z")

</div>

Guys I did it! Thanks for the hint! Here’s mine:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/6/66c64bd52f3650d289da17031234d2c1617c9d9b.png)  
More importantly I understand how push and pop work now : )