A Little Geometry The increasing capabilities of computer graphics systems has left many o

---
Master Index Current Directory Index Go to SkepticTank Go to Human Rights activist Keith Henson Go to Scientology cult

Skeptic Tank!

A Little Geometry The increasing capabilities of computer graphics systems has left many of us in the dust. It's great to be able to run dazzling applications or to doodle with a "paint" program, but many of us find it difficult to design appealing images of our own. Becoming an artist is perhaps a bit more than most of us are willing to take on! It is important to remember, however, that computers are wonderful number-crunchers. With a little application of plane geometry, you can have the computer take on much of the work for you-- and after all, isn't that why we have computers in the first place? A complete review of plane geometry is a bit beyond the scope of this text. However, I'm going to run through some of the things I think you'll find most useful. I'd also like to suggest that you might dig out your old textbooks or rummage through your local used book store. It may have seemed like a dry subject at the time, but when you can watch the results growing on your computer screen, you will have a much better idea of how geometry can be useful to you-- and it can be surprisingly fun, too! In geometry talk, a "point" doesn't have any actual size. In our case, we want to apply geometry to physical reality, namely the computer screen. As far as we're concerned, a "point" will be an individual graphics dot, also called a "pel" or "pixel" (for "picture element"). We can safely dispense with such formalities for our applications, for the most part. The most important thing about a point is that it has a location! Ok, that may not seem staggering, but it happens that there are a number of ways of specifying that location. The most common method is called the Cartesian coordinate system. It is based on a pair of numbers: X, which represents the distance along a horizontal line, and Y, which represents the distance along a vertical line. Consider the CGA in SCREEN 2, for instance. It has a coordinate system where X can be 0 - 639 and Y can be 0 - 199. The points are mapped on kind of an invisible grid. The Cartesian coordinate system makes it easy to visualize how a given point relates to other points on the same plane (or screen). It is particularly useful for drawing lines. Horizontal and vertical lines become a cinch: just change the X value to draw horizontally, or the Y value to draw vertically. Squares and rectangles (or boxes) can be formed by a combination of such lines. You can define an area of the screen in terms of an imaginary box (as GET and PUT do) with nice, clean boundaries. When we get to diagonal lines, it's a bit more of a nuisance, but still easy enough with the proper formula. That means we can do triangles too. Curves are worse... when it comes to even a simple circle or ellipse, the calculations start to get on the messy side. For things like that, though, there is an alternative. Another way of describing the location of a point is by Polar coordinates. In Cartesian coordinates, the location is specified by its horizontal and vertical distances from the "origin" or reference point, (0,0). In Polar coordinates, the location is specified by its distance and angle from the origin. Think of it as following a map: Cartesian coordinates tell you how many blocks down and how many blocks over the point is, whereas Polar coordinates tell you in which direction the point is and how far away it is "as the crow flies". The Polar coordinate system is great for describing many kinds of curves, much better than Cartesian. For example, a circle is defined as all of the points at a given (fixed) distance from a center point. Polar coordinates include both a distance and an angle, and we've already got the distance, so all we need to do is plot points at all of the angles on a circle. Technically, there is an infinite number of angles, but since our points don't follow the mathematical definition (they have a size), we don't have to worry about that. Let me digress for a moment to talk about angles. In BASIC, angles are specified in "radians". People more often use "degrees". Fortunately, it isn't hard to convert from one to the other. Both may be visualized on a circle. In radians, the sum of the angles in a circle is twice pi. In degrees, the sum of the angles is 360. That's something like this: 90 deg, 1/2 * pi rad /---|---\ / | \ / | \ 180 degrees |___ . ___| 0 deg, 0 rad; or... pi radians | | 360 deg, 2 * pi rad \ | / \ | / \---|---/ 270 deg, 3/2 * pi rad Ok, so that's a grotesquely ugly circle! Hopefully it shows the important thing, though. Angles start at zero on the extreme right and get larger as they work around counter-clockwise. The places marked on the "circle" are places where lines drawn horizontally and vertically through the center intersect the outside of the circle. These serve as a useful reference point, especially in that they help show how the angles can be construed from a Cartesian viewpoint. So much for angles. I'll go into conversion formulae, the value of pi, and other good junk a bit later on. Right now, let's get back to our discussion of Polar coordinates. I've explained how the Polar system makes it easy to draw a circle. Since you can vary the range of angles, it's equally simple to draw an arc. If you wanted to make a pie chart, you might want to join the ends of the arcs to the center of the circle, in which case you'd keep the angle constant (at the ends of the arc) and plot by changing the distance from zero to the radius. Circles are also handy for drawing equilateral polygons... you know, shapes with sides of equal length: triangle, square, pentagon, hexagon, etc. In this case, the best features of the Cartesian and Polar systems can be joined to accomplish something that would be difficult in either alone. The starting point for these polygons is the circle. Imagine that the polygon is inside a circle, with the vertices (pointy ends, that is, wherever the sides meet) touching the edge of the circle. These are equilateral polygons, so all of the sides and angles are the same size. Each of the vertices touches the circle, and each does it at exactly the same distance from each other along the arc of the circle. All of this detail isn't precisely necessary, but I hope it makes the reasoning a bit more clear! The circle can be considered as being divided by the polygon into a number of arcs that corresponds to the number of vertices (and sides) the polygon has. Think of a triangle inside a circle, with the tips all touching the circle. If you ignore the area inside the triangle, you will see that the circle is divided into three equal arcs. The same property is true of any equilateral polygon. As a matter of fact, as the number of vertices goes up, the circle is partitioned into more, but smaller, arcs... so that a polygon with a large enough number of vertices is effectively a circle itself! Anyway, the important thing is the equal partitioning. We know how many angles, be they degrees or radians, are in a circle. To get the points of a polygon, then... well, we already know the "distance" part, that's the same as the radius. The angles can be calculated by dividing the angles in the whole circle by the number of vertices in the desired polygon. Trying that case with the triangle, assuming a radius of 20 (why not), and measuring in degrees, that would give us the Polar points (20, 0), (20, 120), (20, 240). To make this a triangle, we need to connect the points using lines, which is easy in Cartesian coordinates. Since the computer likes Cartesian anyway, we just convert the Polar coordinates to Cartesian, draw the lines, and viola! That's essentially the method used by the G#Polygon routines. It's very simple in practice, but I haven't seen it elsewhere... probably because people forget about the Polar coordinate system, which is what makes it all come together. Polar coordinates also have simple equations for figures that look like daisies, hearts, and other unusual things. See "Equations, Etc" and ROSES.BAS for more information. On a side note, the Cartesian system isn't used by all computers, although it's the most common. Cartesian coordinates are the standard for what is called "raster" displays. The Polar coordinate system is used on "vector" displays. One example of a vector display that you may have seen is the old Asteroids video arcade game. They tend to be used for drawing monochrome "framework" pictures where the image must be very sharp (unlike in raster images, the diagonal lines aren't jagged, since there's no raster "grid"). In this section, I'm going to list a number of equations and so forth. Some of them will be useful to you in experimenting with Polar coordinates. Some of them provide formulae for things that are already in GRAFWIZ, but which you might like to understand better. Some of them are just for the heck of it... note that not all of this information may be complete enough for you to just use without understanding it. One problem is... if you try to draw a circle, for instance, it will come out looking squashed in most SCREEN modes. Remember we said our points, unlike mathematical points, have a size? In most graphics modes, the points are effectively wider than they are high, so a real circle looks like an ellipse. Another problem is that these equations are based on an origin of (0,0) which is assumed to be at the center of the plane. In our case, (0,0) is at the upper right edge, which also makes the Y axis (vertical values) effectively upside-down. This isn't necessarily a problem, but sometimes it is! Adding appropriate offsets to the plotted X and Y coordinates often fixes it. In the case of Y, you may need to subtract the value from the maximum Y value to make it appear rightside-up. The displayed form of these equations may contain "holes", usually again because the points have a size, and/or since we try to use integer math to speed things up. If the screen had infinite resolution, this would not be a problem... meanwhile (!), getting around such problems takes fiddlin'. There are other problems, mostly due to forcing these simplified-universe theoretical equations into practical use. It's a lot easier to shoehorn in these simple equations than to use more accurate mathematical descriptions, though... a -lot- easier. So a few minor quirks can be ignored! With those disclaimers, here's the scoop on some handy equations. Polar coordinates may be expressed as (R, A), where R is radius or distance from the origin, and A is the angle. Cartesian coordinates may be expressed as (X, Y), where X is the distance along the horizontal axis and Y is the distance along the vertical axis. Polar coordinates can be converted to Cartesian coordinates like so: X = R * COS(A) Y = R * SIN(A) Angles may be expressed in radians or degrees. BASIC prefers radians. Radians are based on PI, with 2 * PI radians in a circle. There are 360 degrees in a circle. Angles increase counter-clockwise from a 3:00 clock position, which is the starting (zero) angle. Angles can wrap around: 720 degrees is the same as 360 degrees or 0 degrees, just as 3:00 am is at the same clock position as 3:00 pm. Angles may be converted between degrees and radians as follows: radians = degrees * PI / 180 degrees = radians * 180 / PI The value PI is approximately 3.14159265358979. For most graphics purposes, a simple 3.141593 should do quite nicely. The true value of PI is an irrational number (the decimal part repeats forever, as near as anyone can tell). It has been calculated out to millions of decimal points by people with a scientific bent (and/or nothing better to do)! Line Drawing: One of the convenient ways of expressing the formula of a line (Cartesian coordinates) is: Y = M * X + B Given the starting and ending points for the line, M (the slope, essentially meaning the angle of the line) can be determined by: M = (Y2 - Y1) / (X2 - X1) The B value is called the Y-intercept, and indicates where the line intersects with the Y-axis. Given the ingredients above, you can calculate that as: B = Y1 - M * X1 With this much figured out, you can use the original formula to calculate the appropriate Y values, given a FOR X = X1 TO X2 sort of arrangement. If the slope is steep, however, this will result in holes in the line. In that case, it will be smoother to recalculate the formula in terms of the X value and run along FOR Y = Y1 TO Y2... in that case, restate it as: X = (Y - B) / M Keep an eye on conditions where X1 = X2 or Y1 = Y2! In those cases, you've got a vertical or horizontal line. Implement those cases by simple loops to improve speed and to avoid dividing by zero. Circle Drawing: The Cartesian formula gets messy, especially due to certain aspects of the display that are not accounted for (mainly that pixels, unlike theoretical points, have a size and shape which is usually rectangular). The Polar formula is trivial, though. The radius should be specified to the circle routine, along with the center point. Do a FOR ANGLE! = 0 TO 2 * PI! STEP 0.5, converting the resulting (Radius, Angle) coordinates to Cartesian, then adding the center (X,Y) as an offset to the result. The appropriate STEP value for the loop may be determined by trial and error. Smaller values make better circles but take more time. Larger values may leave "holes" in the circle. Polygon Drawing: I've already discussed that, so I'll leave it as an exercise... or of course you can examine my source code if you register GRAFWIZ! The polygon routines are in BASIC, except for the line-drawing parts. Flower Drawing: This sort of thing would be rather difficult to do using strictly Cartesian methods, but with Polar coordinates, no problem. Here we calculate the radius based on the angle, using something like: FOR Angle! = 0 TO PI! * 2 STEP .01 (a low STEP value is a good idea). The radius is calculated like so: Radius! = TotalRadius! * COS(Petals! * Angle!) The Petals! value specifies how many petals the flower should have. If it is odd, the exact number of petals will be generated; if even, twice that number will be generated. These figures are technically called "roses", although they more resemble daisies. Try the ROSES.BAS program to see how they look. Other Drawing: Experiment! There are all sorts of interesting things you can do with the Polar coordinate system in particular. Dig up those old Geometry texts or see if your Calculus books review it. If you've kept well away from math, try your local library or used book store.

---

E-Mail Fredric L. Rice / The Skeptic Tank