```
//Jihoon Park
//section A
//jihoonp@andrew.cmu.edu
//project-07
var nPoints = 100;
var divider; //number of points in hypotrochoid
function setup() {
createCanvas(600,600);
frameRate(10);
}
function draw() {
background(0);
for(var i=0; i<10; i++) { //loops the Hypotrochoid with 30 pixel space
var col = map(i, 0, 10, 0, 255); //color map
stroke(col);
noFill(); //inner geometry fades
Hypo(i*30, mouseX/50); //changes the number of points according to mouse X
}
}
function Hypo(a, divider) {
var x;
var y;
var a; //radius of circumscribed circle
var b=a/divider; //radius of inscribed circle
var h = constrain(mouseY/10, 0, a); //length of rotating point generator
var ph = mouseX/50; //rotation of hypotrochoid
push(); //moves the origin of hypotrochoid to center
translate(width/2, height/2);
beginShape();
for(var i=0; i<nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x=(a-b)*cos(t) + h*cos(ph+t*(a-b)/b);
y=(a-b)*sin(t) - h*sin(ph+t*(a-b)/b);
vertex(x, y);
}
endShape(CLOSE);
pop();
}
```

In this project I made a function called Hypo, which is a short term I gave for hypotrochoid. This geometry has 3 variables which are the radius of circumscribed circle, inner orbiting circle and the length of the line which is rotated from the center of orbiting circle. I made all of the variables modifiable according to the x and y position of the mouse, then looped the geometry to form an overlap.