Rotozoom

A rotozoomer is also a fairly simple effect, but it needs a little math and linear algebra. Basically, what we want to do is to rotate some picture on the screen and as a little bonus, it can zoom too. It’s easiest to imagine it as the screen being rotated over the texture plane. The rotation matrix is:

\left[\begin{array}{cc}\cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \\ \end{array} \right]

We want to step independently in x and y directions, so to get the increments in each direction we represent the coordinates in the plane as \left[ \begin{array}{c} x \\ y \\ \end{array} \right] and multiply the rotation matrix with single steps in each direction. Thus, the step in x is:

\left[\begin{array}{cc}\cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \\ \end{array} \right]\left[ \begin{array}{c} 1 \\ 0 \\ \end{array} \right]=\left[ \begin{array}{c} \cos\theta \\ \sin\theta \\ \end{array} \right]

The step in y is:

\left[\begin{array}{cc}\cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \\ \end{array} \right]\left[ \begin{array}{c} 0 \\ 1 \\ \end{array} \right]=\left[ \begin{array}{c} -\sin\theta \\ \cos\theta \\ \end{array} \right]

For a little extra spice, we multiply these with a scaling factor.

The texture used is from the old Hungarian diskmag The Guide (#1) where I first read about the implementation of this effect. Of course, the increments in each direction are open to experimentation, one can probably derive much nicer effects from this. It’s also funny to see, that cpu cache problems can be observed at some angles, when the pixels on the screen are close to orthogonal to the pixels in the texture so big jumps have to be made in the memory to access each pixel. It seems that java operates at a level pretty close to the cpu.

(later edit: i used a less nsfw texture for this effect, the original can be seen after the fold)

rotozoom.jpg

About these ads

One Response to “Rotozoom”

  1. Vertical voxel « Code and graphics Says:

    […] Code and graphics « Rotozoom […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: