spiralIcon

JSGS Shapes

TNTSpire

Your browser does not support HTML5 Canvas
Notes:

TNTSpire is so-called because it looks like a pinnacle (spire) that you might see on a cathedral. We were looking for a shape we could use to form the base for our TNTClub and TNTSpade.

This shape is related to an inSPIREd (sorry) re-engineering of a TNTAstroid where the image is completed in 180° instead of 360° and the curvature of the sides can be modified as shown in the layered figure above. Additionally, it features independent values for the horizontal and vertical radii.

Parametrically, it looks like: 

x = rx*cosp(t), y = ry*sinp(t)

where 'p' is an odd integer.

Notice that the 'center' is actually on the base of the image, on its vertical axis.

The 'oddity' of this shape is that when the power is '1' the image's curvature is concave rather than convex, and appears to be elliptical.

TNTSpire Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoint; located on the base of the image, along on its vertical axis
  • rx, ry: decimals (known as a 'double' in code); the horizontal and vertical radii, respectively. Because of the mathematics, large radii might not be visible on the graph
  • power: odd integer. If you supply something other than that, you might get something weird or something that doesn't show up
  • fillColor: TNTColor (can be null for a framework image)
  • borderColor: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the square about its center. rotn > 0 ==> counter clockwise; rotn < 0 ==> clockwise
To Create:

The example above was created by:

var center = new TNTPoint(3,1);
var rx = 6;
var ry = 9;
var power = 3;
var fcolr = purple;
var stroke = blackStroke;
stroke.lineWidth = .05;
var rotn = 180;
var aSpire = new TNTSpire(center, rx, ry, power, fcolr, stroke, rotn);
aSpire.drawTNTSpire(context);

rx = 6;
ry = 7;
power = 5;
fcolr = yellow;
stroke = blackStroke;
var rotn = 180;
var aSpire2 = new TNTSpire(center, rx, ry, power, fcolr, null, rotn);
aSpire2.drawTNTSpire(context);

rx = 6;
ry = 3;
power = 7;
fcolr = orange;
stroke = blackStroke;
var rotn = 180;
var aSpire3 = new TNTSpire(center, rx, ry, power, fcolr, null, rotn);
aSpire3.drawTNTSpire(context);

rx = 6;
ry = 3;
power = 1;
fcolr = medGreen;
stroke = blackStroke;
var rotn = 0;
var aSpire4 = new TNTSpire(center, rx, ry, power, fcolr, stroke, rotn);
aSpire4.drawTNTSpire(context);

rx = 6;
ry = 7;
power = 9;
fcolr = blue;
stroke = blackStroke;
var rotn = 0;
var aSpire5 = new TNTSpire(center, rx, ry, power, fcolr, null, rotn);
aSpire5.drawTNTSpire(context);

rx = 4;
ry = 4;
power = 3;
fcolr = black;
stroke = null;
var rotn = 0;
center = new TNTPoint(-5, 5);
var aSpire6 = new TNTSpire(center, rx, ry, power, fcolr, null, rotn);
aSpire6.drawTNTSpire(context);
To Draw: aSpire.drawTNTSpire(context);
Comments: This is one of the first shapes to utilize the class keyword in JavaScript within the TNT Shapes family. Check it out in the source code.