Project-07

I chose to use two curves in my project. both are hypocycloids, which I think are very interesting curves. However, while they are both hypocycloids, they behave very differently from each other. The one in the center never overlaps itself each time it is drawn; However, each time the outer curve is drawn it crossed over itself a bunch of times due to the parameters it is given. This causes a cool effect to be visualized on the canvas. I also think the colors work well together.

sketch
var nPoints = 100;

function setup() {
    createCanvas(480, 480);
    background(200,50,86);
}

function draw() {
    
        push();
        translate(240, 240);
        Hypotrochoid();
        Astroid();
        pop();

}

function Astroid() {
    //housekeeping
    c = color(map(mouseX, 0,480, 0, 255), map(mouseY, 0,480, 150, 200),map(mouseY+mouseY, 0, 960, 0, 255))
    stroke(c);
    strokeWeight(3);
    noFill();

    //asteroid equation
    var a = int(map(mouseY, 0, width, 4, 20));
    var b = int(map(mouseX, 0, width, 0, 100));
    beginShape();
    for (var i = 0; i < nPoints; i++){
        angle = map(i, 0, nPoints, 0, radians(360));
        x = (b / a) * ((a - 1) * cos(angle) + cos((a - 1) * angle));
        y = (b / a) * ((a - 1) * sin(angle) - sin((a - 1) * angle));
        vertex(x,y);
    }
    endShape();

}

function Hypotrochoid() {
    //housekeeping
    c = color(map(mouseX, 0,480, 150, 200), map(mouseY, 0,480, 0, 255),map(mouseY+mouseY, 0, 960, 0, 255))
    stroke(c);
    strokeWeight(1);
    noFill();

    // hypotrochoid equation
    var a = map(mouseY, 0, 480, 0, 250);
    var b = 5
    var h = map(mouseX, 0, 480, 2, 105);
    beginShape();
    for (var i = 0; i < nPoints; i++ ) {
        var angle = map(i, 0, nPoints, 0, radians(360));
         x = (a - b) * cos(angle) + h * cos((a - b) * (angle / b));
         y = (a - b) * sin(angle) - h * sin((a - b) * (angle / b));
        vertex(x, y);
    }

  endShape();
}

Leave a Reply