siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT ShadowedDisk

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.

Features and Usage:

Primary Attributes:

11 parameters:
center of front disk(TNTPoint), radius(positive real number), offsetFactor(positive real number, the amount left and right disks should be moved from center), scaleFactor(positive real number, the amount left and right disks should be scaled in size), 3 fill colors(TNTColors for center left and right disks respectively), 3 strokes(TNTStrokes for center left and right respectively), rotation(in degrees, rotn of left and right disks about the center)

To Create:

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);

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.