Paper.js fiddle

by Bart Kalisz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
<div id="container">
	<canvas id="myCanvas" width="500" height="300"></canvas>
</div>

CSS

#container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 300px;
	margin: -150px 0 0 -250px;
	border: 2px solid black;
}

#myCanvas {
	background: black;
  cursor: crosshair;
}

JavaScript

var canvas = document.getElementById("myCanvas");

paper.install(window);
paper.setup(canvas);

var Eye = function(props) {
	var args = arguments;

	this.center = args[0] instanceof Array ? args[0] : props.center || [20, 20];
  this.radius = args[1] || props.radius || 20;
	this.irisRadius = args[2] || props.irisRadius || this.radius / 2.4;
	this.zDistance = props.zDistance || 120;

	this.moveRatio = this.radius / (this.zDistance + this.radius);
	this.maxIrisOffset = this.radius - this.irisRadius;

	this.sclera = new Path.Circle({
  	center: this.center,
    radius: this.radius,
    fillColor: 'white',
    strokeColor: 'black'
  });

	this.iris = new Path.Circle({
  	center: this.center,
    radius: this.irisRadius,
    fillColor: 'black'
  });

	this.trackingVector = new Path.Line(this.center);
}

Eye.prototype.track = function(point) {
	this.trackingVector.lastSegment.point = point;
	this.iris.position = this.trackingVector.getPointAt(Math.min(
  	this.trackingVector.length * this.moveRatio,
    this.maxIrisOffset
  ));
}

var xMax = canvas.clientWidth;
var yMax = canvas.clientHeight;
var pupillaryDistance = 100;

var leftEye = new Eye([xMax / 2 - pupillaryDistance / 2, yMax / 2], 50);
var rightEye = new Eye([xMax / 2 + pupillaryDistance / 2, yMax / 2], 35);

view.onMouseMove = function(event) {
	leftEye.track(event.point);
  rightEye.track(event.point);
};