Matrix Transforms to Flip Image

I am trying to flip an image so that it looks as though it is rotating on its X-axis. Imagine having a playing card and gradually turning it so that you end up looking at it edge on. The Javascript/HTML 5 canvas element documentation assumes you have a clue about how transformation matrices work; i.e., m11, m12, m21 ,…

Do I need to learn about matrix multiplication, or is there a “do this to get that effect for dummies” tutorial someplace.

In my case I have a 500x500 image starting at 0,0 that I want to rotate on an axis of (0, 249) to (499, 249). I don’t even know the vocabulary to do a proper search.

The easiest way to accomplish that effect is to ignore transformation matrices entirely.

Scale the image in the y-axis (only) in incremental steps, reducing it from 500 pixels to 450 to 400, until you get to a single pixel tall. Then switch your image to show the backside, and start scaling back up until you reach 500 pixels in height. It will look as though the image has spun in three dimensions, but the only transform you’ve done is a simple one-dimensional scaling.

And to best make it look like it’s rotating, scale it as the cosine of phi, with phi varying linearly, rather than having its width varying linearly directly.

As usual, SDMB rocks. I suppose I could scale x as well to make it look like the far edge is receding.

OK, that works great!!

Ooh, neat. Care to post a demo? :slight_smile:

While your problem has been solved, the answer is actually pretty easy.

When working with matrixes – specifically, a 2D matrix – the assumption is that you have a square like this. Your matrix tells it where you want that square to end up. You write the position of points B and C. You can drag them and the square will stretch, rotate, and flip around as you do so, but always maintaining point A at the origin (0,0). If you move point C from 1 to -1, the image will flip horizontally.

The following matrix:


| 1 0 | = C is at (1,0)
| 0 1 | = B is at (0,1)

Produces no transformation. The following one:


| -1 0 | = C is at (-1, 0)
|  0 1 | = B is at (0,1)

Flips it horizontally.

Now, since point A always stays at (0,0), you can’t slide the image around. You can rotate, skew, stretch, etc. but one corner is always stuck on the origin. So what they do is, if they want to freely transform an image that is in 2D is work in 3D. If I have a cube sitting on a table and I put a 2D image on the face of the cube that’s lifted off the table by the body of the cube, while the corner of the cube that’s sitting on the table is stuck at (0,0), the face that is raised can be moved around freely. When I go to extract the image, I just slice off the top face at whatever (X, Y) coordinates it was at and display it.

If I’m working with a 3D cube and I just want to flip, not move, the image, all I have to do is ignore the third column and row.



Cube with no transformation:

| 1 0 0 | 
| 0 1 0 |
| 0 0 1 |

Cube flipped horizontally:

| -1 0 0 | 
|  0 1 0 |
|  0 0 1 |

Possibly they’ll have the bottom-right value be 0 rather than 1 as the default, which is the same as compacting the cube down to being flat like a piece of paper. If so, that’s fine. Just put 0 in there.

Also, I don’t know about that particular API, but you may find that the effect may look better if you do it the “right” way with matrices; if it’s genuinely rendering in 3D you’ll probably get better texture sampling than just squashing the image, and possibly a lighting effect too.
(For just flipping a flat object, you can fake a basic lighting effect. Just scale brightness by how far into the rotation you are, minimum brightness when the card is edge on).

roycode.com/flatland. Click on image to start.

Neat :slight_smile: