Feeling Lucky?

We used this challenge to do the legwork toward making a TNTDie shape for our library.

Here's the code that created the images above:

//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);  
                                        

The 8 parameters for the TNTDie class are a center, a side length, a 'radiusFactor' (for the rounded effect: it's multiplied times the side length in code), a fill color, a 'pip' color, a stroke, a rotation (in degrees) and a value on the die.

The development of the TNTDie class was done in stages:

1. The 'drawOnePip()' method drew the center pip
2. The 'drawThreePip()' used the 'drawOnePip' method and the center pip was translated to the lower left and upper right
3. The 'drawTwoPip' method was just the 'drawThreePip' method without showing the center pip
4. The 'drawFivePip' method was a variant of the 'drawThreePip' method using a reflection of the diagonal pips
5. The 'drawFourPip' method was a variant of the 'drawTwoPip' method
6. The 'drawSixPip' method called the 'drawFourPip' method and then added two additional center pips on the left and the right

All the initial work was done with a 0^° rotation. The rotation about the center of the various pips was made easier with work from the phenomenal site DancesWithCode.

Also, notice that the pip sizes were scaled by the overall size of the die. We calculated the diagonal of the die and used trial and error to see what size pip was needed based on the base rounded rectangle. In this fashion, the pips scale to the size of the die. We varied the sizes of the dice above to demonstrate how well the process works!

Some dice we rounded up at the TNT Lab!