spiralIcon

JSGS Shapes

TNTArch

Your browser does not support HTML5 Canvas
Notes:

Complaints about TNTParabola were that it was too difficult to design the shape based on the a, b and c coefficients in the quadratic equation. The TNTArch uses a vertex and some positive distances on either side of it to give you better control over the design. Recall that the vertex is the top (or bottom) of the arch shape. The vertex may be shown by using the 'showVertex' boolean property.

If you'd like to see how the different parameters affect the shape, check out our Interactive TNTArch page.

Newsflash! A observant novice reported that this shape is also difficult to use because the rotation is not around the vertex. Therefore, we created an improved shape, TNTArchy that rotates about the vertex.

TNTArch 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 center.
    rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The example above was 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 = blue;
var stroke = orangeStroke;
var rotn = 0;
var myArch = new TNTArch(vertex, a, xleft, xright, fcolr, stroke, rotn);
myArch.showVertex = true;
myArch.drawTNTArch(context);
To Draw: myArch.drawTNTArch(context);