Silverlight Eyes (SliBalls)

Get Microsoft Silverlight
Get Microsoft Silverlight
Get Microsoft Silverlight
We have all seen (or should have experienced by now) eyeballs on computers.
Normally these are simple circles with a filled circle following the mouse,
I wanted to do something a bit more elaborate with Silverlight.

First off I wanted a more realistic looking eye;
Highlights and shading were added, this alone made a huge difference.
click image to see progressive adaptations.

After adding some veins (manually) [shown enhanced here] I could do the first bit of coding.
The 'iris' is built up with 400 random lines.
Each line is of random length, angle with a gradient.
Which all looks pretty good, if you click the actual eyes they change colour and the pupil dilates as if you had poked it :)

Now the functionality;
After a little bit of Math, I can get the distance of the mouse from the center and the angle of the mouse from the center.
The iris is moved and rotated to this location and the iris is counter rotated to ensure it is always the correct way up.
The clever bit is the 3D effect on the SliBalls. This achieved using a simple scale as Silverlight[version 2] does not support perspective transforms.
Your brain convinces you (briefly) that this simple scaling IS 3D rotation around a sphere, mainly due to the gradient shading and the stationary highlights.
iris transforms
If you flick the SliBalls about quickly the illusion is quickly lost.

JavaScript on the page feeds the mouse coordinates to the two SliBalls and in turn the SliBalls feed back their own mouse data so that any other SliBalls may be updated correctly.

If you click on the SliBall with out a photo mask you will see different iris colours, these can be defined in the HTML defining the Silverlight object.
You can also specifiy things like, the photo image and its location, the initial iris colour, iris scale and a few other bits and pieces.

The images are a single photo of my eye, mirrored and chroma keyed in GIMP, the odd fading around the edges is to combat Silverlights poor PNG transparency support.

Download the source code

email silverlight (AT)

more silverlight


This page is by me for me, if you are not me then please be aware of the following
I am not responsible for anything that works or does not work including files and pages made available at and I am also not responsible for any information(or what you or others do with it) available at and
In fact I'm not responsible for anything ever, so there!

[Pay4Foss banner long]