Click here to Skip to main content
11,504,452 members (70,447 online)
Click here to Skip to main content

Spirograph - Ultrabook Windows 8 Application

, 14 Oct 2012 CPOL 16.7K 15
Rate this:
Please Sign up or sign in to vote.
Ultrabook Windows 8 application that draw amazing spirals known as Spirographs, i.e. geometric drawings, that produces mathematical curves of the variety, technically also known as hypotrochoids and epitrochoids.


Spirograph is a geometric drawing app that utlizes Ultrabook and Windows 8 Features to draws and render beautiful curves of the variety technically known as hypotrochoids and epitrochoids.

Spirograph are curve formed by rolling a circle inside or outside of another circle. The pen, is placed at any point on the rolling circle.

This Ultrabook application allows you to draw spectacular, beautiful symmetric curves called Spirograph by dragging/adjusting (using guestures and touch input) the inner circle inside/outside the big circle.

It also uses Accelerometer and Gyrometer sensor to clear the screen and ambient sensor to adjust the resolution of background.


  • Fun, creative drawing Application. All-ages can enjoy making 100s of colorful swirling, looping patterns.
  • Unleash your inner artist! Even the most complex-looking patterns are easy to make with our intuitive interface.
  • Endless possibilities!
  • Over 3000 unique patterns, unlimited color variations, and lots of customization features.
  • Accessible controls - All options available via touch.
  • Backgorund based on ambient sensor, chages based in settings.
  • Clear Screen/wuoe the screen just by shaking
  • Random Settings Option, allow youto auto generate the settings, including color selection
  • Three Color Modes (Rainbow, Gradient, Simple) Color Wheel to pick any color of choice
  • Pinch for Zoom (uses Guestures)
  • Shake to Erase
  • Background shades based on ambient sensors
  • Save, Share features

Sensors Usage

This application uses the below mentioned sensors.

Accelerometer and Gyrometer sensor: They are used to detect Shaken event, if we are slightly shaking Draw screen is cleared.

Touch Sensor- Touch Sensores are used to draw the spirals on the screen, guestures are used to zoom in zoom out.

Resolution of background is depenedent on ambient sensor

How does it works

The point is drawen on the rolling circle. If the radius of fixed circle is R, the radius of moving circle is r, and the offset of the pen point in the moving circle is O, then the equations of the resulting curve is defined by:

x = (R+r)*cos(t) - O*cos(((R+r)/r)*t)
y = (R+r)*sin(t) - O*sin(((R+r)/r)*t)
(moving circle outside the fixed circle)

x = (R-r)*cos(t) + O*cos(((R-r)/r)*t)
y = (R-r)*sin(t) - O*sin(((R-r)/r)*t)
(moving circle inside the fixed circle)

Equations and Code Functioning

The parametric equation for a circle is

x = R.cos (theta)
y = R.sin (theta)

As 'theta' varies from 0 to 2p this will trace one lap around the circle ('R' is the radius). This is our basic wheel. If we multiply theta by a positive integer this will be equivalent to making the wheel rotate faster. A negative integer will make the wheel rotate in the opposite direction. To create the spirograph patterns we combine two wheels rotating at different speeds, say n1 and n2.

x = R1.cos (n1theta) + R2.cos (n2theta)
y = R1.sin (n1theta) + R2.sin (n2theta)
Here the second wheel of radius R2 makes n2 full turns as it travels n1 times around the inner wheel of radius R1.

These are idealised wheels, when using the object to draw, the radius of the inner wheel would be R1-R2. The other way we differ from the toy is that in the physical version the rates n1 and n2 are determined by the user settings, which are constrained by the wheels' radii.

The starting positions of the wheels can be changed by adding in a phase component: ?;

x = R1.cos (n1(theta+?1)) + R2.cos (n2(t+theta2))
y = R1.sin (n1(t+theta1)) + R2.sin (n2(t+theta2))


For two draw circles the symmetry is |n1-n2| (assuming n1 and n2 have no common factors). If they do have a common factor, say 'k', then the symmetry would be |n1-n2| / k and the algorithm will draw over the same pattern k times.

This is the code which draw the circle

ax = 0; ay =0; az = 0;
 bx = 0; by =0; bz = 0;
 for(int i = 0; i < num_segments; ++i) {
 bx = ax + r[i]*sin(f[i]*t)*cos(g[i]*t);
 by = ay + r[i]*sin(f[i]*t)*sin(g[i]*t);
 bz = az + r[i]*cos(g[i]*t);
 line(ax, ay, az, bx, by, bz);
 ax = bx; ay = by; az = bz;

Draw Hypotrochoid (Spirograph curve)

The hypotrochoid is a curve drawn by rolling a circle of radius B around the inside circumference of another of radius A. A point attached to the inner circle and distance C from its center draws the curve.

The below program is used draw a hypothrochoid. This code shows the animates process of drawing the curve so you can see how the circles trace out the curve's path.

Following private functiona re used to determine X and Y Position.

<tt>// The parametric function X(t).
private double X(double t, double A, double B, double C)
    return (A - B ) * Math.Cos(t) + C * Math.Cos((A - B ) / B * t);

// The parametric function Y(t).
private double Y(double t, double A, double B, double C)
    return (A - B ) * Math.Sin(t) - C * Math.Sin((A - B ) / B * t);

To trace the entire curve, the variable t must vary from 0 to 2 * Pi * B / GCD(A, B ).

private void btnDraw_Click(object sender, EventArgs e)
    int A = int.Parse(txtA.Text);
    int B = int.Parse(txtB.Text);
    int C = int.Parse(txtC.Text);
    int iter = int.Parse(txtIter.Text);

    int wid = picCanvas.ClientSize.Width;
    int hgt = picCanvas.ClientSize.Height;
    Bitmap bm = new Bitmap(wid, hgt);
    using (Graphics gr = Graphics.FromImage(bm))
        int cx = wid / 2;
        int cy = hgt / 2;
        double t = 0;
        double dt = Math.PI / iter;
        double max_t = 2 * Math.PI * B / GCD(A, B );
        double x1 = cx + X(t, A, B, C);
        double y1 = cy + Y(t, A, B, C);
        while (t <= max_t)
            double x0 = x1;
            double y0 = y1;
            t += dt;
            x1 = cx + X(t, A, B, C);
            y1 = cy + Y(t, A, B, C);
            gr.DrawLine(Pens.Black, (float)x0, (float)y0, (float)x1, (float)y1);

    picCanvas.Image = bm;

The program draw the complete curve when you enter parameters and touch anywhere on the screen. The iter parameter determines how many points the program uses. Bigger values give smoother results, although using very small values can be interesting, too.

The program uses a Timer with Interval = 100 so it draws a frame every 100 milliseconds or 10 times per second.

Screen Shots of the functioning app

Shake the screen to clear, and start drawing again.

Size/radius of drawing circles can be changed by guestures or from menu

Backgroud is changes by sensing the light, or by seeting is from the menu. Colors are avilable as Standard, Rainbow or Gradient

Windows 8 Store

The initial version of app, that demonstrats most of the above functionaly can be viewed at Windows 8 Store at

The application will soon be ported and deployed to AppUp

Future Enhancements

Will be adding the capability to add three layes of the circles.


Version 1.0, release on 14th October


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States

Comments and Discussions

QuestionLink Broken Pin
Ranjan.D14-Oct-12 22:36
memberRanjan.D14-Oct-12 22:36 
AnswerRe: Link Broken Pin
KashviGupta15-Oct-12 6:02
memberKashviGupta15-Oct-12 6:02 
GeneralRe: Link Broken Pin
Ranjan.D15-Oct-12 7:03
memberRanjan.D15-Oct-12 7:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 15 Oct 2012
Article Copyright 2012 by KashviGupta
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid