Project 07

``````//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//Section C
//Project-07-Composition With Curves

//size of hypocycloid
var a;
//number of cusps in the hypocycloid
var n;
//x coordinate of points on graph
var x;
//y coordinate of points on graph
var y;
//total number of points to generate
var nPoints;

function setup() {
createCanvas(480, 480);
background(0);
nPoints = 1000;

}

function drawHypocycloid (a, n) {
push();
translate(240, 240);
stroke(255, 0, 0);
strokeWeight(0.2);
//changes the fill color based on mouseX
fill(map(mouseX, 0, 480, 0, 255), 0, map(mouseX, 0, 480, 0, 255));

for (var i = 0; i <= nPoints; i++) {
//equation for x value of hypocycloid
x = (a/n) * ((n-1) * cos(t) - cos((n-1)*t));
//equation for y value of hypocycloid
y = (a/n) * ((n-1) * sin(t) - sin((n-1)*t));
//draws hypocycloid using elipses centered at points along the graph
ellipse(x, y, map(abs(x), 0, 240, 0, 25), map(abs(y), 0, 240, 0, 25));

}
pop();
}

function draw() {
background(0);
//sets a based on mouseY
a = map(mouseY, 0, 480, 20, 100);
//sets n based on mouseX for first shape
n = map(mouseX, 0, 480, HALF_PI, 5);
//draw first shape
drawHypocycloid(a, n);
//sets n based on mouseX for second shape
n = map(mouseX, 0, 480, -10, -HALF_PI);
//draw second shape
drawHypocycloid(a, n);

}``````

I created an interactive visualization of multiple hypocycloids.