karinac-Project-07

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.