spiralIcon

JSGS Shapes

TNTHeart

Your browser does not support HTML5 Canvas
Notes:

During Valentine's Day one year, a student was annoyed at the lack of a heart shape in the library. Who knew there was a mathematical representation of a heart?! As shown, you can have portions of a heart too.

Here's a link to a math-y site describing the curve parametrically: Heart Curve

x = a*sin3(t)
y = b*cos(t) + c*cos(2t) + d*cos(3t) + e*cos(4t)

Suggested Coefficients for a 'Good Heart':

  • a: 16
  • b: 13
  • c: -5
  • d: -2
  • e: -1
TNTHeart Features and Usage:
Primary Attributes:

12 Parameters:

  • center: TNTPoint
  • constants a-e: real numbers
  • thetaMin: start angle in degrees - a real number
  • thetaMax: end angle in degrees - a real number
  • numberOfSteps: positive integer; more steps, smoother shape
  • fillColor: TNTColor (can be null for a framework image)
  • borderStroke: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the image about its center.
    rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The examples above were created by:


var center = origin;
var a = 16;
var b = 13;
var c = -5;
var d = -2;
var e = -1;
//fraction of heart: (1 is complete, .75 is 3/4, etc)
var f = 1; 
var steps = 200;
var fcolr = red;
var stroke = redStroke;
stroke.lineWidth = .5;
var rotn = 0;
var thetaMin = 0; //in degrees
var thetaMax = 360; //in degrees
var myHeart = new TNTHeart(center, a, b,
    c, d, e, thetaMin, thetaMax, steps,
    fcolr, stroke, rotn);
myHeart.drawTNTHeart(context);

thetaMin = 0;
thetaMax = 60;
fcolr = pink;
var stroke = null;
var myHeartTip = new TNTHeart(center, a, b, 
    c, d, e, thetaMin, thetaMax, steps,
    fcolr, stroke, rotn)
myHeartTip.drawTNTHeart(context);

thetaMin = 90;
thetaMax = 120;
fcolr = yellow;
var stroke = null;
var myHeartSide = new TNTHeart(center, a, b,
    c, d, e, thetaMin, thetaMax, steps,
    fcolr, stroke, rotn)
myHeartSide.drawTNTHeart(context);

thetaMin = 120;
thetaMax = 240;
fcolr = orange;
var bottomOfMyHeart = new TNTHeart(center, a, b,
    c, d, e, thetaMin, thetaMax,
    steps, fcolr, stroke, rotn);
bottomOfMyHeart.drawTNTHeart(context);
To Draw: myHeart.drawTNTHeart(context);
More:

You may need to explore with various sizes and signs of the a-e coefficients to get the shape of the heart you want.

You can actually do this with Processing using our handy Anime-TNTHeart app!