Changing order of Overlapping Shapes

Heya,

I am trying to make the blue rectangle go over the top of the red one without going over the yellow one, I am only allowed to use 4 rectangles. I have tried to do this using PShape but have come up short, was wondering if someone could help me?

 
PShape RedRect;
PShape BlueRect;

void setup(){
  size(500,500);
BlueRect = createShape(RECT, 100,50,300,100);
RedRect = createShape(RECT,50,100,100,300);
RedRect.setFill(color(255,0,0));
BlueRect.setFill(color(0,0,255));
}

void draw(){
  shape(BlueRect);
  
  fill(255,255,0);
  rect(350,100,100,300);
  
  fill(0,255,0);
  rect(100,350,300,100);
  
  shape(RedRect);
}

Use P3D mode and use the z coordinate to decide the order.

Actually that might not work- need to think more about it.

I got hooked on the rect() method with PShape you can use 3D coordinates for the rectangle but they can have different Z coordinates for each vertex :grin:

1 Like

Hello @niftynathan7,

Take a look here:
beginShape() / Reference / Processing.org

You can work in P3D and add a z component to the vertices you want to overlap.

Try cutting 4 pieces of paper and overlapping them on a table and give consideration to which corners overlap and then apply this this to the code.

Experiment to see how this may work:

I used P3D in above and later different z values for corners; they are all the same in my example only.
The original shape is from here:
beginShape() / Reference / Processing.org

References:
P3D / Processing.org
ortho() / Reference / Processing.org

:)

2 Likes

Heya @niftynathan7 and thanks for sharing that interesting brain teaser! This kinda sounds like a homework-related question. If that is actually the case, could you please add a “homework” label to your post? Thanks!

R.

2 Likes

I always enjoy brain-teasers so I had a go myself and got this :smile:
overlaps

Since it appears to be homework I will not include the source code but it follows the approach I suggested earlier and you can see how to use vertex in 3D from @glv’s replay.

Good luck

2 Likes

After messing around a bit I managed to get this:

image

I simply copied over a portion of the blue rectangle over the top of the red one in the area it required.

1 Like

I don’t know why your teacher set this problem, I can think of 2 reasons

  1. A simple fun puzzle to get students to think out of the box.
  2. Explore Processing to see if the language has features to help control the overlapping of shapes.

If (1) you have cracked it but if (2) then I recommend that you try out the alternative method suggested.

1 Like