Kevin Thies – Project 7 – Curves

sketch
Pretty early on I went through the site of curves, and I found the heart curves and decided I anted to do one. Conveniently, the one I thought looked best was straightforward to make. I was interested if JavaScript would take unicode as strings, and fortunately it does. Unfortunately, it’s plagued by an issue shared with many unicode sets – emoji. I had to make sure the unicode I wanted wouldn’t render as an emoji, because that just doesn’t look as crisp. In hindsight, it ould have been cool if I had used the function to generate a path for a moving heart like Lab 6, but there’s time for that in the future.

// Kevin Thies
// kthies@andrew.cmu.edu
// Section C
// Project 07 - Curve Composition

var pointNum = 100; // number of points in the heart
var bigScale = 20; // scale value of the largest heart
var smallScale = 2; // scale step of the iterations
var rotAngle = 1; // rotation angle of hearts
var rotIncrement = .02; // increment of rotation per frame in radians
var xScale; // mouse X - dependant scaling value of heart
var yScale; // mouse y - dependant scaling v alue of heart
var iterations = 10; // number of hearts drawn


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



function draw() {
    // style
    background(211,141,196);
    stroke(255,155,233);
    fill(0);

    // constrain the scaling of the X and Y of hearts
    xScale = constrain(map(mouseX, 0, width, 0, 1), .2, 1);
    yScale = constrain(map(mouseY, 0, height, 0, 1), .2, 1);

    // increment rotation
    rotAngle = rotAngle += rotIncrement;

    push();
    // move hearts to center of canvas
    translate(width/2, height/2);
    // rotate around center of canvas by the rotation angle
    rotate(rotAngle);

    // draw heart iterations
    for(var i = 0; i < iterations; i++) {
        // sizes decrease based on iteration number
        textSize(2 * (iterations - i));
        strokeWeight(.2 * (iterations - i));
        heartPoints(bigScale - i * smallScale, xScale, yScale);
    }
    pop();
}



function heartPoints(s, xS, yS) {
    // from http://mathworld.wolfram.com/HeartCurve.html
    // x = 16sin^3(t)
    // y = 13cos(t) - 5cos(2t) - 2cos(3t)- cos(4t)
    var x;
    var y;

    // grab x and y coords for pointNum amount of points
    for(var j = 0; j < pointNum; j++) {
        var t = map(j, 0, pointNum, 0, TWO_PI);

        // calculate x and y of asterisks
        x = xS * s * (16 * pow(sin(t), 3));
        y = yS * s * (13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t));

        // place a unicode heart at the point, counter-rotate it
        push();
        translate(x, y);
        rotate(-rotAngle);
        text("♥", 0, 0);
        pop();
    }
}