siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Orb

Your browser does not support HTML5 Canvas

Notes:

A TNTOrb is like a sphere, built by a cluster of 'staged' TNTDisks, stacked via a loop that incrementally changes position and color using a linear transformation of each. Huh? Just look at the code! Note that even conical shapes are possible as well. Can you make some?

Features and Usage:

Primary Attributes:

3 parameters:
bigDisk(TNTDisk), smallDisk(TNTDisk), numberOfSteps(integer)

The more steps, the smoother the color transition from the color of bigDisk to the color of smallDisk If the smallDisk is outside bigDisk, you get a cone-like shape

To Create: (Examples above)

//special points/components
var smallCenter = new TNTPoint(3, 3);
var smallRadius = 1;
var smallDisk = new TNTDisk(smallCenter, smallRadius, white, null);

var bigCenter = new TNTPoint(0, 0);
var bigRadius = 8;
var bigDisk = new TNTDisk(bigCenter, bigRadius, lightGray, null);
var numSteps = 50;

//TNTGraphic Objects
var myOrb = new TNTOrb(bigDisk, smallDisk, numSteps);
//for ease, reusing variables here once they were used to create the first object
bigCenter = origin;
bigRadius = 2;
bigDisk = new TNTDisk(bigCenter, bigRadius, orange, null);
smallCenter = new TNTPoint(-3, -3);
smallRadius = .5;
numSteps = 10;
smallDisk = new TNTDisk(smallCenter, smallRadius, white, null);
var myCarrotNose = new TNTOrb(bigDisk, smallDisk, numSteps);

To Draw:

myOrb.drawTNTOrb(context);
myCarrotNose.drawTNTOrb(context);

Comments:

This shape was inspired by a student many years ago when we were trying to make images that looked more 3-dimensional.

Even More:

This shape would have been impossible without our good-ole point-slope form of a line:

y - y1 = m(x - x1)