.NET Reference Guide

Simulating the Spirograph

Last updated Oct 7, 2005.

Simulating the Spirograph toy requires that you learn about a number of different .NET techniques as well as a little bit of math to understand how to draw the curves. A previous article, Drawing Cycloid Curves, covered the math and showed some very simple code that draws Spirograph-like curves. You should read that article if you want to understand more about how these curves work.

The code presented in the previous article works, but it's not very flexible. The biggest problem is that you have to modify the code and recompile if you want to change any of the curve parameters. That doesn't make for a very friendly program. The other problem is that the curve drawing code is embedded in the form code, making it impossible to re-use for other programs. In this article we will create a program with a nicer user interface and move the curve drawing code to its own assembly so that other programs can use it, too.

Creating the User Interface

The Spirograph simulation program (Spiromania) should allow the user to enter all of the curve parameters and the type of curve (epitrochoid or hypotrochiod) to be drawn. A "Go" button draws the curve. Since you can create some interesting images by drawing one curve on top of another, it's useful to have a "Clear" button that will blank the drawing surface rather than having the program clear the canvas before every curve is drawn. The completed user interface is shown below in Figure 56.

I started by setting the initial window size in the Form Designer to 800 by 600. Then I added two Panel controls to the form. I created the top panel, pnlControl, first and set its Dock property to Top. That will cause the panel to extend horizontally across the entire top of the form. The second panel is called pnlDraw. Its Doc property is set to Fill so that it will fill the entire remainder of the form. I set the BackColor property to White.

Adding the controls to the top panel is very simple work. I followed the suggested naming conventions and named the controls as follows:

Control	Name
Fixed circle radius	txtRadiusA
Rolling circle radius	txtRadiusB
Pen distance	txtPenDistance
Points Per Curve	txtPointsPerCurve
Outside	rbOutside
Inside	rbInside
Go button	btnGo
Clear button	btnClear

With that user interface defined, it's time to create the button event handlers. The Go button handler has to get the curve parameters from the input controls and then set up to call the code that actually draws the curve. The first pass at that code, minus the curve drawing call, looks like this:

[C#]

private void btnGo_Click(object sender, System.EventArgs e)
{
	int aRadius;
	int bRadius;
	int distance;
	int PointsPerCurve;
	CurveType ct;

	// Get the parameters
	aRadius = int.Parse(txtRadiusA.Text);
	bRadius = int.Parse(txtRadiusB.Text);
	distance = int.Parse(txtPenDistance.Text);
	PointsPerCurve = int.Parse(txtPointsPerCurve.Text);

	if (rbOutside.Checked)
		ct = CurveType.Epitrochoid;
	else
		ct = CurveType.Hypotrochoid;

	// set up to draw
	using (Graphics g = pnlDraw.CreateGraphics())
	{
		PointF ptOrigin = new PointF(
			pnlDraw.ClientRectangle.Width/2,
			pnlDraw.ClientRectangle.Height/2);

		// Insert call to draw here
	}
}

private void btnClear_Click(object sender, System.EventArgs e)
{
	// Clear the drawing panel.
	using (Graphics g = pnlDraw.CreateGraphics())
	{
		g.Clear(pnlDraw.BackColor);
	}
}

[Visual Basic]

Private Sub btnGo_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGo.Click
 Dim aRadius As Integer
 Dim bRadius As Integer
 Dim distance As Integer
 Dim PointsPerCurve As Integer
 Dim ct As CurveType

 ' Get the parameters
 aRadius = Integer.Parse(txtRadiusA.Text)
 bRadius = Integer.Parse(txtRadiusB.Text)
 distance = Integer.Parse(txtPenDistance.Text)
 PointsPerCurve = Integer.Parse(txtPointsPerCurve.Text)

 If rbOutside.Checked Then
  ct = CurveType.Epitrochoid
 Else
  ct = CurveType.Hypotrochoid
 End If

 ' set up to draw
 Dim g As Graphics = pnlDraw.CreateGraphics()
 Try
  Dim ptOrigin As New PointF( _
   pnlDraw.ClientRectangle.Width / 2, _
   pnlDraw.ClientRectangle.Height / 2)

  ' Insert call to draw here
 Finally
  g.Dispose()
 End Try
End Sub

Private Sub btnClear_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnClear.Click
 Dim g As Graphics = pnlDraw.CreateGraphics()
 Try
  g.Clear(pnlDraw.BackColor)
 Finally
  g.Dispose()
 End Try
End Sub

Other than the call to the drawing code, the biggest thing that the code above lacks is validation of the input parameters. There is no code that checks to see if the values input are actually numbers or that they make sense. The program will throw an exception if you input non-numeric data, and negative or zero values for some of the parameters will surely cause trouble. Those problems are easily solved by adding an ErrorProvider to the form and responding to the individual controls' Validating events. We'll leave that modification for another time.