JSGS TNT-Designs

This code is fairly-well documented; look at the source code to see how we pulled this design off.

We've often wanted the opportunity to take a shape and set it into a spiral. Consequently, we wrote a function to help us do just that. The function's below.

Notice that is uses a concept of instanceof which checks the nature of the object we've sent it and if it finds a match, it puts it in a spiral. If we wanted to add additional elements for spiralizing, the function would have to be upgraded.

//12/16/15
function makeSpiralOfShapes(center, k, rev, n, shape, adjustOrientation, spiralStroke, myColors) {
    //r = k*theta/PI
    context.beginPath();
    var x, y;
    var pi = Math.PI;
    var r;
    var inc = 200;
    var delta = 2 * pi / inc;
    var b = 2;
    var freq = pi * rev / (b * n);
    var ctr;
    var currentColor;
    var numColors;
    if (myColors != null) numColors = myColors.length;
    else numColors = 0;
    var origOrientation = shape.rotn;
    if (spiralStroke != null) {
        for (var i = 0; i < rev * pi; i += delta) {
            r = k * i / pi;
            x = r * Math.cos(i) + center.x;
            y = r * Math.sin(i) + center.y;
            if (i == 0) {
                context.moveTo(x, y);
            } else context.lineTo(x, y);
        }
        if (spiralStroke != null) {
            context.strokeStyle = spiralStroke.scolr;
            context.lineWidth = spiralStroke.lineWidth;
            context.stroke();
        }
    }
    var sumAngle = 0;
    var shapeCount = 0;
    for (var i = 0; i < rev * pi; i += delta) {
        r = k * i / pi;
        x = r * Math.cos(i) + center.x;
        y = r * Math.sin(i) + center.y;
        sumAngle = i;
        if (sumAngle > freq * shapeCount) {
            shapeCount++;
            sumAngle = 0;
            ctr = new TNTPoint(x, y);
            shape.center = ctr;
            shape.h = ctr.x;
            shape.k = ctr.y;
            var theta = Math.atan2(y, x) * 180 / Math.PI;
            if (adjustOrientation) shape.rotn = origOrientation + theta;
            else shape.rotn = origOrientation;
            if (numColors > 0) {
                var ndx = (shapeCount - 1) % numColors;
                currentColor = myColors[ndx];
                shape.fcolr = currentColor;
            }
            if (shape instanceof TNTPolygon) {
                shape.drawTNTPolygon(context);
            }
            if (shape instanceof TNTStar) {
                shape.drawTNTStar(context);
            }
            if (shape instanceof TNTRose) {
                shape.drawTNTRose(context);
            }
            if (shape instanceof TNTDiamond) {
                shape.drawTNTDiamond(context);
            }
            if (shape instanceof TNTLoopyCircle) {
                shape.drawTNTDiamond(context);
            }
        }
    }
}