# 3d animation to flip a card

**URL:** https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687
**Category:** Coding Questions
**Created:** [May 29, 2019, 5:49pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687 "2019-05-29T17:49:14Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![minican1997](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@minican1997](https://discourse.processing.org/u/minican1997)
#### Post date: [May 29, 2019, 5:49pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/1 "2019-05-29T17:49:14Z")

</div>

hello i need some help  
i am new in processing and i dont know how to make an animation to flip a card when i click on it  
i need to make a memory card game and to have an flip animation on it  
please help me :((

```auto
Card[] cards;//Array of the cards
PImage[] icons;//Array of PImages -- icons are the faces of the cards

int clickCounter = 0;//counter that counts the clicks

//simply referring to the images, can easily take out the ttp.
String ttp = "ttp://";
String [] filenames = {
"here are image with hyperlink"
};
//loading in the backing image.
PImage backing = loadImage( ttp + "i.imgur.com/zHNyDLX.jpg");

//setting values for the boolean and indicator variables.
boolean one_showing = false;
boolean two_showing = false;
int first_card=-1, second_card=-1;
int win = 0;
void setup() {
  size(490, 620, P3D);
  cards = new Card[16];//setting the amount of items that are going to be in the cards array
  icons = new PImage[8];//setting the amount of items in the PImage array. Which are the 8 cards

  //assigning values to each card in the grid
  int[] values = new int[16];
  for (int i=0; i<icons.length; i++) {
    icons[i] = loadImage(filenames[i]);
    values[2*i] = i;
    values[2*i+1] = i;
  }

  //scrambling the deck of cards
  for (int i=0; i<values.length; i++) {
    int r = int(random(values.length));
    int t = values[i];
    values[i] = values[r];
    values[r] = t;
  }

  //adding all the cards into the array, but it isn't being drawn yet.
  int counter = 0;
  for (int i=0; i<4; i++) {
    for (int j=0; j<4; j++) {
      cards[counter] = new Card (20+115*j, 20+140*i, 105, 130, values[counter], counter++);
    }
  }
  noStroke();
}

void draw() {
  background(#e5e5e5);
  for (int t=0; t<cards.length; cards[t++].draw ());
  fill(0);
  text("Clicks: " + clickCounter, 20, 600);
}

void mouseClicked() {
  if (two_showing) {
    if ( cards[first_card].v == cards[second_card].v )
  
    {
      cards[first_card].hide = true;
      cards[second_card].hide = true;
      println("matched");
    }

    for (int t=0; t<cards.length; cards[t++].face_up = false);
    one_showing = false;
    two_showing = false;
    println("not matching");
    return;
  }

  for (int t=0; t<cards.length; cards[t++].click ());
  clickCounter++;
}

class Card {

  //variable to store all the x,y positions and the width and height.
  float x, y, w, h;

  //variable to keep track of the card value in the array.
  int v, i;

  boolean face_up, hide; 

  //constructor for the card class. It takes the x,y position with the width and height,
  //and the place of the card in the array, and the counter
  Card(float ix, float iy, float iw, float ih, int iv, int ii) {
    x=ix;
    y=iy;
    w=iw;
    h=ih;
    v=iv;
    i=ii;
    face_up=false;
    hide=false;
  }

  void draw() {
    if (!hide) {
      if (!face_up) {
        image(backing, x, y);
      } else {
        image(icons[v], x, y);
      }
      noFill();
      stroke(#353535);
      if (mouseOverCard())
      {
        stroke(#08B3FF);
        rect(x, y, w, h);
      }
    }
  }

  boolean mouseOverCard() {
    return(!hide && mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h);
  }

  void click() {
    if (!hide && mouseOverCard()) {
      face_up = !face_up;
      if (!one_showing) {
        first_card = i;
        one_showing = true;
       
        return;
      }
      if (!two_showing && first_card != i) {
        second_card = i;
        two_showing = true;
        return;
      }
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 29, 2019, 6:12pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/2 "2019-05-29T18:12:50Z")

</div>

as you can see it’s `rotateY`

you could make a boolean variable “rotating” to indicate that the animation is in progress. With half of the animation, change the image. During animation say `a1+=.0099;`

Chrisir

```auto
float a1; 

void setup() {
  size(490, 620, P3D);
  background(0);
  rectMode(CENTER);
}

void draw() {
  background(0); 
  translate(width/2, height/2);
  rotateY(a1); 
  rect(0, 0, 
    200, 400);
  if (a1<PI)
    a1+=.0099;
  else a1=PI;
}
//

```

---

<div class="post-metadata">

### Author: ![minican1997](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@minican1997](https://discourse.processing.org/u/minican1997)
#### Post date: [May 29, 2019, 7:53pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/3 "2019-05-29T19:53:25Z")

</div>

i need for every card to flip not all of them at the same time

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 29, 2019, 7:59pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/4 "2019-05-29T19:59:09Z")

</div>

Put the boolean and the angle a1 in the class Card

---

<div class="post-metadata">

### Author: ![minican1997](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@minican1997](https://discourse.processing.org/u/minican1997)
#### Post date: [May 29, 2019, 8:12pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/5 "2019-05-29T20:12:00Z")

</div>

how? :)) like "this put here and that here "  
how to look the code in the end?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 29, 2019, 9:17pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/6 "2019-05-29T21:17:17Z")

</div>

It’s not too easy since you have an animation going on and the screen is only updated once at the end of draw every time

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 29, 2019, 9:17pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/7 "2019-05-29T21:17:57Z")

</div>

as you can see it’s `rotateY`

you could make a boolean variable “rotating” to indicate that the animation is in progress. With half of the animation, change the image. During animation say `a1+=.0099;`

all in the class so it’s executed only when clicked

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 29, 2019, 9:44pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/8 "2019-05-29T21:44:54Z")

</div>

```auto

float a1; 
boolean animate=false; 
color col=color(255, 2, 2); 

void setup() {
  size(490, 620, P3D);
  background(0);
  rectMode(CENTER);
}

void draw() {
  background(0);
  lights();
  rectMy();
}

// ------------------------------------------------------

void rectMy() {
  pushMatrix();
  if (animate) {
    translate(width/2, height/2);
    rotateY(a1); 
    fill(col); 
    rect(0, 0, 
      200, 400);

    if (a1<PI) {
      a1+=.0099;
      if (a1>PI/2) {
        col=color(0, 0, 255);
      }
    } else {
      a1=PI;
      animate=false;
    }
  }
  // -----------------------------------------------
  else {
    translate(width/2, height/2);
    rotateY(a1); 
    fill(col); 
    rect(0, 0, 
      200, 400);
  }
  popMatrix();
}

void mousePressed() {
  animate=true;
}
//

```

---

<div class="post-metadata">

### Author: ![minican1997](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@minican1997](https://discourse.processing.org/u/minican1997)
#### Post date: [May 29, 2019, 10:30pm UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/9 "2019-05-29T22:30:54Z")

</div>

all of this is go on class card right?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 30, 2019, 2:05am UTC](https://discourse.processing.org/t/3d-animation-to-flip-a-card/11687/10 "2019-05-30T02:05:17Z")

</div>

Yes it is

* * *