html5canvaseyeball

main branch

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: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:-150px; left:-150px;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:-150px; left:-150px;position: absolute; }

JavaScript

// Todo:
// remove jQuery for the mouse events and coords reporting
// can i get the offsets automatically ?
// create cut outs for try outs
// maxDistanceFromCenter to var and make option



// AGHHH JQUERY !!!!
$(document).ready( function () {
    var eb1 = new Eyeball("eyeball1");
    eb1.offsetLocationX=0;
    eb1.offsetLocationY=100;
    eb1.numLinesIris=200;
    eb1.veinWidth=0.5;
    eb1.pupilScale=1.0;
    eb1.animatePupil=true;
    eb1.init();
    var eb2 = new Eyeball("eyeball2");
    eb2.highlight1 = {'x':.35, 'y':.35, 'width':.16, 'height':.1, 'colour1' : {'red':0,'green':255,'blue':0, 'alpha' : 0.5}, 'colour2' : {'red':255,'green':0,'blue':0, 'alpha' : 1.0}};
    eb2.highlight2 = {'x':.64, 'y':.64, 'width':.2, 'height':0.25, 'colour1' : {'red':0,'green':0,'blue':255, 'alpha' : 0.5}, 'colour2' : {'red':255,'green':255,'blue':0, 'alpha' : 1.0}};
    eb2.irisOuterColour = {'red':0,'green':0,'blue':255, 'alpha' : 0.5};
    eb2.irisInternalColour = {'red':255,'green':0,'blue':0, 'alpha' : 1.0};
    eb2.offsetLocationX=300;
    eb2.offsetLocationY=200;
    eb2.hideRenderLayers = false;
    eb2.eyeColour = {'red':0,'green':255,'blue':255}
    eb2.veinColour = {'red':246,'green':255,'blue':0};
    eb2.eyeballGradient1 = {'red':141,'green':255,'blue':160};
    eb2.eyeballGradient2 = {'red':154,'green':230,'blue':162};
    eb2.eyeballGradient3 = {'red':126,'green':148,'blue':130};
    eb2.pupilColour = {'red':0,'green':0,'blue':0};
    eb2.veinBranches=2;
    eb2.init();
    //eb2.toggle('canvasHighlights');
    //eb1.toggle('canvasMain');
    eb1.hideMarkers=false;
    eb2.useCircleScaling = true;
    // 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,...