3d animation to flip a card

Processing Coding Questions
1

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 :((

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;
      }
    }
  }
}
2

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

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;
}
//
3

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

4

Put the boolean and the angle a1 in the class Card

5

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

6

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

7

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

1 Like
8 


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;
}
//
1 Like
9

all of this is go on class card right?

1 Like
10

Yes it is