spiralIcon

JSGS Shapes

TNTDiagonalGram

Your browser does not support HTML5 Canvas
Notes:

TNTDiagnol-WHAT?! A made-up word featuring a polygon where every combination of vertices (except for the sides) are connected by diagonal lines, creating a web-like string-art figure. Look at the code to see how they are made: essentially it's same as a TNTPolygon but you can specify both diagonal and side stroke values. There was a hefty nested loop that handled the combinatorics necessary to get all the diagonals drawn.

TNTDiagonalGram Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoint
  • numSides: an integer ≥ 3
  • r: a 'double'; the distance from the center to a 'vertex' of the shape (could be thought of as a 'radius'). This establishes the 'size' of the shape.
  • fillColor: TNTColor as fcolr
  • borderStroke: a TNTStroke: to set the border color
  • diagStroke: a TNTStroke: to set the diagonal color and weight
  • rotn: a 'double' that rotates the shape about its center. rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The yellow example above was created by:

var myDiagonalGram = 
    new TNTDiagonalGram(new TNTPoint(0, 0), 8, 13, yellow, blueStroke, orangeStroke, 0);
myDiagonalGram.drawTNTDiagonalGram(context);
To Draw: 
myDiagonalGram.drawTNTDiagonalGram(context);
Comments:

Note you can opt to see only the diagonals if you send 'null' to act as the TNTColor fill color (fcolr) or TNTStroke (scolr).

Even More: