JSGS Shapes

3 Parameters:

• bigDisk: TNTDisk which is the base of the shape
• smallDisk: another TNTDisk which is the target to which the base is 'morphing'
• numberOfSteps: a positive integer that determines the number of steps it takes to go from the 'bigDisk' to the 'smallDisk'

The examples above were created by:

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);
myOrb.drawTNTOrb(context);

//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);
myCarrotNose.drawTNTOrb(context);
                                    

It's interesting that such a complicated shape only needs 3 incredients. Part of the reason is the fact that each TNTDisk contains multiple pieces of information themselves.

The 'myCarrotNose' orange shape shows what happens when the small disk is outside of the big disk. Also, the limited number of steps (10) lets you see how the evolving disks making up the shape lay up to make, in this case, a more conical shape.

See the TNTOrb in action at this novice design: Elf in Living Room.