Flipcard (based on Topics/Textures/TextureQuad example) Front and Back

Processing Beginners
8

Hello,

Pixel manipulation can be fun!

I don’t have an answer for this… yet.
I am confident that there are members here that can answer this with clarity.

Another exploration of this:

Click here to see code! 
PImage imgIN;
PImage imgOUT;

PShape quadIN;
PShape quadOUT;

boolean toggle;

void setup() {
  size(800, 400, 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.normal(0, 0, 1); // Tried -1 also
  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();
  //quadIN.rotateY(TAU/2);
  quadIN.translate(0, 0, 20);
  //END PShape quadIN

  //START PShape quadOUT
  quadOUT = createShape();
  quadOUT.beginShape();
  //quadOUT.normal(0, 0, 1); //// Tried -1 also
  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();
  //quadOUT.rotateY(TAU/2);
  quadOUT.translate(0, 0, -20);
  //END PShape quadOUT 
  
  //hint(ENABLE_DEPTH_SORT);
  //hint(ENABLE_DEPTH_TEST);
  
  ortho();
}

void draw() 
  {
  background(128);
  //lights();
  
  if(toggle)
    {
    //hint(ENABLE_DEPTH_MASK);
    hint(ENABLE_DEPTH_SORT);
    //hint(ENABLE_DEPTH_TEST);
    println("ENABLE");
    }
  else
    {
    //hint(ENABLE_DEPTH_MASK);  
    hint(DISABLE_DEPTH_SORT);
    //hint(DISABLE_DEPTH_TEST);
    println("DISABLE");
    }
  
  int counter = frameCount%360; //0 to 359 and repeats
  //println(counter);
  
 push();
  translate(width/4, height/2, 0);
  rotateY(counter*(TAU/360)); 
  //noFill();
  //stroke(0);
  rectMode(CENTER);
  push();
  //translate(0, 0, -100);
  rect(0, -100, 200, 50);
  pop();
  
  stroke(255, 255, 0);
  line(-150, 0, 0, 150, 0, 0);
  line(0, -150, 0, 0, 150, 0);
  line(0, 0, -150, 0, 0, 150);
  
  push();
  //translate(0, 0, 1);
  shape(quadIN, 0, 0);
  
  pop();
  push();
  //translate(0, 0, -1);
  shape(quadOUT, 0, 0);
  pop();
 pop();
 
//************************

 push();
  translate(3*width/4, height/2, 0);
  rotateY(counter*(TAU/360)); 
  //noFill();
  //stroke(0);
  rectMode(CENTER);
  push();
  //translate(0, 0, -100);
  rect(0, -100, 200, 50);
  pop();
   
  stroke(255, 255, 0);
  line(-150, 0, 0, 150, 0, 0);
  line(0, -150, 0, 0, 150, 0);
  line(0, 0, -150, 0, 0, 150);
  
  imageMode(CENTER);
  push();
  translate(0, 0, 20);
  image(imgIN, 0, 0);
  
  pop();
  push();
  translate(0, 0, -20);
  image(imgOUT, 0, 0);
  pop();
 pop(); 
  }
  
void keyPressed()
  {
  toggle = !toggle;
  }

A lot of stuff is commented to show what I was trying out.

image
image802×432 76.8 KB

Another topic of interest with textured shapes:
Faster Rendering Techniques in P3D?

:)

1 Like