spiralIcon

JSGS Shapes

TNTShadowedDisk

Your browser does not support HTML5 Canvas
Notes:

Can be used to create some cool optical illusions. This library element was inspired when we created this design.

It features a center disk and two others, positioned on either side at a given offset with a given scaled size. This allows the designer to give the illusion of a shadowed and lighten edge. The direction of the light/shadow disks can be set using the rotation parameter.

TNTShadowedDisk Features and Usage:
Primary Attributes:

11 Parameters:

  • center: TNTPoint
  • radius: a decimal (known as a 'double' in code)
  • offsetFactor: a decimal that offsets the shadows
  • scaleFactor: a decimal that scales the shadows
  • fillColor1: TNTColor (can be null for a framework image)
  • fillColor2: TNTColor (can be null for a framework image)
  • fillColor3: TNTColor (can be null for a framework image)
  • stroke1: a TNTStroke: to set the border color as well as the thickness of the sides
  • stroke2: a TNTStroke: to set the border color as well as the thickness of the sides
  • stroke3: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the image about its center.
    rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The example above was created by:

var center = new TNTPoint(0, 0);
var offsetFactor = .8;
var scaleFactor = .8;
var radius = 10;
var fcolr1 = white;
var fcolr2 = lightGray;
var fcolr3 = yellow;
var stroke1 = blueStroke;
var stroke2 = redStroke;
var stroke3 = blackStroke;
var rotn = 0;
var myDisk = new TNTShadowedDisk(center, radius, offsetFactor, 
    scaleFactor, fcolr1, fcolr2, fcolr3, stroke1, stroke2, stroke3, rotn);
myDisk.showCenter = true;
myDisk.drawTNTShadowedDisk(context);
To Draw: myDisk.drawTNTShadowedDisk(context);
Comments:

Cool effects can be achieved when these guys tile a plane with their angles adjusted based on their postion or the number of them tiling the canvas.