Notes:
This app was originally inspired by a student and morphed over time to what you see now. It actually inspired the creation of the TNTRainbow which was a frequent request from our novices.
Another frequent novice request is for the application of randomness. In this design, random events determine Kirby's body color and mouth geometry. Be sure to see how it was done!
Features:
| Comments: |
We used some 'utility' methods to help us do our work. They are listed below for your convenience. Arrays were used to house color families, that assisted with the random selection of body colors. We often use TNTOrb shapes to produce the 3D effect you see in Kirby's body and in his shadow. |
|---|---|
| Even More: |
function createRainbow(){
var r = 6.8; //initial radius of first rainbow arc
var stripeThickness = .45; //thickness of each stripe
var redStroke = new TNTStroke(red, stripeThickness);
var orangeStroke = new TNTStroke(orange, stripeThickness);
var yellowStroke = new TNTStroke(yellow, stripeThickness);
var greenStroke = new TNTStroke(green, stripeThickness);
var lightBlueStroke = new TNTStroke(lightBlue, stripeThickness);
var blueStroke = new TNTStroke(blue, stripeThickness);
var purpleStroke = new TNTStroke(darkPurple, stripeThickness);
var deepPinkStroke = new TNTStroke(deepPink, stripeThickness);
var rainbowColors = [deepPinkStroke,purpleStroke, blueStroke,lightBlueStroke,
greenStroke, yellowStroke, orangeStroke, redStroke];
var nColors = rainbowColors.length;
var angleDelta = 3;
var theta1 = -25;
var theta2 = 205;
var center = new TNTPoint(0,0);
for(var i = 0; i < nColors; i++){
var myArc = new TNTArc(center, r, theta1, theta2, rainbowColors[i]);
myArc.drawTNTArc(context);
r = r + stripeThickness;
theta1 -= angleDelta;
theta2 += angleDelta;
}//end loop
}//end createRainbow
function createKirbyShadow(colorScheme){
var outerShadowCenter = new TNTPoint(0, -4.5);
var outerShadowRadius = 6;
var outerShadow = new TNTDisk(outerShadowCenter,outerShadowRadius,canvasColor,null);
var innerShadowCenter = new TNTPoint(0, -2);
var innerShadowRadius = .4*outerShadowRadius;
var innerShadow = new TNTDisk(innerShadowCenter,innerShadowRadius,colorScheme[2],null);
var nSteps = 50;
var myShadow = new TNTOrb(outerShadow,innerShadow,nSteps);
myShadow.drawTNTOrb(context);
}//end createKirbyShadow
function createKirby(colorScheme){
drawFeet(colorScheme);
drawArms(colorScheme);
drawBody(colorScheme);
drawMouth(colorScheme);
drawEyes(colorScheme);
}//end createKirby
function drawEyes(colorScheme){
var h1 = 1;
var k1 = 2.5;
var leftEyeCenter = new TNTPoint(-h1,k1);
var rightEyeCenter = new TNTPoint(h1, k1);
var k2 = 2.9;
var leftPupilCenter = new TNTPoint(-h1, k2);
var rightPupilCenter = new TNTPoint(h1, k2);
var eyeWx = 1;
var eyeWy = 2.8;
var numSteps = 50;
var rotn = 0;
var leftEye =
new TNTEllipse(leftEyeCenter, eyeWx, eyeWy, black, null, numSteps, rotn);
leftEye.drawTNTEllipse(context);
var rightEye =
new TNTEllipse(rightEyeCenter, eyeWx, eyeWy, black, null, numSteps, rotn);
rightEye.drawTNTEllipse(context);
var pupilWx = .7;
var pupilWy = 1.8;
var leftPupil =
new TNTEllipse(leftPupilCenter, pupilWx, pupilWy, white, null, numSteps, rotn);
leftPupil.drawTNTEllipse(context);
var rightPupil =
new TNTEllipse(rightPupilCenter, pupilWx, pupilWy, white, null, numSteps, rotn);
rightPupil.drawTNTEllipse(context);
}//end drawEyes
function drawMouth(colorScheme){
var mouthCenter = new TNTPoint(0,-.6);
var myDie = Math.floor((Math.random()*4)+1);
if(myDie == 1){
var mouthRadius = Math.random()*1.6 + .2;
var roundMouth = new TNTDisk(mouthCenter,mouthRadius,black,redStroke);
roundMouth.drawTNTDisk(context);
}else if(myDie == 2){
var smileMouth = new TNTCircleSegment(origin, 1, 180, 0, red, blackStroke);
smileMouth.drawTNTCircleSegment(context);
}else if(myDie == 3){
var frownCenter = new TNTPoint(0, -1);
var frownMouth = new TNTCircleSegment(frownCenter, 1.5, 0, 180, red, blackStroke);
frownMouth.drawTNTCircleSegment(context);
}else{
var firstHigh = new TNTPoint(-1, -1);
var firstLow = new TNTPoint(1, -2);
var xLeft = -1.5;
var xRight = 1.5;
var rand = Math.random();
if(rand <=.5) var smirk =
new TNTCosine(firstHigh, firstLow, xLeft, xRight, blackStroke);
else {
var smirk =
new TNTCosine(new TNTPoint(1,-1.5), new TNTPoint(3, -2), xLeft, xRight, blackStroke);
var tongue = new TNTEllipse(new TNTPoint(1, -2), .75, 1, red, blackStroke, 50, 0);
tongue.drawTNTEllipse(context);
}
smirk.drawTNTCosine(context);
}
var x = 3;
var y = 1;
var leftCheekCenter = new TNTPoint(-x, y);
var leftCheek = new TNTEllipse(leftCheekCenter, 2, .8, colorScheme[1], null, 50, 0);
leftCheek.drawTNTEllipse(context);
var rightCheekCenter = new TNTPoint(x, y);
var rightCheek = new TNTEllipse(rightCheekCenter, 2, .8, colorScheme[1], null, 50, 0);
rightCheek.drawTNTEllipse(context);
}//end drawMouth
function drawFeet(colorScheme){
var leftFootCenter = new TNTPoint(-2.5, -4);
var rightFootCenter = new TNTPoint(2.5, -4);
var leftFoot =
new TNTEllipse(leftFootCenter, 7, 3.5, colorScheme[2], null, 50, 45);
leftFoot.drawTNTEllipse(context);
var rightFoot =
new TNTEllipse(rightFootCenter, 7, 3.5, colorScheme[2], null, 50, 315);
rightFoot.drawTNTEllipse(context);
}//end drawFeet
function drawArms(colorScheme){
var x = 4;
var y = 3;
var leftArmCenter = new TNTPoint(-x, y);
var leftArm =
new TNTEllipse(leftArmCenter, 6, 3, colorScheme[0], null, 50, 315);
leftArm.drawTNTEllipse(context);
var rightArmCenter = new TNTPoint(x,y);
var rightArm =
new TNTEllipse(rightArmCenter, 6, 3, colorScheme[0], null, 50, 45);
rightArm.drawTNTEllipse(context);
}//end drawArms
function drawBody(colorScheme){
var numSteps = 60;
var shinyCenter = new TNTPoint(0, 2);
var darkCenter = origin;
var d0 = new TNTDisk(darkCenter, 5.8, colorScheme[0], null);
var d1 = new TNTDisk(shinyCenter, 2, colorScheme[1], null);
var myOrb = new TNTOrb(d0, d1, numSteps);
myOrb.drawTNTOrb(context);
}//end drawBody
|