broken

js/mobius.js

@@ -1,3 +1,6 @@
+var buffer;
+var gl;
+var canvas;
 
 function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
 
@@ -53,25 +56,24 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
 }
 
 function add_vector_field(){
-    var canvas = document.createElement('canvas');
+    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;
-    return canvas;
 }
 
 //update based on id
 function update_vector_field(a,b,c,d){
-    canvas = document.getElementById('canvas')
-    ctx = canvas.getContext('2d')
+    ctx = canvas.getContext('2d');
 
     ctx.moveTo(0,0);
-    ctx.clearRect(0,0,600,600)
+    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);
@@ -95,8 +97,16 @@ function render(a,b,c,d){
     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)
+    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){
@@ -142,16 +152,20 @@ $(function () {//document is ready, setup everything
 
     //Create GUI div
     guibox = document.createElement('div');
-    guibox.id = "gui-box"
+    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();
 
-    canvas = add_vector_field()
-    document.body.appendChild(canvas);
+    gl = canvas.getContext('experimental-webgl');
+
+    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
 
+    renderGL();
 });
+