eyeball colour change

on request/poke change iris colour and animate pupil dialation

by rob Davis

HTML

<body>
    <div id="background">
        <div id="eyeball1"></div>
        <div id="eyeball2"></div>
        <span class="info mouse"></span>
    </div>
    <input type="button" value="random" id="btnRandom"/>
    <input type="button" value="set red" id="btnSet" />
    <input type="button" value="x+5" id="btnX5"/>
    <input type="button" value="x-5" id="btnX-5"/>
    <input type="button" value="y+5" id="btnY5"/>
    <input type="button" value="y-5" id="btnY-5"/>

</body>

CSS

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


#eyeball1 {width:400px; height:400px; top:100px; left:0px;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
// 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 ?
// can i get the offsets automatically ?


// AGHHH JQUERY !!!!
$(document).ready( function () {
    var eb1 = new Eyeball("eyeball1");
    eb1.offsetLocationX=0;
    eb1.offsetLocationY=100;
    eb1.numLinesIris=200;
    eb1.init();
    var eb2 = new Eyeball("eyeball2");
    eb2.offsetLocationX=300;
    eb2.offsetLocationY=200;
    eb2.hideRenderLayers = false;
    eb2.eyeColour = {'red':0,'green':255,'blue':255}
    eb2.init();
    eb2.toggle('canvasHighlights');
    eb1.toggle('canvasMain');
    eb1.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);
    });
    $('#btnRandom').click(function (){
           eb1.setPupil();
    });
    $('#btnSet').click(function (){
        eb1.setPupil({'red':255,'green':0,'blue':0});
    });
    $('#btnX5').click(function (){
        eb1.offsetLocationX+=5;
        eb1.doDraw(200, 300, eb1.centerX, eb1.centerY);
        $('.mouse').html('offX ' + eb1.offsetLocationX + ' offY ' + eb1.offsetLocationY);
    });
    $('#btnX-5').click(function (){
        eb1.offsetLocationX-=5;
        eb1.doDraw(200, 300, eb1.centerX, eb1.centerY);
        $('.mouse').html('offX ' + eb1.offsetLocationX + ' offY ' + eb1.offsetLocationY);
    });
    $('#btnY5').click(function (){
        eb1.offsetLocationY+=5;
        eb1.doDraw(200, 300, eb1.centerX, eb1.centerY);
       ...