Curves

sketch

//Yanina Shavialenka
//Section B

var n;
var heartShape = [];
var theta = 0;
var nPoints = 55;

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

function draw() {
    background(map(mouseX, 0, width, 0, mouseY));
    heartCurve();
    epitrochoidCurve();
    hypotrochoidCurve();
    astroidCurve();
}

function heartCurve() {
    //https://mathworld.wolfram.com/HeartCurve.html
    push();
    fill(255, 153, 255);
    stroke(73, 84, 216);
    translate(width/2, height/2-35);//changes (0,0) point to center the heart in the middle
    beginShape(); //Begins to draw heart curve
    for (var v of heartShape) {
        vertex(v.x, v.y); 
    }
    endShape(); //Ends drawing heart curve
    //The following equations were taken from teh MathWorld
    var radius = height / 40; //sets how big the heart is on the canvas
    var xPos = 16 * pow(sin(theta), 3) * radius;
    var yPos = (13 * cos(theta) - 5 * cos(2 * theta) - 2 * cos(3 * theta) - cos(4 * theta)) * -radius;
    heartShape.push(createVector(xPos, yPos));
    theta += 0.8; //changes the angle by 0.8 each time which increases the outer blue stroke
    pop();
}

function epitrochoidCurve() {
    //https://mathworld.wolfram.com/Epitrochoid.html
    var b = 3.5; 
    var h = (b + 5) + mouseX/100;
    var a = mouseX/b;
    push();
    noFill();
    stroke(0, 0, mouseX);
    translate(180, height/2-50);
    /*
    Changes (0,0) point to center the epitrochoid on the 
    left side of a heart.
    */
    beginShape(); //Begins to draw epitrochoid curve
    //The following equations were taken from teh MathWorld
    for(var t = 0; t <= TWO_PI; t += PI/110){
        var xPos = (a+b) * sin(t) - h * sin(((a+b)/b) * t);
        var yPos = (a+b) * cos(t) - h * cos(((a+b)/b) * t);
        vertex(xPos,yPos);
    }
    endShape(); //Ends drawing epitrochoid curve
    pop();
}

function hypotrochoidCurve() {
    //https://mathworld.wolfram.com/Hypotrochoid.html 
    var b = 3.5; 
    var h = mouseY/2; //As height increases, the get little sharp crown circles
    //As height decreases, we get oval star curves instead of crown circles
    var a = mouseX/b;
    push();
    noFill();
    stroke(mouseX, 0, 0);
    translate(width/2+70, height/2-35);
    /*
    Changes (0,0) point to center the hypotrochoid on the 
    right side of a heart.
    */
    beginShape(); //Begins to draw hypotrochoid curve
    //The following equations were taken from teh MathWorld
    for (var i = 0; i <= nPoints; i ++) {
        var t = map(i, 0, 50, 0, TWO_PI);
        var xPos = (a-b) * cos(t) + (h * cos(((a-b)/b) * t));
        var yPos = (a-b) * sin(t) - (h * sin(((a-b)/b) * t));
        vertex(xPos,yPos);
    }
    endShape(); //Ends drawing hypotrochoid curve
    pop();
}

function astroidCurve() {
    //https://mathworld.wolfram.com/Astroid.html
    var a = map(mouseX, 0, width, 0, height);
    push();
    noFill();
    stroke(0, mouseX, 0);
    translate(width/2, 300);
    /*
    Changes (0,0) point to center the astroid at the 
    bottom of a heart.
    */
    beginShape(); //Begins to draw astroid curve
    //The following equations were taken from teh MathWorld
    for (var i = 0; i < height; i++) {
        var t = map(i, 0, width, 0, TWO_PI);
        var xPos = 3 * a * cos(t) + a * cos(3 * t);
        var yPos = 3 * a * sin(t) - a * sin(3 * t);
        vertex(xPos,yPos);
    }
    endShape(); //Ends drawing astroid curve
    pop();
}

|

In this project I drew the curve of a heart and inside of a heart there’s 3 addition curves. Epitrochoid and hypotrochoid in my opinion were kind of like opposite of each other since epitrochoid draws ellipses inside and hypotrochoid draws ellipses outside. For me it was kind of challenging to do this because I had to research a lot of new functions such as Math.pow and many things for me didn’t work so I had to change the curves multiple times for them to work. It was interesting to analyze how angles of 0.1 or 1 would affect the curves, sometimes the smaller the angle the bigger the shape became which is polar opposite of what would I have expected.