stereographic projection

stereographic.js

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000";
ctx.strokeWidth = 1;
var cx = 400,
    cy = 400,
    r = 200.0;
function scale(cosλcosφ) {
    return 1 / (1 + cosλcosφ);
}
function project(lat, lon, zoom) {
    var cosλ = Math.cos(lon),
        cosφ = Math.cos(lat),
        k = scale(cosλ * cosφ);
    return { x: zoom * k * cosφ * Math.sin(lon), y: zoom * k * Math.sin(lat) };
}
function render() {
    ctx.clearRect(0, 0, 800, 800);
    for (var i = -9; i <= 9; i++) {
        var x, y;
        ctx.beginPath();
        for (var j = -18; j < 18; j++) {
            var p = project(i * Math.PI / 180.0 * 10.0, j * Math.PI / 180.0 * 10.0, r);
            x = p.x;
            y = p.y;
            if (j == -18) {
                ctx.moveTo(cx + x, cy + y);
            } else {
                ctx.lineTo(cx + x, cy + y);
            }
        }
        ctx.closePath();
        ctx.stroke();
    }
    for (var j = -18; j < 18; j++) {
        var x, y;
        ctx.beginPath();
        for (var i = -9; i <= 9; i++) {
            var p = project(i * Math.PI / 180.0 * 10.0, j * Math.PI / 180.0 * 10.0, r);
            x = p.x;
            y = p.y;
            if (i == -9) {
                ctx.moveTo(cx + x, cy + y);
            } else {
                ctx.lineTo(cx + x, cy + y);
            }
        }
        ctx.closePath();
        ctx.stroke();
    }
}
render();