spiralIcon

JSGS Shapes

TNTPulsar

Your browser does not support HTML5 Canvas
Notes:

A recent P5JS project featuring Pinky and the Brain provided inspiration for this shape. If you look at the background image featured there, you'll see a star-like shape. The rest is history. We dubbed this image: TNTPulsar which is nothing more than a couple of TNTQuadStar shapes 'glued' together!

This shape was created with a 'class' construct. Check out that source code below.

TNTPulsar Features and Usage:
Primary Attributes:

9 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
  • rd: also a decimal, diagonal 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
  • fcolrD: the TNTColor of the diagonal pair of triangles
  • strk: a TNTStroke: to set the border color of the triangles

The TNTQuadStars are created in the TNTPulsar'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 lightPurple = new TNTColor(170, 174, 217);

var center = new TNTPoint(0, 0);
var aDisk = new TNTDisk(center, 2, gold, yellowStroke);
var factor = 1.2;
var p1 = new TNTPulsar(aDisk, 4*factor, 6*factor, 5*factor, 0, myOrange, myNavy, myLightGray, goldStroke);
p1.drawTNTPulsar(context);

var center2 = new TNTPoint(-7, 5);
var bDisk = new TNTDisk(center2, .5, lightPurple, null);
var factor = .6;
var p2 = new TNTPulsar(bDisk, 4*factor, 5*factor, 2*factor, -5, lightPurple, lightPurple, lightPurple, null);
p2.drawTNTPulsar(context);
To Create/Draw: var factor = 1.5;
var p1 = new TNTPulsar(aDisk, 4*factor, 6*factor, 5*factor, 0, myOrange, myNavy, myLightGray, goldStroke);
p1.drawTNTPulsar(context);
Comments:

Again, we made a new shape by combining other shapes. Code reuse!
Even More:

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

class TNTPulsar{
    constructor(dsk, rh, rv, rd, rotn, fcolrH, fcolrV, fcolrD, strk){
        this.dsk = dsk;
        this.rh = rh;
        this.rv = rv;
        this.rd = rd;
        this.rotn = rotn;
        this.fcolrH = fcolrH;
        this.fcolrV = fcolrV;
        this.strk = strk;
        //foreground TNTQuadStar
        this.fgQS = new TNTQuadStar(dsk, rh, rv, rotn, fcolrH, fcolrV, strk);
        //background TNTQuadStar
        this.bgQS = new TNTQuadStar(dsk, rd, rd, rotn+45, fcolrD, fcolrD, strk);
        this.setCenter = setCenter;
    }//end constructor

    drawTNTPulsar(){
        this.bgQS.drawTNTQuadStar(context);
        this.fgQS.drawTNTQuadStar(context);
        this.dsk.drawTNTDisk(context);
    }//end drawTNTPulsar

}//end classPulsar