siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Heart

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

Features and Usage:

Primary Attributes:

12 Parameters:

center(TNTPoint), a(real number), b(real number), c(real number), d(real number), e(real number), thetaMin(start angle in deg: real number), thetaMax( finish angle in deg: real number), numberOfSteps(positive integer; more steps, smoother shape), fcolr(TNTColor), borderColor(TNTStroke), rotationInDegrees(real number)

To Create:

Big Red Heart Example:

                                        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);
                                    
To Draw: myHeart.drawTNTHeart(context);
Comments:

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!