siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

Circuit

Your browser does not support HTML5 Canvas

Notes:

Alternating shapes, via a special TNT function!

As you can see from the function snippet below, we are able to use the 'object' nature of a graphic element to make decisions about when to graph whichever object. We simply use JavaScript's 'instanceof' operator and VOILA! a graphed shape!

Features:

Comments:
function tileWithShapeWithAlternatingOffsets(obj, upperLeft, lowerRight, inc, offsetX, offsetY) {
    var rowCount = 0;
    var myCenter;
    for (var y = upperLeft.y; y >= lowerRight.y; y -= offsetY) {
        rowCount++;
        for (var x = upperLeft.x; x <= lowerRight.x; x += inc) {
            if (rowCount % 2 == 0) myCenter = new TNTPoint(x + offsetX, y);
            else myCenter = new TNTPoint(x, y);
            obj.center = myCenter;
            if (obj instanceof TNTSquare) obj.drawTNTSquare(context);
            if (obj instanceof TNTRectangle) obj.drawTNTRectangle(context);
            if (obj instanceof TNTDisk) obj.drawTNTDisk(context);
            if (obj instanceof TNTStar) obj.drawTNTStar(context);
            if (obj instanceof TNTPolygon) obj.drawTNTPolygon(context);
            if (obj instanceof TNTDiagonalgram) obj.drawTNTDiagonalgram(context);
            if (obj instanceof TNTEllipse) obj.drawTNTEllipse(context);
            if (obj instanceof TNTDiamond) obj.drawTNTDiamond(context);
            if (obj instanceof TNTOrb) obj.drawTNTOrb(context);
            if (obj instanceof TNTWheel) obj.drawTNTWheel(context);
            if (obj instanceof TNTRose) obj.drawTNTRose(context);
            if (obj instanceof TNTPie) obj.drawTNTPie(context);
            if (obj instanceof TNTPlusSign) obj.drawTNTPlusSign(context);
            if (obj instanceof TNTRose) obj.drawTNTRose(context);
            if (obj instanceof TNTClover) obj.drawTNTClover(context);
            if (obj instanceof TNTFigure8) obj.drawTNTFigure8(context);
            if (obj instanceof TNTRing) obj.drawTNTRing(context);
            if (obj instanceof TNTArrow) obj.drawTNTArrow(context);
            if (obj instanceof TNTRoundedRectangle) obj.drawTNTRoundedRectangle(context);
            if (obj instanceof TNTPokeball) obj.drawTNTPokeball(context);
            if (obj instanceof TNTLoopyCircle) obj.drawTNTLoopyCircle(context);
        }
    }
}                                        
                                    
Even More:
redStroke.lineWidth = .1;
var myShape = new TNTPlusSign(origin, 1, redStroke, 0);
var inc = 3;
var offsetX = 1.5;
var offsetY = 1.5;
tileWithShapeWithAlternatingOffsets(myShape, UL, LR, inc, offsetX, offsetY);

var aCircle = new TNTDisk(origin, .5, null, redStroke);
inc = 3;
UL = UL.translate(-1.5, 0);
tileWithShapeWithAlternatingOffsets(aCircle, UL, LR, inc, offsetX, offsetY);