Angela Lee – Project 7 – Curves

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 7 Curves
 */

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

 function draw() {
    frameRate(20);
    background(0);

    push();
    // functions start at the middle of the canvas
    translate(width/2, height/2);
    // functions rotate with mouseX
    rotate(map(mouseX, 0, 480, 0, TWO_PI)); 
    hypotrochoid();
    epitrochoid();
    astroid();
    pop();
}

function astroid() {
    noStroke();

    // colors change smoothly by milliseconds 
    r = 100 + 100 * sin(millis() / 1000.0);
    g = 150 + 40 * sin(millis() / 1000.0 + HALF_PI);
    b = 230 + 60 * sin(millis() / 1000.0 - HALF_PI);
    fill(r, g, b);

    // outer & inner radii depend on user's mouse
    a = map(mouseX, 0, width, 0, 100);
    b = map(mouseY, 0, height, 0, 100);

    // drawing the astroid
    beginShape();
    for (var i = 0; i < 2000; i ++ ) {
        // angle for astroid formula
        angle = map(i, 0, 2000, 0, TWO_PI);
        var x = pow(cos(angle), 3) * a;
        var y = pow(sin(angle), 3) * b;
        vertex(x, y);
    }
    endShape();
}

function hypotrochoid() {
    strokeWeight(1);
    fill(0);

    // colors change smoothly by milliseconds
    r = 230 + 60 * sin(millis() / 1000.0);
    g = 240 + 80 * sin(millis() / 1000.0 + HALF_PI);
    b = 155 + 90 * sin(millis() / 1000.0 - HALF_PI);
    stroke(r, g, b);

    // outer & inner radii depend on user's mouse
    a = map(mouseX, 0, width, 50, 150);
    b = map(mouseY, 0, height, 5, 10);
    h = map(mouseY, 0, height, 100, 200);

    // drawing the hypotrochoid
    beginShape();
    for (var i = 0; i < 2000; i ++) {
        // angle for hypotrochoid formula
        angle = map(i, 0, 2000, 0, TWO_PI);
        var x = (a - b) * cos(angle) + h * cos((a - b) / b * angle);
        var y = (a - b) * sin(angle) + h * sin((a - b) / b * angle);
        vertex(x, y);
    }
    endShape();
}


function epitrochoid() {
    strokeWeight(1);
    // fill allows it to have no overlap with hypotrochoid
    fill(0); 
    // color changes smoothly by milliseconds
    r = 50 + 20 * sin(millis() / 1000.0);
    g = 150 + 150 * sin(millis() / 1000.0 + HALF_PI);
    b = 230 + 120 * sin(millis() / 1000.0 - HALF_PI);
    stroke(r, g, b);

    // inner & outer radii depend on user's mouse
    a = map(mouseX, 0, width, 50, 100);
    b = map(mouseY, 0, height, 0, 3);
    h = map (mouseX, 0, width, 0, 25);

    // drawing the epitrochoid
    beginShape();
    for (var i = 0; i < 2000; i++) {
        angle = map(i, 0, 2000, 0, TWO_PI);
        var x = (a + b) * cos(angle) - h * cos((a + b) / b * angle);
        var y = (a + b) * sin(angle) - h * sin((a + b) / b * angle);
        vertex(x, y);
    }
    endShape();
}

For this project, I was interested in seeing how multiple curves could overlap, interact, or mirror each other’s movements. So, I made the rotation for all three curves the same, but each curve’s parameter depends on mouseX and mouseY a little differently. Although I liked seeing how the curves could overlap, it got a very visually chaotic sometimes when they did, so I wanted to make the order of the curves constant so one curve was always the smallest, etc. The last part I tweaked about my curves was making the curves go out of the canvas, because the composition looked very restrained otherwise.