# 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:** 2

<div class="post-metadata">

**Author:** ![Gus\_Fermin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gus_fermin/32/5851_2.png) [@Gus\_Fermin](https://discourse.processing.org/u/Gus_Fermin)\
**Post date:** [May 22, 2022, 9:57pm UTC](https://discourse.processing.org/t/flipcard-based-on-topics-textures-texturequad-example-front-and-back/37024/2 "2022-05-22T21:57:52Z")

</div>

Hi,

I got it working but I am not sure I understand why… ☹  
I had to add a 2nd translation to each `PShape` quad before displaying them with `shape()`. What I don’t understand is that that 2nd translation in both cases is:  
translate(0, 0, -2); for the one in the back  
translate(0, 0, -2); for the one in the front

When I removed the second translations and added that Z value in the last argument of the 1st translation, it does not work. _What is the need for the second translation?  
This is super odd, **I solved it, but I do not understand why** , so I am back at square one._

Here is my new reduced / **working `void draw()`**:

Thank you for looking.

```auto
void draw() {
  background(0);

  //START shape quadIN
  push();
  translate(width/2, height/2, 0); //===> 1st translation
  rotateY(radians(frameCount*0.5));
  translate(0, 0, -10); //===> 2nd translation
  shape(quadIN, 0, 0);
  pop();
  //END shape quadIN

  //START shape quadOUT
  push();
  translate(width/2, height/2, 0); //===> 1st translation
  rotateY(radians(frameCount*0.5));
  translate(0, 0, 10); //===> 2nd translation
  shape(quadOUT, 0, 0);
  pop();
  //END shape quadOUT
}

```

---

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