From Dan Mabbutt,
Your Guide to Visual Basic.
FREE Newsletter. Sign Up Now!

Aug 18 2007

Frequent About Visual Basic contributor Peter Zilahy Ingerman, PhD recently sent me an email with a question about GDI+. The basic requirements are ...

• A ring of 32 circles of uniform diameter such that the 32 circles are each touching the adjacent circles.
• Control over whether a particular circle is displayed.
• Control over the color of the circle if it is displayed.
• Control over whether or not the circle is filled (that is, appears as a disk or a ring of the specified color).
• Lines must connect the centers of the circles; only some of the possible lines will ever be drawn.

After some email back and forth, both Peter and I programmed solutions to the problem and this article contains both solutions. As usual, Peter's program is more sophisticated than mine, but mine is easier to understand. We'll do mine first ... But before that, back to school.

The heart of this problem is drawing a ring of 32 circles.To do that, we need a bit of elementary trigonometry. Trigonometry pops up fairly frequently in graphics programs and it was covered in greater detail in part 2 of the About Visual Basic GDI+ tutorial. That article was focused on the process of drawing a trig function, however, and didn't really explain what the trig functions are. Although it means taking us all back to high school math class, it's important to this article to understand it.

The first thing we need to do is calculate how many circles will fit on the a larger one. This is the first requirement above and is pictured in the illustration below.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

Recall that the circumference of a circle is just Pi times the diameter. If we divide the circumference by 32, we have the diameter of each of the rings:

   Dim c1Circum As Single
   Dim c2Diam As Single
   c1Circum = PI * c1Rad * 2
   c2Diam = c1Circum / 32

Now recall that any circle actually a 360 degree angle. So we can get the angle between two rings by dividing 360 by 32. (I declared it as Double because I'll need that type in a GDI+ function later.)

   Dim segAngle As Double = 360 / 32

At this point, we need that trigonometry. The following illustration shows the definition of the three primary trig functions in the context of a circle and the radius of the circle.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

What we're looking for is a way to calculate point "x" in the illustration for any angle. A little simple math with the definitions results in these statements for the x coordinate and y coordinate of the point with respect to the GDI+ screen origin. c1Rad is the radius of the circle.

   xcoord = c1Rad + c1Rad * Sin(radAngle) + xOffset
   ycoord = c1Rad - c1Rad * Cos(radAngle) + yOffset

Remember that GDI+ uses a forms based coordinate system where the "origin" is in a different corner than you were used to in high school.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

We're almost finished with the math. The only other thing we need to remember is that GDI+ uses radians to measure angles in trig functions, not degrees. So we have to convert our degrees into radians.

   radAngle = PI * totAngle / 180

The rest of the program is fairly standard VB.NET code. The program gets a graphics object, g, for the page. Two arrays control whether a ring is drawn or not and what color it will be. Then the rings are each drawn as the program executes a For-Next loop 32 times. Here's the result:

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------