spiralIcon

JSGS Shapes

TNTPie

Your browser does not support HTML5 Canvas
Notes:

Loops plus arrays of TNTColors yield a TNTPie! Study this code to see how to deal with arrays. Interesting effects play out if 'null' TNTStrokes are used for pie-segment dividers.

TNTPie Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoint
  • radius: a decimal (known as a 'double' in code)
  • numberOfSlices: a positive integer that cuts the circle into the desired number of 'slices'
  • colorArray: a collection of TNTColors stored in a 'data structure' known as an array.
  • borderColor: a TNTStroke: to set the border color as well as the thickness of the slices
  • showBorders: this is a 'boolean' variable that allows you to hide/show the borders of the pie slices. Learn about the Boolean world at W3Schools!
  • rotn: (in degrees, about the center); Positive angles are counter-clockwise; negative angles are clockwise
To Create:

The example above was created by:

var rainbow = new Array(red, orange, 
    yellow, green, blue, indigo, violet);
blackStroke.lineWidth = .8;
var n = rainbow.length;
var colorWheel = new TNTPie(origin, 
    15, 14, rainbow, blackStroke, 
    true, 10);
colorWheel.drawTNTPie(context);
To Draw: colorWheel.drawTNTPie(context);
Comments:

Be sure to play with various settings for the TNTStrokes!

Notice also what happens if you have 'x' slices and an array of colors that is less than x: the colors 'circle back' and repeat again. See an example at our Test Pattern Challenge.