vein masking

draw longer veins that are masked and moved with the iris

by rob Davis

HTML

<body>
    <div>
        <span class="mouse"></span><span class="other"></span>
        <canvas id="canvasBackground" width="200" height="200"></canvas>
        <canvas id="canvasIris" width="200" height="200"></canvas>
        <canvas id="canvasVeins" width="400" height="400"></canvas>
        <canvas id="canvasHighlights" width="200" height="200"></canvas>
        <canvas id="canvasMain" width="200" height="200"></canvas>
    </div>
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
            background-color:black;
          }
div { background-color:#ff6;  width:500px; height:500px }
.other { top:400px; left:0px;position: absolute; color:black; z-index:100}
#canvasMain { top:200px; left:200px;position: absolute; }
#canvasVeins { top:-50px; left:-50px;position: absolute; }
#canvasIris { top:0px; left:0px;position: absolute; }
#canvasBackground { top:50px; left:50px;position: absolute; }
#canvasHighlights { top:50px; left:50px;position: absolute; }

JavaScript

var canvasMain = document.getElementById('canvasMain');
var contextMain = canvasMain.getContext("2d");
var canvasIris = document.getElementById('canvasIris');
var contextIris = canvasIris.getContext("2d");
var canvasBackground = document.getElementById('canvasBackground');
var contextBackground = canvasBackground.getContext("2d");
var canvasHighlights = document.getElementById('canvasHighlights');
var contextHighlights = canvasHighlights.getContext("2d");
var canvasVeins = document.getElementById('canvasVeins');
var contextVeins = canvasVeins.getContext("2d");

var width = canvasMain.width;
var height = canvasMain.height;
var diameter = width/2;
var centerX = diameter;
var centerY = diameter;
var maxDistanceFromCenter=diameter * .75;
var offsetLocationX = canvasMain.width; 
var offsetLocationY = canvasMain.width; 

// Todo:
// Rename math functions and refactor order of functions
// buddle code into reusable object for multiple instances
// halloween eyes
// changable iris colour
// yellowing veins
// allow canvas layers to be switched on and off

// Draw the iris to a separate canvas
doDrawSerarateIris(canvasMain.width);
// Draw eyeball background to a separate canvas
doBackground(contextBackground, canvasBackground);
// highlight canvas
doDrawHighlights(contextHighlights, width)
// highlight canvas
doDrawVeins(canvasVeins.width, contextVeins)

// 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 + '['+centerX+', '+centerY+']');
    doDraw(contextMain,canvasMain, event.pageX, event.pageY, centerX, centerY);
});

// composites canvases
function doDraw(context,canvas, mX, mY, cX, cY) {
    var eyeBallDiameter=canvas.width; // refactor to diameter
    var irisWidth = eyeBallDiameter/2;
    var offset = (eyeBallDiameter-irisWidth)/2;
    var...