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

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.

Hello @Deathlord719,

Read this section on Homework Policy and tag it appropriately:
https://discourse.processing.org/faq#homework

There is a tutorial here to help understand transformations:

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:

May or may not be needed! Experiment.

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

Have fun!

Hint < Click here if you want one!
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:

References:
ortho() / Reference / Processing.org Another good one to try!
rectMode() / Reference / Processing.org

:)

1 Like

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