eye packaging

all about creating self contained package.

by rob Davis

HTML

<body>
    <div id="background">
        <div id="eyeball1"></div>
        <div id="eyeball2"></div>
        <span class="info mouse"></span>
    </div>
</body>

CSS

body {
    margin: 0px;
    padding: 0px;
    background-color:black;
}
#background { background-color:#ff6;  width:500px; height:500px }


#eyeball1 {width:100px; height:100px; top:200px; left:200px;position: absolute; }
#eyeball1 .canvasBackground { top:-150px; left:-150px;position: absolute; }
#eyeball1 .canvasVeins { top:-200px; left:-200px;position: absolute; }
#eyeball1 .canvasIris { top:-125px; left:-125px;position: absolute; }
#eyeball1 .canvasHighlights { top:-125px; left:-125px;position: absolute; }

#eyeball2 {width:100px; height:100px; top:200px; left:300px;position: absolute; }
#eyeball2 .canvasBackground { top:-150px; left:-150px;position: absolute; }
#eyeball2 .canvasVeins { top:-200px; left:-200px;position: absolute; }
#eyeball2 .canvasIris { top:-125px; left:-125px;position: absolute; }
#eyeball2 .canvasHighlights { top:-125px; left:-125px;position: absolute; }

JavaScript

// Todo:
// halloween eyes
// changable iris colour, dialate pupil anim
// make all values configurable
// remove jQuery for the mouse events and coords reporting
// try and remove as many of the global vars as possible
// highlights composite mode lighter only ?


// AGHHH JQUERY !!!!
$(document).ready( function () {
    var eb1 = new Eyeball("eyeball1");
    eb1.offsetLocationX=200;
    eb1.offsetLocationY=200;
    eb1.init();
    var eb2 = new Eyeball("eyeball2");
    eb2.offsetLocationX=300;
    eb2.offsetLocationY=200;
    eb2.hideRenderLayers = false;
    eb2.init();
    eb2.toggle('canvasHighlights');
    eb1.toggle('canvasMain');
    eb2.hideMarkers=false;
    eb2.useCircleScaling = false;
    // trap mouse movements and cause updates
    $(window).mousemove(function (event) {
        var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
        var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
        $('.mouse').html(pageCoords + ' ' + clientCoords);
        eb1.doDraw(event.pageX, event.pageY, eb1.centerX, eb1.centerY);
        eb2.doDraw(event.pageX, event.pageY, eb2.centerX, eb2.centerY);
    });
});


function Eyeball(elementId) {
    var eyeball = this; // context 

    eyeball.targetId = elementId;
    // all the different layers that are created dynamically
    eyeball.canvases = ['canvasMain','canvasBackground','canvasVeins','canvasIris','canvasHighlights'];
    eyeball.width = 0;
    eyeball.height = 0;
    eyeball.diameter = 0;
    eyeball.radius = 0;
    eyeball.centerX = 0;
    eyeball.centerY = 0;
    eyeball.maxDistanceFromCenter=0;
    eyeball.offsetLocationX = 0; 
    eyeball.offsetLocationY = 0;
    eyeball.hideRenderLayers=true;
    eyeball.hideMarkers = true;
    eyeball.hideMouseCoords = false; // not implimented
    eyeball.useCircleScaling = true;

    eyeball.toggle = function(name, forceShow){
        // try and get canvas
        var layer = this.getCanvas(name);
        if (!layer) return;
      ...