HowTo turn a good idea in a bad project

Introduction

First of all, remember: this is not the best way to make a Thumb Rotator!!! And now let's explain what a ThumbRotator is. It is a program wich you tell where are your pictures, and it will show them rotating slowly around an ellipse, pretending they are on a 3D space, simulating a mirror on the floor, using fake lighting alghorithms...

In this article there is no DirectX, OpenGL and something like it around.

Download Screenshot

Download Project

First Step

First of all, we will arrange the images around an ellipse. To obtain the - let's say - 10 points, having x0, y0 for the center of the screen, and R1 and R2 as great and little radius (it's an ellipse!)

for (int angle=0; angle<360; angle+=36)
{
   double dAngle=DEGREE_TO_RADIANS(angle);
   int x=x0+R1*cos(dAngle);
   int y=y0-R2*sin(dAngle);
   // do something with the x,y - for example, draw the image (scaled!)
}

Animate!

To animate, simply use a timer. And for every step, add some increment to the angle of every image. Take a look at the code in the zip file!

Add perspective

Two simple tricks. First: draw images from top Y position to bottom. In an ellipse-arranged-thumb-rotator this works fine. Second: draw scaled from top Y position to bottom. Images on the top have to be smaller than images on the bottom.

Add lighting effect

To draw the shadow/fading/upside-down image on the bottom, simply follow these steps:

1. create a copy of the image

2. make it upside-down

3. for every pixel in the copied image, change the alpha value according to this rule, scaling linear: 255 to the top (no transparence) 0 to the bottom (maximum transparence)

Make images on the top darker. Simply draw a black, semi-transparent rectangle on them!!!

Interact with the mouse

Monitor your mouse while it is being moved!. If it's moving near the center, there should be no rotation. When the mouse is on the left, make the rotation from left to right. When the mouse is on the right, make the rotation inverse.

Every time you draw an image, remember it's position. So, while mouse is moving you can perform the "hit test". The "under mouse pointer" image has full light, no darker effect on it (remember the previous paragraph).

It's all

Have fun. Remember, this is not the best way to do it, but it works! :)

bye