Project 07

sketch

//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++) {
    t = map(i, 0, 1000, radians(0), radians(13 * 360))
    //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.