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,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 = 500;
    canvas.width = 500;
    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(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.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);
    }
  };
  image.src = url;

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

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

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