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

Processing Coding Questions
1

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

image
image256Ă—258 1.59 KB

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.

2

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:

image
image302Ă—339 2.05 KB

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

:)

1 Like
3

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

1 Like
4

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

image
image420Ă—353 3.32 KB

More importantly I understand how push and pop work now : )

2 Likes