This final post in the series for the html5eyeball project we are going to run down the settings and methods available.
You can see most of the options in action in the select your eyeball live demo. The only setting you cannot change is the irisColours which defines the random set of colours used when you click the eyeball.
More examples of changing irisColours can be seen in the twelve eyeballs demo.
targetId
This is the string id of the element you want to contain the eyeball. It is set via the constructor and I can not think of a good reason why you would set it manually.
The size of the eyeball and its location are defined by the css for that html element.
travel
Distance the iris is allowed to travel within the eyeball.
A value of "1.0" will permit the iris to travel from the centre all the way to the edge. "0.0" means the iris cannot travel at all.
In the html5eyeball cutout example travel is set to "0.5" to avoid the iris disappearing behind the eyelids. The twelve eyeballs demo has all the eyeballs travel set to "1.0" to allow full movement.
hideRenderLayers
The default is to hide the layers that make up the eyeball. When set to true the canvas elements
are shown. "canvasMain" is the always shown and *is* the eyeball, the others have logical names.
FYI the names are not html element ids but css classes.
hideMarkers
The markers define which way the eyeball is looking and how far the iris has travelled.
They were instrumental in the spikes(pun intended) that make up the history of the html5eyeball project.
JSFiddle
JSFiddle
useCircleScaling
As simple as "circle scaling" is, it is the one bit of the html5eyeball project I am most proud of. Without it, the iris and its movement looks flat, with it, the visual dynamic is transformed.
Read all about Circle Scaling elsewhere in the series.
JSFiddle
numLinesIris
Number of random lines that are projected from the centre of the iris.
Covered elsewhere in the series.
eyeColour
Initial iris colour.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
irisOuterColour
This is the colour that the iris lines fade to randomly, normally a highly transparent colour.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
irisInternalColour
Is the ambient iris colour where no eyeColour or irisOuterColour rendered pixels exist. Normally set to black.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
eyeballGradient1
The central part of the background eyeball's colour, often white, takes up 75%.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
eyeballGradient2
The next 10% of the eyeball background gradient.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
eyeballGradient3
The last 15% of the eyeball background gradient, the edge.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
veinColour
Colour of the veins.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
veinWidth
The width of the veins. Where "1.0" sets a line to have a 1px width, non-anti aliased. Any non whole number creates an nice smooth anti aliased result.
veinBranches
The number of times the vein algorithm will create a new branch. A value of "1" creates no branches only the initial single starting line.
WARNING! Setting high values will slow your computer down exponentially and as each branch gets shorter you will not see them anyway.
There is a detailed blog post about the veins.
JSFiddle
pupilScale
Set to "1.0" the pupil will be drawn with a diameter of 1/6th the diameter of the eyeball.
animatePupil
When "setPupil()" or "setIris()" is called the pupil will be drawn twice its current size and then a 30 frames per second it will shrink back to its normal diameter(see above). The scaling algorithm uses the non-linear circle scaling method.
pupilColour
Colour of the pupil, I suggest black.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
highlight1/highlight2
These two parameters define the location, size and appearance of the two highlights.
The setting is a JSON string defining
x horizontal location as a decimal of total width. e.g. 0.5 is half way.
y vertical location as a decimal of total height. e.g. 0.0 is the top.
width width as a decimal of total width. e.g. 0.5 is half the total size.
height height as a decimal of total height. e.g. 1.0 is the same as the full height.
colour1 defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
colour2 defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
irisColours
An array of colours used a a random pool when the "setPupil()" or "setIris()" method are called.
Defined as a JSON objects with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
init()
Called after the settings are correct, it will recreate all the required layers.
doDraw()
With no parameters centres the eye. Often called with the mouse coordinates to set the eye to look at the mouse location.
(Example uses jQuery.)
The Cutout - linked demo passes an offset value to each eye to keep them linked.
(Example uses jQuery.)
The linkOffsetX/Y values are specific to the location of the eyeballs in the photo used.
setIris() / setPupil()
When called with no parameters sets the iris to a random colour from the "irisColours" array. As this is truly random, there is a possibility that the colour chosen will the colour already in use.
If "animatePupil" is true then the pupil is animated(see above).
WARNING If "animatePupil" is false then the iris colour is updated but NOT redrawn, call doDraw().
No other methods are expected to be called from outside the Eyeball object, but I am not hiding them if you want to play. No documentation or future compatibility is provided for these.
Trouble shooting
If nothing shows and there are no JavaScript errors it is most likely that your html element that holds the eyeball is either, not visible, off screen or has no width / height set in CSS.
And that concludes the html5eyeball project series of f-log posts.
You can see most of the options in action in the select your eyeball live demo. The only setting you cannot change is the irisColours which defines the random set of colours used when you click the eyeball.
More examples of changing irisColours can be seen in the twelve eyeballs demo.
targetId
This is the string id of the element you want to contain the eyeball. It is set via the constructor and I can not think of a good reason why you would set it manually.
var eyeball = new Eyeball("eyeball");
...
<div id="eyeball" />
The size of the eyeball and its location are defined by the css for that html element.
travel
Distance the iris is allowed to travel within the eyeball.
A value of "1.0" will permit the iris to travel from the centre all the way to the edge. "0.0" means the iris cannot travel at all.
In the html5eyeball cutout example travel is set to "0.5" to avoid the iris disappearing behind the eyelids. The twelve eyeballs demo has all the eyeballs travel set to "1.0" to allow full movement.
hideRenderLayers
The default is to hide the layers that make up the eyeball. When set to true the canvas elements
- canvasMain
- canvasBackground
- canvasVeins
- canvasIris
- canvasHighlights
are shown. "canvasMain" is the always shown and *is* the eyeball, the others have logical names.
FYI the names are not html element ids but css classes.
hideMarkers
The markers define which way the eyeball is looking and how far the iris has travelled.
They were instrumental in the spikes(pun intended) that make up the history of the html5eyeball project.
JSFiddle
JSFiddle
useCircleScaling
As simple as "circle scaling" is, it is the one bit of the html5eyeball project I am most proud of. Without it, the iris and its movement looks flat, with it, the visual dynamic is transformed.
Read all about Circle Scaling elsewhere in the series.
JSFiddle
numLinesIris
Number of random lines that are projected from the centre of the iris.
Covered elsewhere in the series.
eyeColour
Initial iris colour.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
irisOuterColour
This is the colour that the iris lines fade to randomly, normally a highly transparent colour.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
irisInternalColour
Is the ambient iris colour where no eyeColour or irisOuterColour rendered pixels exist. Normally set to black.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
eyeballGradient1
The central part of the background eyeball's colour, often white, takes up 75%.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
eyeballGradient2
The next 10% of the eyeball background gradient.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
eyeballGradient3
The last 15% of the eyeball background gradient, the edge.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
veinColour
Colour of the veins.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
veinWidth
The width of the veins. Where "1.0" sets a line to have a 1px width, non-anti aliased. Any non whole number creates an nice smooth anti aliased result.
veinBranches
The number of times the vein algorithm will create a new branch. A value of "1" creates no branches only the initial single starting line.
WARNING! Setting high values will slow your computer down exponentially and as each branch gets shorter you will not see them anyway.
There is a detailed blog post about the veins.
JSFiddle
pupilScale
Set to "1.0" the pupil will be drawn with a diameter of 1/6th the diameter of the eyeball.
animatePupil
When "setPupil()" or "setIris()" is called the pupil will be drawn twice its current size and then a 30 frames per second it will shrink back to its normal diameter(see above). The scaling algorithm uses the non-linear circle scaling method.
pupilColour
Colour of the pupil, I suggest black.
Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
highlight1/highlight2
These two parameters define the location, size and appearance of the two highlights.
The setting is a JSON string defining
x horizontal location as a decimal of total width. e.g. 0.5 is half way.
y vertical location as a decimal of total height. e.g. 0.0 is the top.
width width as a decimal of total width. e.g. 0.5 is half the total size.
height height as a decimal of total height. e.g. 1.0 is the same as the full height.
colour1 defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
colour2 defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
irisColours
An array of colours used a a random pool when the "setPupil()" or "setIris()" method are called.
Defined as a JSON objects with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
init()
Called after the settings are correct, it will recreate all the required layers.
doDraw()
With no parameters centres the eye. Often called with the mouse coordinates to set the eye to look at the mouse location.
$(window).mousemove(function (event) {
eyeball.doDraw(event.pageX, event.pageY);
});
(Example uses jQuery.)
The Cutout - linked demo passes an offset value to each eye to keep them linked.
// linking offsets
var linkOffsetX = 55;
var linkOffsetY = 4;
// trap mouse movements and cause updates
$(window).mousemove(function (event) {
eb1.doDraw(event.pageX - linkOffsetX, event.pageY);
eb2.doDraw(event.pageX + linkOffsetX, event.pageY + linkOffsetY);
});
(Example uses jQuery.)
The linkOffsetX/Y values are specific to the location of the eyeballs in the photo used.
setIris() / setPupil()
When called with no parameters sets the iris to a random colour from the "irisColours" array. As this is truly random, there is a possibility that the colour chosen will the colour already in use.
If "animatePupil" is true then the pupil is animated(see above).
WARNING If "animatePupil" is false then the iris colour is updated but NOT redrawn, call doDraw().
No other methods are expected to be called from outside the Eyeball object, but I am not hiding them if you want to play. No documentation or future compatibility is provided for these.
Trouble shooting
If nothing shows and there are no JavaScript errors it is most likely that your html element that holds the eyeball is either, not visible, off screen or has no width / height set in CSS.
And that concludes the html5eyeball project series of f-log posts.
![[Pay4Foss banner long]](http://pay4foss.org/pay4foss_bar.png)