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

**URL:** <https://discourse.processing.org/t/flipcard-based-on-topics-textures-texturequad-example-front-and-back/37024>\
**Category:** Beginners\
**Created:** [May 22, 2022, 8:08pm UTC](https://discourse.processing.org/t/flipcard-based-on-topics-textures-texturequad-example-front-and-back/37024 "2022-05-22T20:08:30Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 23, 2022, 11:30am UTC](https://discourse.processing.org/t/flipcard-based-on-topics-textures-texturequad-example-front-and-back/37024/8 "2022-05-23T11:30:29Z")

</div>

Hello,

Pixel manipulation can be fun!

> [@Gus\_Fermin](#):
>
> Do you happen to know why is that the case?

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!**
>
> ```auto
> 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/6/56081fefb653aedbff001f7b31f0e7b96faacacb.png)

Another topic of interest with textured shapes:  
_[Faster Rendering Techniques in P3D?](https://discourse.processing.org/t/faster-rendering-techniques-in-p3d/31465)_

`:)`

---

_[View the full topic](https://discourse.processing.org/t/flipcard-based-on-topics-textures-texturequad-example-front-and-back/37024)._