Project 07 – Composition with Curves

sketch
// Stefanie Suk
// 15-104 Section D

var nPoints = 100; //number of points for curves
var angle = 10; //angle of rotation

function setup() {
    createCanvas(480,480);
    frameRate(15); //set frame rate to 15
}

function draw() {
    background(33, 63, 99); //background of canvas to dark blue

    //placing Hypocycloid in center
    push();
    translate(width/2, height/2);
    Hypocycloid();
    pop();

    //placing Deltoid in center and rotate by angle
    push();
    translate(width/2, height/2);
    rotate(radians(angle));
    angle += mouseX;
    Deltoid();
    pop();

    //placing Epitrochoid in center
    push();
    translate(width/2, height/2);
    Epitrochoid();
    pop();
}

function Hypocycloid(){
    // variables for Hypocycloid
    var a1 = map(mouseY, 0, 300, 150, 180); //size changes with respect to mouseY
    var b1 = 15;
    var c1 = mouseX / 25;

    //color, stroke of Hypocycloid
    stroke(167, 219, 239);
    strokeWeight(6);
    noFill();

    //create curve, map to full circle radians
    //use math function to find x and y values
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var angle1 = map(i, 0, nPoints, 0, TWO_PI);     
        x1 = (a1 - b1) * cos(angle1) + c1 * cos((a1 - b1) * angle1);
        y1 = (a1 - b1) * sin (angle1) - c1 * sin((a1 - b1) * angle1);
        vertex(x1, y1);
    }
    endShape(CLOSE); 
}

function Deltoid(){
    colorR = map(mouseX, 0, 50, 100, 255);
    colorG = map(mouseX, 0, 50, 100, 255); //set color in specific range
    colorB = map(mouseY, 0, 50, 100, 255); //changes color with respect to mouseX,Y
    
    // variable for Deltoid, change size
    a2 = map(mouseY, 0, height, 10, 40); //size changes with respect to mouseY
    
    //color, stroke, fill of Deltoid
    stroke(255);
    strokeWeight(6);
    fill(colorR, colorG, colorB);

    //create curve, map to full circle radians
    //use math function to find x and y values
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var angle2 = map(i, 0, nPoints, 0, TWO_PI);
        x2 = ((2 *(cos(angle2))) + (cos(2*angle2)))* a2 ;
        y2 = ((2 *(sin(angle2))) - (sin(2*angle2)))* a2 ;
        vertex(x2, y2);
    }
    endShape(CLOSE);
}

function Epitrochoid() {

    colorR = map(mouseX, 0, 50, 100, 255);
    colorG = map(mouseX, 0, 50, 100, 255); //set color in specific range
    colorB = map(mouseY, 0, 50, 100, 255); //changes color with respect to mouseX,Y

    // variables for epitrochoid
    var a3 = map(mouseY, 0, 400, 40, 110); //size changes with respect to mouseY
    var b3 = 50;
    var c3 = (mouseX / 15);

    //color, stroke of epitrochoid
    stroke(colorR, colorG, colorB);
    strokeWeight(1.5);
    noFill();

    //create curve, map to full circle radians
    //use math function to find x and y values
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var angle3 = map(i, 0, nPoints, 0, TWO_PI);
        x3 = (a3 + b3) * cos(angle3) + c3 * cos((a3 + b3) * angle3);
        y3 = (a3 + b3) * sin(angle3) + c3 * sin((a3 + b3) * angle3);
        vertex(x3, y3);
    }
    endShape(CLOSE);
}

I utilized hypocycloid, deltoid, and epitrochoid using the reference from Mathworld to create this project. I chose these curves because I loved how they were structured. I thought that when these three curves are put together would create one unique interactive shape for my project. The exploration of this project was interesting, and I also played around with random colors and sizes with mouseX and mouseY. The unique part about these curves in my project is that the curves in my work create different smoothness depending on the position of the mouse (round, shape, spiky, squiggly). The different shapes created in the project look like forms of snowflakes, which is why I made the main color blue.

Leave a Reply