siteIcon

Aggie Ghost

Kent P, 2022

Your browser does not support HTML5 Canvas

Notes:

This little ghost has really gotten around! It started out as a JavaScript entity in CodeHS and was adopted into the Python Turtle world in a Tracy the Turtle application.

It has come full circle back into JavaScript in the JSGS world, and hopes to find itself in the JSGS Shapes Library one day!

Features:
Design Scale:

Canvas size:

Comments:

The feet were 'parameterized' so that a loop could be used to create them. Check out the source code:

//ghost feet: parameterize!!!
var numFeet = 5;
if(numFeet > 8) numFeet = 8;
if(numFeet < 0) numFeet = 0;

var toeRadius = width/(2*numFeet);
console.log("toeRadius = " + toeRadius);

var toeY = -3;
var toeX = -3 + toeRadius;
for(var t = 1; t <= numFeet; t++){
    var tCenter = new TNTPoint(toeX, toeY);
    var aToe = new TNTDisk(tCenter, toeRadius, aggieMaroon, null);
    aToe.drawTNTDisk(context);
    toeX += 2*toeRadius;
}//end loop    
                                        
Even More:

The 'eye span' (distance between the left eye and the right eye, inclusive) was establshed as a fraction of the head radius. The 'eye span' and an 'eye space' (space between the eyes) helped us to find an expression for the 'eyeRadius.'

Placement of the eyes and the pupils was made easier using the translate function that is incorporated into the TNTPoint ecosystem. See the snippet below:

//ghost eyes
var eyeSpan = .8*2*radius;
var eyeSpace = .1*radius;
var eyeRadius = (eyeSpan-eyeSpace)/4.0;
var pupilRadius = .4*eyeRadius;

//left eye
var leftEyeCenter = center.translate(-eyeSpace/2 - eyeRadius, 0);
console.log("leftEyeCenter: " + leftEyeCenter);
var leftEye = new TNTDisk(leftEyeCenter, eyeRadius, aggieGray, null);
leftEye.drawTNTDisk(context);
var leftEyePupilCenter = 
    leftEyeCenter.translate(eyeRadius - pupilRadius, 0);
var leftPupil = 
    new TNTDisk(leftEyePupilCenter, pupilRadius, black, null);
leftPupil.drawTNTDisk(context);

//right eye
var rightEyeCenter = center.translate(eyeSpace/2 + eyeRadius, 0);
var rightEye = 
    new TNTDisk(rightEyeCenter, eyeRadius, aggieGray, null);
rightEye.drawTNTDisk(context);
var rightEyePupilCenter = 
    rightEyeCenter.translate(eyeRadius - pupilRadius, 0);
var rightPupil = 
    new TNTDisk(rightEyePupilCenter, pupilRadius, black, null);
rightPupil.drawTNTDisk(context);