spiralIcon

JSGS Shapes

TNTEye

Your browser does not support HTML5 Canvas
Notes:

We've got our eye on you! Many novice designs required eyes so we made a function for them! We were motivated to make this function so we could use it in the development of our TNTGhost.

In this development, we also created a member function of TNTEye (yes, a 'method'), 'drawDuplicateAt', that allows us to make a duplicate of an existing eye in an offset location, making it easier to have a pair of eyes.

Click the 'Reload' button to watch the eye directions randomly move around the eye!

TNTEye Features and Usage:
Primary Attributes:

7 Parameters:

  • base: TNTDisk, the 'base' of the eye that establishes the basic location and size of the entire design
  • pupilFactor: a positive factor that creates a pupil size as a factor of the eye's base
  • pupilPlacement: a positive distance from the base center to the pupil center. It can extend beyond the base for weird eye variations
  • shouldRandomlyPlacePupil: a boolean (true/false) variable that allows randomly placed pupils within the eye. This setting affects radius and direction and overrides other design variables
  • shouldPupilBeTangent: a boolean (true/false) variable that forces the pupil to be tangent to the eye base regardless of other variable settings
  • dirn: eye direction in degrees. Positive values are counter clockwise
  • eyeColors and eyeStrokes: Arrays of TNTColors and TNTStrokes. The order: base, pupil. Remember you can use 'null' to prevent usage

If you want to use the function 'drawDuplicateAt', just provide the x and y offsets you want in the call to the function. See the example notes below.
To Create:

The example above was created by:

//head and mouth
var head = new TNTDisk(new TNTPoint(0, 2), 7, yellow, blackStroke);
head.drawTNTDisk(context);
var mouth = new TNTEllipse(new TNTPoint(2, -2), 4, 2, black, redStroke, 200, 30);
mouth.drawTNTEllipse(context);

//the 'base' of the eye, in this case, the whites of the eye
var eyeBase = new TNTDisk(new TNTPoint(-2,3), 2, white, blackStroke);
var eyeColors = new Array(white, black);
var eyeStrokes = new Array(lightGrayStroke, blueStroke);
var myEye1 = new TNTEye(eyeBase, .3, 1.2, true, false, 25, eyeColors, eyeStrokes);
myEye1.drawTNTEye(context);
myEye1.drawDuplicateAt(.25, 2);
To Draw: 
myEye1.drawTNTEye(context);
Comments:

Note that the base info provides the basic size and location of the eye. Thanks, encapsulation!