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

Deathlord719
Sat, 05 Jul 2025 09:25:14 +0000
Coding Questions

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

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:

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.

4 posts - 3 participants