Two Kinds of 3D

I am in no way a great artist. Sure, I can cobble something together if necessary, but most of the time I'd prefer to farm my art work out to someone else. However, since artists can be fickle, I've been working on improving my art skills, so that one day I can truly be a one-man design house.

For my latest app, I found it necessary to create some 3D graphics, which was a challenge because I'm not terribly good at creating 2D graphics, so adding an entire extra dimension was quite daunting. Fortunately what I was doing wasn't too complicated, but it still required two entirely different techniques, which is surprising since all I wanted to do was flip two things: a coin, and a playing card.

Flipping a coin and flipping a card actually aren't as similar as one would expect at first glance. Whereas a coin is always either heads or tails, a card has 52 different possibilities, and although it's relatively flat, a coin is a full 3D object and a card is more or less a plane.

The coin took a bit of learning, but was fairly simple. All I had to do was create the appropriate model in Blender, skin it, create a simple rotation animation, and then output the frames. Ultimately, drawing the faces of the coin took longer than creating the animation.

The card was a different matter, though. With 52 possibilities, it would've been far too time-consuming and required too much storage space(although that's a relatively small matter nowadays) to pre-render every card, so I had to make them during run time. Luckily, there are a few tricks available to make things easier.

Since a playing card is roughly rectangular, and fairly thin, it can be treated as a 2D rectangle for rotation purposes, and one way to fake rotation of a rectangle is to simply change its scale in one axis: as it rotates, less and less is visible, so shrinking it in one axis gives the same general effect. But, it still won't look quite right. As a rectangle rotates, one edge gets closer to the viewer, and the other edge gets further away. To simulate that effect, you can subtly skew the rectangle as it 'rotates' so that the 'forward' edge is slightly lower than the 'rear' edge. It took a little tweaking, and a bit of math to make sure the card rotated around its midpoint, but with those two tricks, achieving the desired effect wasn't terribly complex. Generating the appropriate faces was kind of a pain, but once I had that down, it was a simple matter of swapping the back of the card for the front while it was midway through its rotation (and thus scaled down to 0) and then reversing the process.

All in all, I'd say I prefer the Blender method for its simplicity, but using trickery and a little math to flip the card was a lot more satisfying.