spiralIcon

JSGS Shapes

TNTArchy

Your browser does not support HTML5 Canvas
Notes:

Seriously?! TNTArchy?

Yes, its goofy. Usage complaints about TNTParabola and TNTArch motivated us to create this shape which is easier to design and easier to rotate since it now rotates about its vertex. Recall that the vertex is the top (or bottom) of the arch shape. The vertex may be shown by using the 'showVertex' boolean property.

These upgrades make TNTArchy compatible with our fancy Interactive TNTArch page.

We also added a property, showEndPts which adds TNTPoints to the ends of the arch shape. You're welcome.

Why keep the other shapes when this one is better?! Simple: Backward compatibility. Show former design work uses those shapes so we still include them as 'legacy' offerings. Cool, huh?

TNTArchy Features and Usage:
Primary Attributes:

7 Parameters:

  • vertex: TNTPoint; the top or bottom of the arch
  • a: a real number; controls the width of the arch; positive values make the vertex a 'low' point; negative values make it a 'high' point
  • xleft: an positive real number; the distance from the vertex on the left side of the arch
  • xRight: an positive real number; the distance from the vertex on the right side of the arch
  • 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 VERTEX.
    rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The examples above were created by:

var vertex = new TNTPoint(1, 3); //(h,k)
var a = -.2;
var xleft = 6; //shift to left of 'h' should be positive
var xright = 4; //shift to right of 'h' should be positive
var fcolr = yellow;
var stroke = orangeStroke;
var rotn = 90;
var myArchy = new TNTArchy(vertex, a, xleft, xright, fcolr, stroke, rotn);
myArchy.showVertex = true;
myArchy.drawTNTArchy(context);

var myArchy2 = new TNTArchy(vertex, a, xleft, xright, null, blueStroke, 0);
myArchy2.showVertex = true;
myArchy2.showEndPts = true;
myArchy2.drawTNTArchy(context);

var myArchy3 = new TNTArchy(vertex, a, xleft, xright, null, redStroke, 180);
myArchy3.showVertex = true;
myArchy3.drawTNTArchy(context);

var myArchy4 = new TNTArchy(vertex, a, xleft, xright, null, medGreenStroke, 270);
myArchy4.showVertex = true;
myArchy4.showEndPts = true;
myArchy4.drawTNTArchy(context);

var myArchy5 = new TNTArchy(new TNTPoint(10,10), .2, 4, 3, pink, medGreenStroke, -25);
myArchy5.showVertex = true;
myArchy5.showEndPts = true;
myArchy5.accentColor = orange;
myArchy5.drawTNTArchy(context);
To Draw: myArchy.drawTNTArchy(context);