siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Wheel

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.

Features and Usage:

Primary Attributes:

5 parameters:
center(TNTPoint), numberOfSpokes(integer), spokeLength(double), borderColor(TNTStroke), rotationInDegrees(double)

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")

To Create:

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;

center = new TNTPoint(8, 5);
radius = 5;
var myWheel2 = new TNTWheel(center, radius, 15, baylorGreenStroke, 45);
myWheel2.showRim = false;
myWheel2.lineCapStyle = "round";
To Draw:

myWheel.drawTNTWheel(context);
myWheel2.drawTNTWheel(context);

Comments:

The lineCapStyle property can be adjusted to make the spoke ends smooth or rectangular. See the code for details.
Even More:

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++) {
        p2 = new TNTPoint(this.h + this.r * Math.cos(trad + rotnRad), this.k + this.r * Math.sin(trad + rotnRad));
        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?!