11,434,520 members (56,602 online)
Tip/Trick

Hypotrochoid / Spirograph

, 21 Sep 2013 CPOL
 Rate this:
A simple program to draw hypotrochoids with C#

Introduction

This simple program draws hypotrochoids, the patterns the toy spirograph makes.

As we all know, to draw a circle using a radius and an angle, we use the formula:

```x=radius * cos(angle);

So if we draw points at `x,y` as we change the angle from `0 `to `2PI`, we will draw a circle. This is equivalent pinning a `string `to a point, tying a pencil to the far end then carefully moving the pen in a circle with the `string `taut. Or instead of `string`, we could pin something solid to the table. What if we pinned a second rod to the end of the first, stuck a pen through a hole in the 2nd rod then moved the 1st circle at one speed when we moved the second circle faster, all the while keeping pen on paper. You would be adding two rotating circles together. The math is:

```x=R1 * cos(speed1*A1) + R2 * cos(speed2*A2);
y=R1 * sin(speed1*A1) + R2 * sin(speed2*A2);   ```

To add a third circle, just add a third term. Next, we don't always want to neatly line up all the rods in a row straight up. To let each rod start at any angle, add a phase to the angle:

```x=R1 * cos(speed1*A1 + phase1);
y=R1 * sin(speed1*A1 + phase1); ```

This little program lets you enter as many wheels as you want in a grid, and draw the pattern.

Points of Interest

Here is the main drawing loop. It draws short line segments from each calculated point. To make sure the ends connect, it saves the location of the first point calculated and joins it after the main loop is completed.

```private void DrawHypotrochoid(PaintEventArgs e)
{
Graphics g = e.Graphics;

if ( dataGridViewParms.RowCount > 0 )
{
int i;
int max;
// current angle we are calculating with,
// goes all the way around one circle
double angle;
double step;
// how big do we step around the circle.
// smaller steps make a smoother drawing
double twoPI;
double rx, ry; // where the next point is, floating point
double scale;  // arbitrary scaling factor chosen by user
// cx and cy are used to move the drawing to the center of the panel
int x, y, cx, cy;
int fromX=0, fromY=0;  // where we drew the previous point
// save the first point so we can neatly connect the
// last segment of the curve up.
int finalX = 0, finalY = 0;
// when calculating the first point we don't draw it, we just save it.
Boolean firstLine = true;
Pen pen=new Pen(mainColour);
// to hold the parms from the grid
// don't want to convert them in an inner loop!
double[] speed = new double[dataGridViewParms.RowCount];
double[] phase = new double[dataGridViewParms.RowCount];

// clear the panel
g.FillRectangle(Brushes.White, 0, 0, panelDraw.Width, panelDraw.Height);
Cursor.Current = Cursors.WaitCursor;
// get the parms from the grid into doubles
max = dataGridViewParms.RowCount - 1; // don't process the blank row at the end of the grid
for ( i=0; i < max; i++ )
{
speed[i] = double.Parse(dataGridViewParms.Rows[i].Cells[1].Value as string);
phase[i] = double.Parse(dataGridViewParms.Rows[i].Cells[2].Value as string);
}

pen.Width = int.Parse(textBoxLineWidth.Text);
scale = double.Parse(textBoxScale.Text);
twoPI=Math.PI * 2.0;
// twoPI radians = 360 degrees = one circle
step = twoPI / double.Parse(textBoxSteps.Text);
cx = panelDraw.Width / 2;
cy = panelDraw.Height / 2;
// loop around one full circle
for (angle = 0.0; angle < twoPI; angle += step)
{
rx = 0.0;
ry = 0.0;
// each line in the grid is like adding a wheel to a spirograph toy,
// we just add up where each "wheel" move the point
for (i = 0; i < max; i++)
{
rx += radius[i] * Math.Cos(speed[i] * (angle + phase[i]));
ry += radius[i] * Math.Sin(speed[i] * (angle + phase[i]));
}

// convert our double to int int that fits nicely on our panel
rx *= scale;
ry *= scale;
x = (int)rx + cx;
y = (int)ry + cy;
if (firstLine)
{
// save this point
finalX=fromX = x;
finalY=fromY = y;
firstLine = false;
}
else
{
// draw from the last point to the new point
g.DrawLine(pen, fromX, fromY, x, y);
fromX = x;
fromY = y;
}
}

// and draw the very last connecting segment
g.DrawLine(pen, fromX, fromY, finalX, finalY);

Cursor.Current = Cursors.Default;
}
}```

History

• Initial version

Share

Software Developer (Senior)
Professional Programmer living in Beautiful Vancouver, BC, Canada.

 -- There are no messages in this forum --
Web03 | 2.8.150428.2 | Last Updated 21 Sep 2013