mobius.js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var RenderHolder = function(a,b,c,d){
    this.render = function(){
    ctx.moveTo(0,0);
    ctx.clearRect(0,0,600,600);
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            x = remap(i,0,10,-2,2);
            y = remap(j,0,10,-2,2);
            res = mobius(a,b,c,d,new Complex(x,y));
            pxx = remap(i,0,10,0,600);
            pyy = remap(j,0,10,600,0); //flip y
            rx = remap(res.re,-2,2,0,600);
            ry = remap(res.im,-2,2,600,0); //flip y
            ctx.beginPath();
            ctx.moveTo(pxx,pyy);
            ctx.lineTo(rx,ry);
            ctx.stroke();
        }
    }
    };
}
window.onload = function() {
    var a = new Complex(0,0);
    var b = new Complex(0,0);
    var c = new Complex(0,0);
    var d = new Complex(0,0);
    var rh = new RenderHolder(a,b,c,d);
    var gui = new dat.GUI();
    controls = [];
    var f1 = gui.addFolder("a");
    controls = controls.concat(f1.add(a, 're', -2, 2).step(0.01));
    controls = controls.concat(f1.add(a, 'im', -2, 2).step(0.01));
    var f2 = gui.addFolder("b");
    controls = controls.concat(f2.add(b, 're', -2, 2).step(0.01));
    controls = controls.concat(f2.add(b, 'im', -2, 2).step(0.01));
    var f3 = gui.addFolder("c");
    controls = controls.concat(f3.add(c, 're', -2, 2).step(0.01));
    controls = controls.concat(f3.add(c, 'im', -2, 2).step(0.01));
    var f4 = gui.addFolder("d");
    controls = controls.concat(f4.add(d, 're', -2, 2).step(0.01));
    controls = controls.concat(f4.add(d, 'im', -2, 2).step(0.01));
    gui.add(rh,'render');
    for (var n = 0; n < controls.length; n++) {
        controls[n].onChange(function(value){rh.render()});
    }
};

var Complex = function(_re,_im){
    this.im = _im;
    this.re = _re;
    this.add = function(cpx){
        return new Complex(this.re+cpx.re,this.im+cpx.im)
    };
    this.multiply = function(cpx){
        return new Complex(this.re*cpx.re - this.im*cpx.im,this.re*cpx.im + this.im*cpx.re);
    };
    this.reciprocal = function(cpx){
        var _re = this.re / (this.re*this.re + this.im*this.im);
        var _im = -this.im / (this.re*this.re + this.im*this.im);
        return new Complex(_re,_im)
    }
}
var mobius = function(a,b,c,d,z){
    return d.add(c.multiply(z)).reciprocal().multiply(b.add(a.multiply(z)))
}
remap = function(x,a,b,c,d){
    //maps x from [a,b] to [c,d]
    return (x - a) * (d - c) / (b - a) + c;
}