spiralIcon

JSGS Shapes

TNTDiamond

Your browser does not support HTML5 Canvas
Notes:

Ironically, a TNTDiamond is based on a TNTEllipse! Look at it's code and realize it's just an ellipse with a center, width, height and possibly a rotation: it's just drawn with an 'increment' of 2 which produces a 4-sided shape.

TNTDiamond Features and Usage:
Primary Attributes:

6 Parameters:

  • center: TNTPoints
  • width: a decimal (known as a 'double' in code)
  • height: also a decimal
  • fillColor: known as fcolr, a TNTColor
  • 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:

//special points/components
var center = new TNTPoint(0, 0);
var radius = 10;

//TCAGraphic Objects
blueStroke.setStrokeLineWidth(1);
var myDiamond = new TNTDiamond(center, 18, 12, green, blueStroke, -10);
myDiamond.drawTNTDiamond(context);
To Draw: myDiamond.drawTNTDiamond(context);
Comments:

DANGER! Because these shapes are drawn based on an oval-type shape that's just been 'digitized' with (effectively) 4 dots, there can be 'issues' when connecting their vertices. If you MUST have a RELIABLE diamond shape, you may have to make one from scratch using straight lines.

Update! You can use a TNTRetroDiamond to do your dirty work if this older shape fails you!

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.