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.