Shape rotation axis

fean

I'm trying to create a memory card game with the size(w, h, P3D) set so that I can use 3D effects. I have populated an ArrayList with instances of Card objects. The Card object represents a card and holds properties of that certain card, like it's coordinates or which color the backside has.

When the user clicks the card I want to turn the card around so that the user can see what's on the other side and then turn it back when it's the wrong card. This is what I use to draw a card:

    beginShape(QUADS);

    if (state == CardState.IN_OPEN_TRANSITION) {
      rotateY(map(step.getValue(), 0, 100, 0, PI));
    } else if (state == CardState.IN_CLOSE_TRANSITION) {
      rotateY(map(step.getValue(), 0, 100, PI, 0));
    } else if (state == CardState.OPEN) {
      rotateY(PI);
    }

    fill(0,200,0);
    vertex(X, Y, -1);
    vertex( X + tileSizeX, Y, -1);
    vertex( X + tileSizeX,  Y + tileSizeY, -1);
    vertex(X,  Y + tileSizeY, -1);
    fill(200,0,0);
    vertex(X, Y, 0);
    vertex( X + tileSizeX, Y, 0);
    vertex( X + tileSizeX,  Y + tileSizeY, 0);
    vertex(X,  Y + tileSizeY, 0);
    endShape(CLOSE);

Every time the draw() on a card is being called it also makes a call to move a stepper one step ahead. The stepper creates an easing effect on the rotation so that the effect looks natural. The problem is that axis for this effect doesn't seem to lie in the X center of the card but on X <= 0. So the rotation now looks like if the card is falling away to the left. I was wondering what am I doing wrong here, I'm new to processing and 3D effects so I'm all but an expert.

sableRaph

Hello fean,

It might help you to read those tutorials:

Coordinate System and Shapes

http://processing.org/tutorials/drawing/

2-D Transformations

http://processing.org/tutorials/transform2d/

And finally...

P3D

http://processing.org/tutorials/p3d/

You can start with this last one if you are in a rush, but they are all recommended reading :)

Basically, it's all a question of how you deal with coordinate systems.

fean

Thank you for your help! :)

So basically what the tutorials say is that it's best practice to create a shape directly on (0, 0, 0) and then use translate() and scale() to place it and size it to a specified point.

Can you take a look at this:

    pushMatrix();

    scale(tileSizeX / 2, tileSizeY / 2);
    translate(X + (tileSizeX / 2), Y + (tileSizeY / 2));

    if (state == CardState.IN_OPEN_TRANSITION) {
      rotateY(map(step.getValue(), 0, 100, 0, PI));
    } else if (state == CardState.IN_CLOSE_TRANSITION) {
      rotateY(map(step.getValue(), 0, 100, PI, 0));
    } else if (state == CardState.OPEN) {
      rotateY(PI);
    }

    beginShape(QUADS);   
    fill(0,200,0);
    vertex(-1, -1, -1);
    vertex(1, -1, -1);
    vertex(1,  1, -1);
    vertex(-1,  1, -1);
    fill(200,0,0);
    vertex(-1, -1, 0);
    vertex(1, -1, 0);
    vertex(1,  1, 0);
    vertex(-1,  1, 0);
    endShape(CLOSE);

    popMatrix();

In your opinion, is this what should do the job? Or am I still missing something?

Because when using the code above nothing is being drawn. The canvas stays empty.

sableRaph

Try this:

int tileSizeX = 200;
int tileSizeY = 200;

void setup() {
  size(500,500,P3D);
}

void draw() {
  
  background(100);

  pushMatrix();
 
  translate( width/2, height/2);
  scale(tileSizeX / 2, tileSizeY / 2);
   
  rotate(frameCount*0.02, frameCount*0.01, frameCount*0.05, frameCount*0.001);
  
  noStroke();
  beginShape(QUADS);   
  fill(0,200,0);
  vertex(-1, -1, -1);
  vertex(1, -1, -1);
  vertex(1,  1, -1);
  vertex(-1,  1, -1);
  fill(200,0,0);
  vertex(-1, -1, 0);
  vertex(1, -1, 0);
  vertex(1,  1, 0);
  vertex(-1,  1, 0);
  endShape(CLOSE);
   
  popMatrix();

}

Note: whenever possible, try to make a minimal version of your code that fits in a small sketch (keeping only the relevant parts). It makes it easier for others to help you.