Skip to content

Instantly share code, notes, and snippets.

@sporsh
Last active March 25, 2016 14:40
Show Gist options
  • Save sporsh/ad5666748ad70f993870 to your computer and use it in GitHub Desktop.
Save sporsh/ad5666748ad70f993870 to your computer and use it in GitHub Desktop.
Astigmatism eye test (see live: https://goo.gl/TVVnVO)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Astigmatism eye test</title>
<style>
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
}
</style>
<script>
var angle = 0;
var radius = 20;
var tile, tileCtx, ctx;
onload = function() {
tile = document.createElement('canvas');
tileCtx = tile.getContext('2d');
ctx = canvas.getContext('2d');
draw();
};
function draw() {
tile.width = tile.height = radius * 2;
tileCtx.strokeStyle = '#fff';
tileCtx.lineWidth = Math.max(1, radius / 6);
tileCtx.translate(radius, radius);
tileCtx.rotate(angle / 180 * Math.PI);
tileCtx.beginPath();
tileCtx.moveTo(-radius / 2, 0);
tileCtx.lineTo(radius / 2, 0);
tileCtx.stroke();
var pattern = ctx.createPattern(tile, 'repeat');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.save();
var offsetX = canvas.width / 2 + tile.width / 2;
var offsetY = canvas.height / 2 + tile.height / 2;
ctx.translate(offsetX, offsetY);
ctx.fillStyle = pattern;
ctx.fillRect(-offsetX, -offsetY, canvas.width, canvas.height);
ctx.restore();
ctx.fillStyle = '#888';
ctx.font = "700 20px courier";
ctx.fillText("axis: " + (0 | (angle + 90) % 180) + "\u00B0", 10, 30);
}
onmousemove = function(event) {
angle = event.offsetX / window.innerWidth * 180 * 2;
draw();
};
onkeyup = function(event) {
switch (event.keyIdentifier) {
case "Up":
case "U+004B":
radius *= 1.5;
break;
case "Down":
case "U+004D":
radius /= 1.5;
break;
case "Left":
angle -= 1;
angle |= 0;
break;
case "Right":
angle += 1;
angle |= 0;
break;
default:
}
draw();
};
</script>
</head>
<body>
<canvas id="canvas" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment