rfarn-project-07-curves

I started this project by simply creating basic curves. I started with the astroid curve.

However, I wasn’t inspired by this simple curve so I decided to explore some other curves. I came across the epitrochoid curve.

I decided to add a simple interaction, increasing the general radius as well as the loop sizes as the mouse moves from side to side. Then I added the astroid curve back on top as a little embellishment.

sketch

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

function draw() {
    background(36, 7, 26);
    translate(width/2, height/2); //moves curves from (0,0) center to center of canvas
    epitrochoid(); //draws epitrochoid curve
    astroid(); //draws radial astroid curve

}

function epitrochoid() {
    var b = 5; 
    var h = (b * 4) + mouseX/4; //change as mouse moves from side to side
    var a = 30 + mouseX/3;

    fill(107, 77, 87);
    strokeWeight(2);
    stroke(221, 200, 196);
    beginShape();
    for(var t = 0; t < 2 * PI; t += PI/500){ //1000 points along circle
        var x = (a + b) * cos(t) - h * cos(((a + b)/b) * t); //x coordinate
        var y = (a + b) * sin(t) - h * sin(((a + b)/b) * t); //y coordinate
        vertex(x, y);
    }
    endShape(CLOSE);
}

function astroid() {
    var a = 25 + mouseX/2; //changes as mouse moves from side to side

    noFill();
    strokeWeight(10);
    stroke(107, 77, 87);
    beginShape();
    for(var t = 0; t < 2 * PI; t += PI/500){ //1000 points along circle
        var x = a * pow(cos(t), 3); //x coordinate
        var y = a * pow(sin(t), 3); //y coordinate
        vertex(x, y);
    }
    endShape(CLOSE);
}