mobius.js

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)
            //im_value.nodeValue = variable['im'].toFixed(3)
            
            if(variable['im']>=0)
                im_value.nodeValue = '+'+variable['im'].toFixed(3) + 'i';
            else
                im_value.nodeValue = variable['im'].toFixed(3) + 'i';
            re_value.nodeValue = variable['re'].toFixed(3)




            //method that updates current canvas
            render();

        }
    });

    container.append(slider);

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

    var value = document.createElement('div');
    document.createElement('div')
    //var br = document.createElement('br');
    var re = document.createTextNode('re:'); 
    var re_value = document.createTextNode(variable['re']);
    
    var im = document.createTextNode('im: ');
    var im_value;
    if(variable['im']>=0)
        im_value = document.createTextNode('+'+variable['im']+'i');
    else
        im_value = document.createTextNode(variable['im']+'i');

    //value.id = label
    


    //value.append(im);
    
    //value.append(br);
    //value.append(re);
    value.append(re_value);
    value.append(im_value);
    parent.append(value);
}

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

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

    ctx.moveTo(0,0);
    ctx.clearRect(0,0,600,600)
    ctx.fillRect(10,10,1,1);
    for(var i = 0;i<10;i++){
        for(var j = 0;j<10;j++){
            ctx.fillRect(i*60,j*60,1,1);
            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
            
            //draw in points/lines
            ctx.beginPath();

            x = resize_point(pxx,rx,.2)
            y = resize_point(pyy,ry,.2)
            var angle = Math.atan2(y-pyy,x- pxx);
            var headlen = 10;   // length of head in pixels
            ctx.moveTo(pxx,pyy);
            ctx.lineTo(x,y);
            ctx.lineTo(x-headlen*Math.cos(angle-Math.PI/6),y-headlen*Math.sin(angle-Math.PI/6));
            ctx.moveTo(x, y);
            ctx.lineTo(x-headlen*Math.cos(angle+Math.PI/6),y-headlen*Math.sin(angle+Math.PI/6));
           
            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)

}

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

resize_point = function(from,to,proportion){
    diff = to - from;
    return from + diff*proportion
}


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

    title = document.createElement('div');
    
    thing = document.createElement('h2');
    thing.appendChild(document.createTextNode('Mobius Transformations'));
    authors = document.createElement('h3');
    authors.appendChild(document.createTextNode('By: Tim Henning and Edward Huang'));
    title.append(thing);
    title.append(authors);
    document.body.appendChild(title);
 
    //Create GUI div
    document.body.appendChild(title)
    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);


    canvas = add_vector_field()
    document.body.appendChild(canvas);

});