Project 07 : Curves

petal
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 07


//global variables
var numPoints = 800;

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

function draw() {
    
    background(200); //dusty pink bkgrd color
    

    for (var x = 40; x <= 480; x += 80) {	//number of "modules" (grid)
        for (var y = 40; y <= 480; y += 80) {
            push();
            translate(x, y);
            EpicycloidPedal();
            pop();
        }
    }

    for (var x = 80; x <= 460; x += 80) {	//number of "modules" (grid)
        for (var y = 80; y <= 460; y += 80) {
            push();
            translate(x, y);
            HypocycloidPedal();
            pop();
        }
    }
}


function HypocycloidPedal() {
    
    //radius
    var a = map(mouseX, 0, 480, 0, 120); 
    var b = map(mouseX, 0, 480, 0, 60);

    strokeWeight(mouseY/100, mouseX/350); //change in stroke thickness
    stroke(158, 188, 254); //blue color
    noFill();

    //moduleShape
    beginShape();
    for (var i=0; i<numPoints; i++) {
        var angle = map(i, 0, 180, 0, TWO_PI);
        var n = 8; //number of pedals

        //equations from mathworld
        x = a * (((n-1) * cos(angle)) + (cos((n-1) * angle)) / n);
        y = a * (((n-1) * sin(angle)) - (sin((n-1) * angle)) / n);

        vertex(x, y);    	
    }
    endShape(); 	
}



function EpicycloidPedal() {

    //radius
    var a = map(mouseX, 0, 480, 0, 160); 
    var b = map(mouseX, 0, 480, 0, 80); 


    strokeWeight(mouseX/80, mouseY/200); //change in stroke thickness
    stroke(255, 242, 147); //yellow color
    noFill();

    //module shape
    beginShape();
    for (var i=0; i<numPoints; i++) {
        var angle = map(i, 0, 100, 0, TWO_PI);

        //equations from mathworld
        x = ((1/2) * (a+(2*b))) * (cos(angle) - cos(((a+b)*angle) / b));
        y = ((1/2) * (a+(2*b))) * (sin(angle) - sin(((a+b)*angle) / b));

        vertex(x, y);
    }
    endShape();

}

After browsing through the Mathworld curves site, I wanted to explore the possibilities of the Hypocycloid pedal curve and the Epicycloid pedal curve under the roulettes category. Using different functions, I tried showing the different shapes each curve had the ability to make, through the manipulation of its radius and x and y coordinates. Above, there are screenshots of the different visuals depending on where the mouse is placed on the screen. I did not want to manipulate any change in the colors, because I want the user to focus on the different geometries.

Leave a Reply