spiralIcon

JSGS Shapes

TNTDie

Your browser does not support HTML5 Canvas
Notes:

We were on a roll with this newbie to the JSGS ecosystem.

This beauty was created using TNTRoundedRectangle and TNTDisk with some fancy math to make sure the image could be rotated properly.

The 'pips' (the spots in each die) are scaled by the overall size of the die as shown by the image above and this reduces the number of parameters we need as we create a die.

TNTDie Features and Usage:
Primary Attributes:

8 Parameters:

  • center: TNTPoint; located at the center of the body of the die
  • side: decimal (known as a 'double' in code); the side length of the die
  • radiusFactor: decimal in [0,1] - affects the roundedness of the die edge. The larger the number, the more rounded the shape
  • fillColor: TNTColor (can be null for a framework image)
  • pipColor: TNTColor (can be null for a framework image)
  • stroke: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotn: a 'double' that rotates the square about its center. rotn > 0 ==> counter clockwise; rotn < 0 ==> clockwise
  • value: an integer in [1,6] representing the number of pips on the die
To Create:

The example above was created by:

//colors:
var dieGreen = new TNTColor(0, 139, 109, "dieGreen");
var dieRed = new TNTColor(254, 53, 24, "dieRed");
var dieWhite = new TNTColor(250, 250, 255, "dieWhite");

var center = new TNTPoint(-5, -2);
var greenDie = new TNTDie(center, 2, .3, dieGreen, white, null, 30, 6);
greenDie.drawTNTDie(context);

center = new TNTPoint(-1, 4);
var whiteDie = new TNTDie(center, 4, .2, dieWhite, black, blackStroke, 45, 2);
whiteDie.drawTNTDie(context);

center = new TNTPoint(5, -4);
var redDie = new TNTDie(center, 8, .1, dieRed, dieWhite, null, -15, 5);
redDie.drawTNTDie(context);

center = new TNTPoint(-7, 7);
var blueDie = new TNTDie(center, 3, .4, blue, white, null, 5, 1);
blueDie.drawTNTDie(context);

center = new TNTPoint(6, 6);
var blackDie = new TNTDie(center, 6, 0, black, white, null, 55, 3);
blackDie.drawTNTDie(context);

center = new TNTPoint(-7, -6);
var goldDie = new TNTDie(center, 4, .5, gold, white, null, -20, 4);
goldDie.drawTNTDie(context);
To Draw: goldDie.drawTNTDie(context);
Comments:

We're using the class keyword in JavaScript to create this shape. Check it out in the source code.

This entry was originally a challenge given to our novices. The biggest hurdle was getting the pips to rotate along with the shape. The notes in the challenge area reflect the chronology of development. The switch command in JavaScript came in handy, as did multiple methods (functions) to draw the proper number of pips.