spiralIcon

JSGS Shapes

TNTQuadStar

Your browser does not support HTML5 Canvas
Notes:

We recently imagined a shape where 2 isosceles triangles lined up base-to-base along the diameter of a circle in both the horizontal and vertical dimensions. Each pair had their own heights. The result was this charming shape, the TNTQuadStar. Admittedly, our inspiration for TNTQuadStar (and its cousin TNTPulsar) was the background of an image of Pinky and the Brain in our Pondering P5JS app.

It was easy to implement by using a TNTDisk and two TNTRetroDiamonds.

As the code below indicates, this shape was created with a 'class' construct. Check out that source code.

TNTQuadStar Features and Usage:
Primary Attributes:

7 Parameters:

  • dsk: TNTDisk; notice that it will sport its own fill color and stroke
  • rh: a decimal (known as a 'double' in code); horizontal arm radii
  • rv: also a decimal, vertical arm radii
  • rotn: a 'double' that rotates the image about its center. rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
  • fcolrH: a TNTColor of the horizontal pair of triangles
  • fcolrV: the TNTColor of the vertical pair of triangles
  • strk: a TNTStroke: to set the border color of the triangles

The TNTRetroDiamonds are created in the TNTQuadStar's constructor.
To Create:

The image above was created by:

var myTeal = new TNTColor(66, 129, 146, "myTeal");
var myOrange = new TNTColor(233, 112, 55, "myOrange");
var myNavy = new TNTColor(34, 71, 145, "myNavy");
var myLightGray = new TNTColor(202, 192, 180, "myLightGray");
var myOffWhite = new TNTColor(229, 217, 203);
var myBlackStroke = new TNTStroke(black, .3);

var center = new TNTPoint(4, 3);

var aDisk = new TNTDisk(center, 2, offWhite, null);

//var aStroke = new TNTStroke(myTeal, .3);
var aStroke = null;

//dsk, rh, rv, rotn, fcolrH, fcolrV, strk
var qt1 = new TNTQuadStar(aDisk, 6, 4, 0, myOrange, myNavy, aStroke);
qt1.drawTNTQuadStar(context);

var bDisk = new TNTDisk(new TNTPoint(-4, -3), 2, myOrange, myBlackStroke);
var qt2 = new TNTQuadStar(bDisk, 2, 4, 45, myTeal, myTeal, myBlackStroke);
qt2.drawTNTQuadStar(context);

var cDisk = new TNTDisk(new TNTPoint(-4, 5), 1, forestGreen, null);
var qt3 = new TNTQuadStar(cDisk, 2, 4, -20, forestGreen, darkGreen, myBlackStroke);
qt3.drawTNTQuadStar(context);
To Create/Draw: var qt1 = new TNTQuadStar(aDisk, 6, 4, 0, myOrange, myNavy, aStroke);
qt1.drawTNTQuadStar(context);
Comments:

Whenever we can we try to use existing shapes to create new ones. That certainly was the case here.

Notice how one of the shapes uses the background color of the canvas as it's fill color of the disk element. This gives the illusion of a 'hole' in the object: we're using 'negative space' to craft another type of hybrid shape.
Even More:

We used a 'class' methodology to create this shape:

class TNTQuadStar{
    constructor(dsk, rh, rv, rotn, fcolrH, fcolrV, strk){
        console.log("...TNTQuadStar constructor...");
        this.dsk = dsk;
        this.rh = rh;
        this.rv = rv;
        this.rotn = rotn;
        this.fcolrH = fcolrH;
        this.fcolrV = fcolrV;
        this.strk = strk;
        //horizontal diamond
        this.hDiamond = new TNTRetroDiamond(dsk.center, 2*dsk.r, 2*rh, fcolrH, strk, rotn-90, 0);
        //vertical diamond
        this.vDiamond = new TNTRetroDiamond(dsk.center, 2*dsk.r, 2*rv, fcolrV, strk, rotn, 0);

        this.setCenter = setCenter;
    }//end constructor

    drawTNTQuadStar(){
        console.log("...drawTNTQuadStar...");
        this.hDiamond.drawTNTRetroDiamond(context);
        this.vDiamond.drawTNTRetroDiamond(context);
        this.dsk.drawTNTDisk(context);
    }//end drawTNTQuadStar

}//end class