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();
}
}
``````