karinac-Project-07

``````//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-07

//number of points drawn on hypocycloid
var nPoints = 500;

function setup() {
createCanvas(400, 400);
}

function draw() {
background(234,187,196);

//rotation by mouseX
var angle = mouseX/200;

// draw the curve
push();
translate(width / 2, height / 2);
rotate(angle);
drawHypocycloidCurve();
pop();
}

function drawHypocycloidCurve() {
var x;
var y;
var a = constrain(mouseX/5,0,width);

fill(255);
strokeWeight(3);
stroke(150,46,63);

beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = (1*a) * cos(t) + a * cos(7*t);
y = (1*a) * sin(t) - a * sin(7*t);
vertex(x,y);
}
endShape(CLOSE);
}``````

I started first by attempting to generate a simple astroid curve:

In doing so, while looking up formulas and trying to figure out what each variable in the equation affects, I found out that an astroid is part of a bigger group called hypocycloids, which is “a special plane curve generated by the trace of a fixed point on a small circle that rolls within a larger circle.”

https://en.wikipedia.org/wiki/Hypocycloid

After creating a simple astroid that expands and contracts with the movement of the mouse, I decided I wanted to experiment with the other variables to see what other shapes I could make. Following the logic of the curves, I ended up with the flower-like shape that you see above. To complete the project, I added a rotation to the expanding flower.