spiralIcon

JSGS Shapes

TNTTearDrop

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)
TNTTearDrop Features and Usage:
Primary Attributes:

7 Parameters:

  • tip: TNTPoint
  • verticalLength: a positive real number: a 'double', related to 'a' in the equations above
  • horizFactor: a real number that 'scales' the width of the drop. 'b' in the equations above
  • power: a real number that affects the drop shape, 'm' in the equations above
  • 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 example above was created by:

var tip = new TNTPoint(5, 12);
var vertLength = 20;
var horzFactor = 8;
var powr = 3; //influences drop shape
var fcolr = lightBlue;
var stroke = darkBlueStroke;
var rotn = 0;
var myTear = new TNTTearDrop(tip, vertLength, 
    horzFactor, powr, fcolr, stroke, rotn);
//mathematical 'center' of the shape
myTear.showCenter = true; 
myTear.showTip = true;
myTear.drawTNTTearDrop(context);
To Draw: myTear.drawTNTTearDrop(context);