Notes:
A cute twist on the spooky festive icon. This ghost, while simple and cute, was a menace to create ;)
The head was made with a limacon, and the body was made with an astroid and many teardrops. The code below is the main body, but there is also a function to cover the black strokes not found below.
Features:
| Design Scale: |
Canvas size: |
|---|---|
| Even more: |
The shape, apart from the outline was created with two functions, shown below:
function drawGhostHead(){
//drawing head shape
var ptA = new TNTPoint(0, 2.5);
var head = new TNTLimacon(ptA, 3, 1.95, offWhite, offWhite, blackStroke, 90);
head.drawTNTLimacon(context);
//drawing eyes
var leftEye = new TNTEllipse(new TNTPoint(-.25,5.5), .75, 1, black, null, 200, 0);
leftEye.drawTNTEllipse(context);
var rightEye = new TNTEllipse(new TNTPoint(1.25,5.5), .75, 1, black, null, 200, 0);
rightEye.drawTNTEllipse(context);
//drawing mouth
var mouth = new TNTDisk(new TNTPoint(.5,4.25), .4, black, null);
mouth.drawTNTDisk(context);
}//end function drawGhostHead
function drawGhostBody(){
//drawing curtains
var mainSkirt = new TNTTearDrop(new TNTPoint(0.0,7.15), 10, 8.4, 10, offWhite, blackStroke, 0);
mainSkirt.drawTNTTearDrop(context);
var leftCurtain = new TNTTearDrop(new TNTPoint(-.7,1.85), 5, 42/14, 10, offWhite, blackStroke, -5.5);
leftCurtain.drawTNTTearDrop(context);
var rightCurtain = new TNTTearDrop(new TNTPoint(1,1.85), 5, 45/14, 10, offWhite, blackStroke, 8);
rightCurtain.drawTNTTearDrop(context);
//drawing left and right curve
var mainBody = new TNTAstroid(new TNTPoint(0.05,1.1), 4.3, offWhite, blackStroke, 45);
mainBody.drawTNTAstroid(context);
var rightCurve = new TNTTearDrop(new TNTPoint(1.2,3.4), 4.1, 10.2, 10, offWhite, blackStroke, 90);
rightCurve.drawTNTTearDrop(context);
}
|
| Even More: |
Additional insights here |