We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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.
Answers
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.
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 usetranslate()
andscale()
to place it and size it to a specified point.Can you take a look at this:
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.
Try this:
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.