```
/*
* Angela Lee
* Section E
* ahl2@andrew.cmu.edu
* Project 7 Curves
*/
function setup() {
createCanvas(480, 480);
}
function draw() {
frameRate(20);
background(0);
push();
// functions start at the middle of the canvas
translate(width/2, height/2);
// functions rotate with mouseX
rotate(map(mouseX, 0, 480, 0, TWO_PI));
hypotrochoid();
epitrochoid();
astroid();
pop();
}
function astroid() {
noStroke();
// colors change smoothly by milliseconds
r = 100 + 100 * sin(millis() / 1000.0);
g = 150 + 40 * sin(millis() / 1000.0 + HALF_PI);
b = 230 + 60 * sin(millis() / 1000.0 - HALF_PI);
fill(r, g, b);
// outer & inner radii depend on user's mouse
a = map(mouseX, 0, width, 0, 100);
b = map(mouseY, 0, height, 0, 100);
// drawing the astroid
beginShape();
for (var i = 0; i < 2000; i ++ ) {
// angle for astroid formula
angle = map(i, 0, 2000, 0, TWO_PI);
var x = pow(cos(angle), 3) * a;
var y = pow(sin(angle), 3) * b;
vertex(x, y);
}
endShape();
}
function hypotrochoid() {
strokeWeight(1);
fill(0);
// colors change smoothly by milliseconds
r = 230 + 60 * sin(millis() / 1000.0);
g = 240 + 80 * sin(millis() / 1000.0 + HALF_PI);
b = 155 + 90 * sin(millis() / 1000.0 - HALF_PI);
stroke(r, g, b);
// outer & inner radii depend on user's mouse
a = map(mouseX, 0, width, 50, 150);
b = map(mouseY, 0, height, 5, 10);
h = map(mouseY, 0, height, 100, 200);
// drawing the hypotrochoid
beginShape();
for (var i = 0; i < 2000; i ++) {
// angle for hypotrochoid formula
angle = map(i, 0, 2000, 0, TWO_PI);
var x = (a - b) * cos(angle) + h * cos((a - b) / b * angle);
var y = (a - b) * sin(angle) + h * sin((a - b) / b * angle);
vertex(x, y);
}
endShape();
}
function epitrochoid() {
strokeWeight(1);
// fill allows it to have no overlap with hypotrochoid
fill(0);
// color changes smoothly by milliseconds
r = 50 + 20 * sin(millis() / 1000.0);
g = 150 + 150 * sin(millis() / 1000.0 + HALF_PI);
b = 230 + 120 * sin(millis() / 1000.0 - HALF_PI);
stroke(r, g, b);
// inner & outer radii depend on user's mouse
a = map(mouseX, 0, width, 50, 100);
b = map(mouseY, 0, height, 0, 3);
h = map (mouseX, 0, width, 0, 25);
// drawing the epitrochoid
beginShape();
for (var i = 0; i < 2000; i++) {
angle = map(i, 0, 2000, 0, TWO_PI);
var x = (a + b) * cos(angle) - h * cos((a + b) / b * angle);
var y = (a + b) * sin(angle) - h * sin((a + b) / b * angle);
vertex(x, y);
}
endShape();
}
```

For this project, I was interested in seeing how multiple curves could overlap, interact, or mirror each other’s movements. So, I made the rotation for all three curves the same, but each curve’s parameter depends on mouseX and mouseY a little differently. Although I liked seeing how the curves could overlap, it got a very visually chaotic sometimes when they did, so I wanted to make the order of the curves constant so one curve was always the smallest, etc. The last part I tweaked about my curves was making the curves go out of the canvas, because the composition looked very restrained otherwise.