spiralIcon

JSGS Shapes

TNTSquare

Your browser does not support HTML5 Canvas
Notes:

Need a square? We're on it! Just tell us it's center (a TNTPoint), it's side-length, s, a fill color (fcolr, TNTColor) and a stroke (TNTStroke) and we'll dish one up. We can even give it a rotation (rotn in degrees) if you'd like!

TNTSquare Features and Usage:
Primary Attributes:

5 Parameters:

  • center: TNTPoints
  • sideLength: a decimal (known as a 'double' in code)
  • 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 theCenter = new TNTPoint(2, 5);
var side = 10;
var mySquare = new TNTSquare(theCenter, side, medGreen, blackStroke, -20);
mySquare.showCenter = true;
mySquare.showPoints = true;
To Draw: mySquare.drawTNTSquare(context);
Comments: TNTSquares sport two attributes: showCenter and showPoints. When true, those points will appear along with the TNTSquare.
Even More:

The TNTSquare has a cousin: TNTTwoTonedSquare Want a challenge? Check out the Warped Square Illusion Challenge and see how you could pull it off.

When tiled in a plane, TNTSquares can create some interesting optical illusions.