```
// John Legelis
// Section D
//Define canvas width and height
cwidth = 480
cheight = 480
function setup() {
createCanvas(cwidth, cheight);
background(0);
textSize(40);
fill(255)
textFont('Helvetica');
text('mouse over', 120, 240);
}
//Initialize number of points drawn in graph
var npoints = 60
var step = 2 * Math.PI / npoints
//Radius of outer circle
var bigR
//Radius of inner circle
var r
// offset the graph so it is drawn about the center
var offsetx = cwidth/2
var offsety = cheight/2
//color variable
var cw
function hypX (t) {
//Big and little circle radius mapped to x,y mouse and constrained to canvas
bigR = map(constrain(mouseX, 0, cwidth),0, 1000, 0, 400)
r = map(constrain(mouseY, 0, cheight), 0, 700, 0, 400)
var x = ((bigR - r) * cos(t) + r * cos((bigR - r)/r * t) + offsetx)
return x
}
function hypY (t) {
//Big and little circle radius mapped to x,y mouse and constrained to canvas
bigR = map(constrain(mouseX, 0, cwidth),0, 1000, 0, 400)
r = map(constrain(mouseY, 0, cheight), 0, 700, 0, 400)
var y = ((bigR - r) * sin(t) + r * cos((bigR - r)/r * t) + offsety)
return y
}
function draw() {
//color variable randomized RGB in neon range
cw = [random(0,200), random(0,200), random(0,200)]
//for every point in the pattern
for (theta = 1; theta < 30*PI; theta = theta + 2*PI/npoints) {
strokeWeight(3)
stroke(cw)
// draw a line from the point to the previous point
line(hypX(theta), hypY(theta), hypX(theta - step), hypY(theta - step))
}
// erase everything when mouse mouseIsPressed
if (mouseIsPressed) {
background(0)
}
}
```

This week’s project was left very open ended, and after some research on Wolfram Alpha World about curves and their mathematical composition, I developed an understanding for how a spirograph creates hypotrochoid shapes by rotating a circle within another circle.

The general formula for the X and Y coordinates of a hypotrochoid curve in reference to theta is:

x(θ) = (R−r)*cosθ + r*cos(θ*(R−r)/r) y(θ) = (R−r)*sinθ − r*sin(θ*(R−r)/r)

Where R and r refer to the radii of the outer circle and the inner circle respectively.

In my project I created code that draws a hypothyroid whose R and r vary with mouseX and mouseY respectively.

**When the mouse is pressed the canvas will erase**