mobius.js

var buffer;
var gl;
var canvas;
var glCanvas;
var program;
var tex;


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,80,0,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(){
    ctx = canvas.getContext('2d');
    
    height = canvas.height;
    width = canvas.width;
    return canvas;
}

//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)
    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();
        }   
    }
    fp = fixedpts(a,b,c,d);
    ctx.beginPath();
    ctx.arc(remap(fp[0].re,-2,2,0,600),remap(fp[0].im,-2,2,600,0),5,0,Math.PI*2);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(remap(fp[1].re,-2,2,0,600),remap(fp[1].im,-2,2,600,0),5,0,Math.PI*2)
    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(texture) {



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

    positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    
    gl.uniform2f(gl.getUniformLocation(program, "a"),a.re,a.im);
    gl.uniform2f(gl.getUniformLocation(program, "b"),b.re,b.im);
    gl.uniform2f(gl.getUniformLocation(program, "c"),c.re,c.im);
    gl.uniform2f(gl.getUniformLocation(program, "d"),d.re,d.im);

    gl.drawArrays(gl.TRIANGLES, 0, 6);
}
//Load Texture function from MDN
function loadTexture(gl, url) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Because images have to be download over the internet
  // they might take a moment until they are ready.
  // Until then put a single pixel in the texture so we can
  // use it immediately. When the image has finished downloading
  // we'll update the texture with the contents of the image.
  const level = 0;
  const internalFormat = gl.RGBA;
  const width = 1;
  const height = 1;
  const border = 0;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([0, 0, 255, 255]);  // opaque blue
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                width, height, border, srcFormat, srcType,
                pixel);

  const image = new Image();
  image.src = url;
  image.onload = function() {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                  srcFormat, srcType, image);

    // WebGL1 has different requirements for power of 2 images
    // vs non power of 2 images so check if the image is a
    // power of 2 in both dimensions.
    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
       // Yes, it's a power of 2. Generate mips.
       gl.generateMipmap(gl.TEXTURE_2D);
    } else {
       // No, it's not a power of 2. Turn of mips and set
       // wrapping to clamp to edge
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    }
  };
  

  return texture;
}

function isPowerOf2(value) {
  return (value & (value - 1)) == 0;
}


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

function cpxSqrt(z) {
    x = z.re;
    y = z.im;
    factor = Math.pow(x*x+y*y,0.25);
    re = Math.cos(0.5*Math.atan2(y,x))*factor;
    im = Math.sin(0.5*Math.atan2(y,x))*factor;
    return new Complex(re,im);
}

var fixedpts = function(a,b,c,d){
    fp = [1000,1000];
    ad = a.add(new Complex(-1,0).multiply(d));
    discr = ad.multiply(ad).add(new Complex(4,0).multiply(b).multiply(c));
    den = new Complex(2,0).multiply(c).reciprocal();
    fp[0] = ad.add(cpxSqrt(discr)).multiply(den);
    fp[1] = ad.add(cpxSqrt(discr).multiply(new Complex(-1,0))).multiply(den);
    return fp;
}

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 = document.createElement('canvas');
    canvas.style.border   = "1px solid";
    canvas.id = 'canvas'
    canvas.height = 500;
    canvas.width = 500;
    document.body.appendChild(canvas);

    glCanvas = document.createElement("canvas");
    glCanvas.id = 'glcanvas';
    glCanvas.width = 500;
    glCanvas.height = 500;
    document.body.appendChild(glCanvas);

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

    buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(
    gl.ARRAY_BUFFER, 
    new Float32Array([
      -1.0, -1.0, 
       1.0, -1.0, 
      -1.0,  1.0, 
      -1.0,  1.0, 
       1.0, -1.0, 
       1.0,  1.0]), 
    gl.STATIC_DRAW
    );

    tex = loadTexture(gl,"img/uvgrid.png");

    var shaderScript;
    var shaderSource;
    var vertexShader;
    var fragmentShader;

    shaderScript = document.getElementById("2d-vertex-shader");
    shaderSource = shaderScript.text;
    vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, shaderSource);
    gl.compileShader(vertexShader);

    shaderScript   = document.getElementById("2d-fragment-shader");
    shaderSource   = shaderScript.text;
    fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, shaderSource);
    gl.compileShader(fragmentShader);

    console.log(gl.getShaderInfoLog(fragmentShader));

    program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);  
    gl.useProgram(program);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.uniform1i(gl.getUniformLocation(program, 'sampler'), 0);

    renderGL(program,tex);

});