Hi there,
Hope this msg finds you well. Greetings from the Dominican Rep. 
I am trying to do a FLIPCARD, meaning, a image on one side and another image on the other side. So that when you rotate it, you see one image on on side and another on the other side.
In the attached code. I have two(2) PImages, and drew two (2) PShape Quads. Each PShape Quad has as a texture it’s own PImage.
I was under the impression, that in P3D if I had a two (2) Quads and if I rotated on of them to -180 degrees, had each with their own push(), translate(), pop(), then displayed them to the drawing context with Shape; when I rotated on the Y axis them, I would see on one side one textured quad, and on the other side the other textured quad.
What I do see in front is the one that I drew with shape last, no matter what angle rotateY has. I feel there is something fundamental that I am not understanding. Any help would be appreciated
PS: I already did another working example doing the two (2) textured quads each on its own PGraphics layer, and it worked. I post here because I seem to be under a grave misunderstanding and want to learn.
I do not understand how In the main draw context, (no PGraphics layers) how if I have two PShape quads individually drawn and individually textured with a a particular image. Why when I rotate them both simultaneously on the Y axis, I do not see one in the front and on in the back back? I tried changing their Z value on translate, one with -50, and the other 50 to see if it would make a difference, but it did not.
I uploaded the images online so that this posting could work, but I have them in the data folder. I added a small circle to the right of each (one yellow and one blue) to have a reference when I rotated the one that is supposed to be on the backside of the flipcard. Thank you for looking.
Find my example code below:
PImage imgIN;
PImage imgOUT;
PShape quadIN;
PShape quadOUT;
void setup() {
size(500, 500, P3D);
//both PImages dims are: Width: 212 x Height: 300
imgIN = loadImage("https://i.ibb.co/8KwnfvB/Pa-IN.png");
imgIN.resize(0, 300);
imgOUT = loadImage("https://i.ibb.co/QmjM7fG/Pa-OUT.png");
imgOUT.resize(0, 300);
noStroke();
//START PShape quadIN
quadIN = createShape();
quadIN.beginShape();
quadIN.noFill();
quadIN.texture(imgIN);
quadIN.vertex(-106, -150, 0, 0, 0);
quadIN.vertex(106, -150, 0, imgIN.width, 0);
quadIN.vertex(106, 150, 0, imgIN.width, imgIN.height);
quadIN.vertex(-106, 150, 0, 0, imgIN.height);
quadIN.endShape();
//END PShape quadIN
//START PShape quadOUT
quadOUT = createShape();
quadOUT.beginShape();
quadOUT.texture(imgOUT);
quadOUT.vertex(-106, -150, 0, 0, 0);
quadOUT.vertex(106, -150, 0, imgOUT.width, 0);
quadOUT.vertex(106, 150, 0, imgOUT.width, imgOUT.height);
quadOUT.vertex(-106, 150, 0, 0, imgOUT.height);
quadOUT.endShape();
//END PShape quadOUT
}
void draw() {
background(0);
//START shape quadIN
pushMatrix();
translate(width / 2, height / 2, -5);
float startAngle = -180;
float angle = frameCount*-0.5;
rotateY(radians(startAngle+angle));
fill(#0768ED);
circle(150, 100, 50);
shape(quadIN, 0, 0);
popMatrix();
//END shape quadIN
//START shape quadOUT
pushMatrix();
translate(width / 2, height / 2, 5);
rotateY(radians(angle));
fill(#FAF30A);
circle(150, 100, 50);
shape(quadOUT, 0, 50);
popMatrix();
//END shape quadOUT
}
Now it is even more of an enigma lol.