Last active
December 28, 2020 01:06
-
-
Save nielsdoorn/7959409 to your computer and use it in GitHub Desktop.
Eyes that follow your mouse cursor. Using HTML5 canvas.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); | |
| }; | |
| }()); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| } |
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
Any way to make this work on firefox? in lost.
Thanks1