mobius.js

var buffer;
var gl;
var canvas;

function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {

    var container = document.createElement('div'); //Create the slider container
    $(container).data('complex',variable)
    container.id = label;
    container.className ="slider-container";
    parent.append(container);
    var slider = document.createElement('div');//Create the actual slider handle

    slider.className = "sliderHandle";
    $(slider).draggable({
        containment: "parent",
        
        //update value based on location, rounded to thrid decimal
        drag: function(event, ui){//When it's dragged, call this function
            
            variable.setVals(remap(ui.position.left,0,80,min_x,max_x),remap(ui.position.top,0,80,min_y,max_y));

            $(container).data('complex',variable)
            imNum.nodeValue = 'im: ' +variable['im'].toFixed(3)
            reNum.nodeValue = 're: ' +variable['re'].toFixed(3)

            //method that updates current canvas
            render();

        }
    });
    slider.addEventListener("drag",function(){console.log('hello')})

    container.append(slider);

    var caption = document.createElement('p');
    caption.className = "slider-caption";
    $(caption).text(label);
    container.append(caption);

    var value = document.createElement('div');
    
    var br = document.createElement('br');
    
    var imNum = document.createTextNode('im: '+variable['im']);
    
    var reNum = document.createTextNode('re: '+variable['re']); 
    //value.id = label
    


    value.append(imNum);
    value.append(br)
    value.append(reNum);
    parent.append(value);
}

function add_vector_field(){
    canvas = document.createElement('canvas');
    canvas.style.border   = "1px solid";
    canvas.id = 'canvas'
    canvas.height = 600;
    canvas.width = 600
    ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);

    height = canvas.height;
    width = canvas.width;
}

//update based on id
function update_vector_field(a,b,c,d){
    ctx = canvas.getContext('2d');

    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();
        }   
    }
}

function render(a,b,c,d){
    a = $(document.getElementById('a')).data('complex');
    b = $(document.getElementById('b')).data('complex');
    c = $(document.getElementById('c')).data('complex');
    d = $(document.getElementById('d')).data('complex');    
    update_vector_field(a,b,c,d);

}

function renderGL() {

    window.requestAnimationFrame(render, canvas);
 
    gl.clearColor(1.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
}

var Complex = function(_re,_im){
    this.im = _im;
    this.re = _re;
    this.setVals = function(re,im){
        this.re = re;
        this.im = im;
    }
    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)));
}

var mobius_inv = function(a,b,c,d,z){
    return c.multiply(Complex(-1,0)).multiply(z).add(a).reciprocal().multiply(b.multiply(Complex(-1,0)).add(z.multiply(d)));
}

remap = function(x,a,b,c,d){
    //maps x from [a,b] to [c,d]
    return (x - a) * (d - c) / (b - a) + c;
}



var a = new Complex(0,0);
var b = new Complex(0,0);
var c = new Complex(0,0);
var d = new Complex(0,0);

$(function () {//document is ready, setup everything

    //Create GUI div
    guibox = document.createElement('div');
    guibox.id = "gui-box";
    document.body.appendChild(guibox);

    add_2d_ctrl($(guibox),a,"a",-1,1,-1,1);
    add_2d_ctrl($(guibox),b,"b",-1,1,-1,1);
    add_2d_ctrl($(guibox),c,"c",-1,1,-1,1);
    add_2d_ctrl($(guibox),d,"d",-1,1,-1,1);

    add_vector_field();

    gl = canvas.getContext('experimental-webgl');
    
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

    renderGL();
});