siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

Origin-Pointing Arrows

Your browser does not support HTML5 Canvas

Notes:

Alternating-color arrows pointing to the origin...

The result of a crafy nested loop and a special function in the tntGraphics engine. Isn't it cute how we used a compound condition , (logical AND: && ) to draw an enlarged TNTPoint at the origin?

Also: look at the nifty way we selected the orange fill color for the arrows ~ it's the modulus operator!!

Features:

Comments:

The hero of this design is a function that belongs to the TNTArrow engine: directArrowToPoint. Take a look at it in the tntGrafix engine.

It's shown below for your convenience:

function directArrowToPoint(aPoint) {
    var delx = this.center.x - aPoint.x;
    var dely = this.center.y - aPoint.y;
    var angl;
    if (delx != 0) {
        if (this.center.y == aPoint.y) {
            if (this.center.x > aPoint.x) this.rotn = 180;
            else this.rotn = 0;
        } else {
            angl = Math.atan2(dely, delx);
            angl *= 180 / Math.PI;
            angl += 180;
            this.rotn = angl;
        }
    } else {
        if (this.center.y > aPoint.y) this.rotn = -90;
        else if (this.center.y < aPoint.y) this.rotn = 90;
        else this.rotn = 0;
    }
}//end function directArrowToPoint                                  
                                
Even More:
var myArrow = new TNTArrow(origin, .5, .5, .25, darkGreen, null, 0);
for (var x = XMIN + 1; x <= XMAX - 1; x++) {
    for (var y = YMAX - 1; y >= YMIN + 1; y--) {
        var ptA = new TNTPoint(x, y);
        ptA.drawTNTPoint(myTNTCanvas, orange);
        myArrow.setCenter(ptA);
        myArrow.directArrowToPoint(origin);
        if ((Math.abs(x) + Math.abs(y)) % 2 == 0) myArrow.fcolr = orange;
        else myArrow.fcolr = darkGreen;
        if(x == 0 && y == 0){
            ptA.factor = 40;
            ptA.drawTNTPoint(myTNTCanvas, red);
        }else{
            myArrow.drawTNTArrow(context);
        }
    }//end inner loop
}//end outer loop