#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Shape rotation axis

edited October 2013

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.

Tagged:

• Hello fean,

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.

• 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);
}

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.

• edited October 2013 Answer ✓

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();
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.