index.html
<!DOCTYPE HTML>
<head>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<canvas width=1000 height=600></canvas>
<script type="text/javascript">
var canvas = d3.select("canvas").node();
var xgrid = 10,
ygrid = 10,
k = 100;
var context = canvas.getContext("2d");
context.translate(canvas.width/2, canvas.height/2);
d3.select("canvas").on("mousemove", draw);
function hyper(p) {
var r = Math.sqrt(p[0]*p[0] + p[1]*p[1]),
x1 = p[0] / (r + k),
y1 = p[1] / (r + k);
return [x1, y1];
}
function draw() {
context.fillStyle = "rgba(255,255,255,1)";
context.fillRect(-canvas.width/2,-canvas.height/2,canvas.width,canvas.height);
context.strokeStyle = "rgba(0,0,0,0.4)";
var mouse = d3.mouse(this);
var i = canvas.width;
while (i -= xgrid) {
context.beginPath();
var j = canvas.height;
while (j -= ygrid) {
var p = hyper([i+mouse[0]-canvas.width,j+mouse[1]-canvas.height]);
var x = p[0]*canvas.width*.5;
var y = p[1]*canvas.height*.5;
if (j == ygrid) context.moveTo(x,y);
context.lineTo(x,y);
}
context.stroke()
}
var j = canvas.height;
while (j -= ygrid) {
context.beginPath();
var i = canvas.width;
while (i -= xgrid) {
var p = hyper([i+mouse[0]-canvas.width,j+mouse[1]-canvas.height]);
var x = p[0]*canvas.width*.5;
var y = p[1]*canvas.height*.5;
if (j == ygrid) context.moveTo(x,y);
context.lineTo(x,y);
}
context.stroke()
}
}
</script>