## Introduction

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.

## Features

- 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))

Symmetry

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 http://apps.microsoft.com/webpdp/en-US/app/spiral/851b6a69-2f28-4c03-8b82-b0e0b881bd18

The application will soon be ported and deployed to AppUp

## Future Enhancements

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

## History

Version 1.0, release on 14th October