Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Eyes that follow your mouse cursor. Using HTML5 canvas.
// Paul Irish animation loop polyfill
// https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #000;
cursor: crosshair;
}
canvas {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.4);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Eyes</title>
<script src="animationPolyfill.js"></script>
<script src="eyes.js"></script>
<link rel="stylesheet" href="eyes.css">
</head>
<body>
<canvas id="eyes"></canvas>
</body>
</html>
// Two eyes on a canvas that follow the mouse cursos
// just like xeyes
// Copyright (c) 2013 Niels Doorn
var canvas;
var context;
var mx = 0;
var my = 0;
var eyes = [
{
'centerX' : 67,
'centerY' : 67,
'radius' : 65
},
{
'centerX' : 250,
'centerY' : 60,
'radius' : 45
},
{
'centerX' : 400,
'centerY' : 360,
'radius' : 34
},
{
'centerX' : 850,
'centerY' : 460,
'radius' : 150
},
{
'centerX' : 50,
'centerY' : 160,
'radius' : 25
},
{
'centerX' : 500,
'centerY' : 320,
'radius' : 40
}
]
window.onload = function() {
canvas = document.getElementById('eyes');
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.onmousemove = function(evt) { mx = evt.x; my = evt.y };
tekenFrame();
}
function tekenFrame() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < eyes.length; i++) {
drawEye(eyes[i]);
};
// loop
requestAnimationFrame(tekenFrame);
}
function drawEye(eye) {
bepaalCoordinaten(eye);
// clip the eye
context.save();
context.beginPath();
context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
context.clip();
// eye
context.beginPath();
context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
context.fillStyle = "#fff";
context.fill();
context.closePath();
// iris
context.beginPath();
context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 2, 0, Math.PI * 2);
context.fillStyle = "#007";
context.fill();
context.closePath();
// pupil
context.beginPath();
context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 5, 0, Math.PI * 2);
context.fillStyle = "#000";
context.fill();
context.closePath();
context.restore();
}
function bepaalCoordinaten(eye) {
// afstand van middenpunt oog tot cursor
dx = mx - eye.centerX;
dy = my - eye.centerY;
// stelling van pythagoras
c = Math.sqrt((dx*dx) + (dy*dy));
// afstand middelpunt tot pupil
r = eye.radius * 0.8;
// cursor op oog
if (Math.abs(dx) < r && Math.abs(dy) < r && c < r) {
r = c;
}
// hoek bepalen
alfa = Math.asin(dy / c);
// coordinaten op rand cirkel bepalen
eye.pupilX = Math.cos(alfa) * r;
// 180 graden fout herstellen
eye.pupilX = (dx < 0 ? eye.pupilX * -1 : eye.pupilX);
eye.pupilY = Math.sin(alfa) * r;
}
@nonor

This comment has been minimized.

Copy link

nonor commented Jul 25, 2014

Any way to make this work on firefox? in lost.

Thanks1

@stimpetta

This comment has been minimized.

Copy link

stimpetta commented Oct 8, 2014

Nice work this is exactly what I needed :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.