siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT TearDrop

Your browser does not support HTML5 Canvas
Notes:

Shed no tears for this new shape, unless they are tears of joy! You can specify the tip (sharp point) location, the length along that axis, a horizontalFactor that influences the width and a 'power' that affects the shape.

If you want to see how the various parameters in this shape affect its appearance, check out our Anime-TNTTearDrop app.

This shape is made using parametric equations:

                        x = a * cos(t)
                        y = b * sin(t) * sinm(t/2)

Features and Usage:

Primary Attributes:

The key players in the equations are:

  • t, time
  • a and b: scale factors on the x and y variables respectively
  • m, a power on a sine factor. Influences the shape of the tear drop

7 parameters:
tip(TNTPoint, the starting locn of the drop), vertLength (real number, > 0; the length of the drop from tip to bottom), horizFactor (real number, scales the width of the drop(ish), powr (real number, affects the shape of the drop), fill color(TNTColor), stroke(TNTStroke), rotation(in degrees, positive is counterclockwise)

To Create: 
                                    var tip = new TNTPoint(5, 12);
    var vertLength = 20;
    var horzFactor = 8;
    var powr = 3;
    var fcolr = lightBlue;
    var stroke = darkBlueStroke;
    var rotn = 0;
    var myTear = new TNTTearDrop(tip, vertLength, horzFactor, powr, fcolr, stroke, rotn);
    myTear.showCenter = true;
    myTear.showTip = true;
To Draw: myTear.drawTNTTearDrop(context);