spiralIcon

JSGS Shapes

TNTRetroDiamond

Your browser does not support HTML5 Canvas
Notes:

A retro shirt pattern inspired this creation (along with that of the TNTRetroStar). We originally tried to use a TNTDiamond, but hit some issues described on that description page.

This shape is made using an array of vertices and it's retro nature allows for a randomly-placed 'antenna.' (We can control the probabability of whether or not the TNTRetroDiamond has an antenna).

As the code below indicates, the pattern above is randomly generated each time the page loads. Study it carefully to see how it works!

TNTRetroDiamond Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoints
  • width: a decimal (known as a 'double' in code)
  • height: also a decimal
  • fillColor: known as fcolr, a TNTColor
  • stroke: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the square about its center. rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
  • probTail: a number in [0,1) indicating the probability of having an 'antenna.'
To Create:

The example 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, .1);

var colrs = [myTeal, myOrange, myNavy, myLightGray];

var center = new TNTPoint(0, 0);

for(var x = XMIN; x < XMAX; x += 6){
    for(var y = YMAX; y > YMIN; y -= 6){
        var anX = x + 3;
        var anY = y - 3;
        var center = new TNTPoint(anX, anY);
        //var disk = new TNTDisk(center, 2, lightBlue, null);
        //disk.drawTNTDisk(context);
        if(Math.random() < .2){
            
            
            var numDiamonds = 1 + Math.floor(Math.random()*3);
            drawRetroDiamondCluster(center, 5, colrs, numDiamonds);
        }
    }
}
To Create/Draw: var aDiamond = new TNTRetroDiamond(aCntr, aWidth, aHeight, theColor, null, 0, .6); aDiamond.drawTNTRetroDiamond(context);
Comments:
shirtPattern
Retro Shirt Pattern

At the labs, we are always on the look out for interesting patterns that we see in 'the real world' and challenge ourselves to see if they can be recreated in code!

The image to the right is a re-creation of the retro pattern that we were originally inspired by!

You can see the TNTRetroStar at its own landing page.
Even More: 
function drawRetroDiamondCluster(cntr, maxDim, colrs, numDiamonds){
    var usedColors = new Array();
    var maxHeight = .75*maxDim + .25*maxDim*Math.random();
    var maxWidth = .5*maxHeight;
    var diamonds = new Array();
    console.log("maxHeight, maxWidth = " + maxHeight + ", " + maxWidth);
    var myX, myY;
    for(var d = 1; d <= numDiamonds; d++){
        var aWidth = addRandomJitterAbout(maxWidth, -.25*maxWidth, .25*maxWidth);
        var aHeight = addRandomJitterAbout(maxHeight, -.25*maxHeight, .25*maxHeight);
        console.log("aHeight, aWidth = " + aHeight + ", " + aWidth);
        
        if(d == 1){
            //center
            myX = addRandomJitterAbout(cntr.x, -.35, .35);
        }else if(d == 2){
            //left
            myX = addRandomJitterAbout(cntr.x - .65*aWidth, -.25, .25);
        }else{
            //right
            myX = addRandomJitterAbout(cntr.x + .65*aWidth, -.25, .25);
        }
        
        myY = addRandomJitterAbout(cntr.y, -.5*aHeight, .5*aHeight);
        var aCntr = new TNTPoint(myX, myY);
        
        //get random non-repeating color
        var cndx = Math.floor(Math.random()*colrs.length);
                console.log("cndx = " + cndx);
        while(usedColors.includes(cndx)){
            cndx = Math.floor(Math.random()*colrs.length);
                console.log("cndx = " + cndx);      
        }
         
        var theColor = colrs[cndx];
        usedColors.push(cndx);
            
        var aDiamond = new TNTRetroDiamond(aCntr, aWidth, aHeight, theColor, null, 0, .6);
        diamonds.push(aDiamond);
        
        //https://stackoverflow.com/questions/5915096/get-a-random-item-from-a-javascript-array    
    }//end for loop

    //draw the diamonds
    while(diamonds.length > 0){
        var ndx = Math.floor(Math.random()*diamonds.length);
        console.log("ndx = " + ndx);
        var theDiamond = diamonds[ndx];
        diamonds.splice(ndx, 1); 
        theDiamond.drawTNTRetroDiamond(context);
        //console.log("aDiamond width: " + aDiamond.width);
    }//end while loop
    
}//end drawRetroDiamondCluster