spiralIcon

JSGS Shapes

TNTWheel

Your browser does not support HTML5 Canvas
Notes:

You, too, can be a big wheel with this shape. See its relation to a TNTPie? Or is it just a TNTDisk with a bunch of equally-spaced TNTLines? The green image shows that drawing the 'rim' of the wheel is optional.

Interestingly enough, this shape was used to make our infamous TNTPlusSign!

TNTWheel Features and Usage:
Primary Attributes:

5 Parameters:

  • center: TNTPoint
  • numberOfSpokes: a positive integer
  • spokeLength: a 'double'
  • borderColor: a TNTStroke
  • rotn: (in degrees, about the center);
    Positive angles are counter-clockwise;
    negative angles are clockwise
To Create:

The example above was created by:

//designer colors
var baylorGold = new TNTColor(253, 192, 0);
var baylorGreen = new TNTColor(51, 90, 22);

//designer strokes
var baylorGoldStroke = 
    new TNTStroke(baylorGold, .5);
var baylorGreenStroke = 
    new TNTStroke(baylorGreen, .5);

//special points/components
var center = new TNTPoint(-6, -2);
var radius = 10;

//TCAGraphic Objects
var myWheel = new TNTWheel(center, radius, 
    10, baylorGoldStroke, 0);
myWheel.showRim = true;
myWheel.drawTNTWheel(context);

//once a variable is declared with 
//'var', don't redeclare it, 
//just re-initialize it
center = new TNTPoint(8, 5);
radius = 5;
var myWheel2 = new TNTWheel(center, radius, 
    15, baylorGreenStroke, 45);
myWheel2.showRim = false;
myWheel2.lineCapStyle = "round";
myWheel2.drawTNTWheel(context);
To Draw: myWheel.drawTNTWheel(context);
Comments:

For giggles and grins we thought you'd like to see how these suckers are drawn.

Here is a snippet from the graphics engine:

function drawTNTWheel(context) {
    var myRimStroke = new 
        TNTStroke(this.rimColor, this.rimThickness);

    //in case center was changed in 
    //code, reset the h,k
    this.h = this.center.x;
    this.k = this.center.y;

    var myCircle = 
        new TNTDisk(this.center, this.r, null, myRimStroke);
    if (this.showRim) myCircle.drawTNTDisk(context);
    var delta = 2 * Math.PI / this.numSpokes;
    var trad = 0;
    var rotnRad = this.rotn * Math.PI / 180;
    var p2, lineSeg;
    //setLineCapStyle(this.lineCapStyle);
    for (var i = 1; i <= this.numSpokes; i++) {
        var x = this.h + this.r*Math.cos(trad + rotnRad);
        var y = this.k + this.r*Math.sin(trad + rotnRad);
        p2 = new TNTPoint(x, y);
        lineSeg = new TNTLine(this.center, p2, this.stroke);
        lineSeg.lineCapStyle = this.lineCapStyle;
        lineSeg.drawTNTLine(context);
        trad += delta;
    }
}//end function drawTNTWheel
Who woulda thought we used SohCahToa here?!
Even More:

The showRim property can be used to show/hide the wheel rim; the lineCapStyle property can be set to change the endcap shapes of the lines ("butt", "beveled", "round")