Issue #5 - July-October 2000

2 Dimensional Rotation

By Matthew R. Knight <horizonsqb@hotmail.com>

If you have visited the NeoBASIC (http://www.neozones.com) discussion board lately, then I'm sure I need not even mention that the knowledge required for two-dimensional rotation is in sudden demand. I have thus taken it upon myself to write a tutorial of this nature, aiming to introduce the basic concepts and mathematical formulas behind this most interesting field of graphics programming.

Formulas for Two-Dimensional Rotation

In a two-dimensional setting, it is easy to rotate a coordinate pair (defined by an x value and a y value) about a point. The key to two-dimensional rotation, however, is that the rotation must be about the origin of the coordinate system. Initially, this seems like a severe limitation when using QuickBASIC, because the upper left-hand corner of the screen is the physical origin of the screen's two dimensional coordinate system.

Fortunately, there is a way around this. With some simple programming, we will effectively be able to support two coordinate systems. These coordinate systems are the physical coordinate system and the view coordinate system. By creating two variables containing the x and y location on the screen which we require to serve as the origin, and adding those x and y values to the values we obtain from our calculations relative to the physical origin, we can rotate a coordinate pair around literally any point on the screen. If this seems a little fuzzy at the moment, fear not, an example program will follow shortly! ^_^

In a two dimensional coordinate system, you can rotate coordinate pairs in either a clockwise or counterclockwise direction. Simple trigonometric algorithms are used to rotate these coordinate pairs. These formulas are as follows:

x = (x' * cos(angle)) + (y' * sin(angle))
y = (y' * cos(angle)) - (x' * sin(angle))

where x' and y' are the values of x and y prior to transformation.

When describing the amount of rotation desired, and angle argument is used in the equations above. For example, if you wanted a 45-degree clockwise rotation, and angle parameter of -45 degrees would be used. An angle parameter of 45 degrees would be used for counterclockwise rotation.

The trigonometric functions provided by QuickBASIC (SIN, COS, etc.) require the angle argument to be in radians. Because it is easier and more natural to think in degrees, a simple conversion can be used to convert degrees to radians.

Radians = Degrees * .017453
Degrees = Radians * 57.29577

An Example Coded in QB

The following example program will simply rotate a pixel around a pre-defined virtual-origin. It is fully commented, and should thus be very simple to understand.

You must, however, consider several issues when doing this seemingly simple example. The first issue is that in order to make a circular pattern (as opposed to an elliptical pattern) you must use an aspect ratio. For the video mode in use, multiplying the rotated y coordinate by .75 works well. The use of .75 is due to the aspect ratio of the pixel. The second issue is the proper use of variable types. When using the trigonometric functions, the angle argument must be expressed as type single and in radians. If this is not done properly, the rotational results will be unpredictable.

SCREEN 9  'Now what on Earth does this line do?! ;)

VX = 250  'Virtual-origin X coordinate.
VY = 150  'Virtual-origin Y coordinate.

X = 100
Y = 100

Rotation = 0  'The rotation counter.
Angle = -5 * .017453

  OldX = X
  OldY = Y
  X = (OldX * COS(Angle)) + (OldY * SIN(Angle))
  Y = (OldY * COS(Angle)) - (OldX * SIN(Angle))
  PSET (X + VX, (.75 * Y) + VY), 15
  CIRCLE (X + VX, (.75 * Y) + VY), 5, 15
  Rotation = Rotation + 5
LOOP WHILE Rotation < 360

And there you have it! A nice piece of example code, and a concise 65 lines of techno-babble! ^_^ Have fun with your new knowledge! ^_^