uploading arrows and edit to complex equation

js/mobius.js

@@ -1,6 +1,3 @@
-var buffer;
-var gl;
-var canvas;
 
 function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
 
@@ -21,15 +18,22 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
             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)
+            //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();
 
         }
     });
-    slider.addEventListener("drag",function(){console.log('hello')})
 
     container.append(slider);
 
@@ -39,53 +43,75 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
     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 br = document.createElement('br');
-
-    var imNum = document.createTextNode('im: '+variable['im']);
-
-    var reNum = document.createTextNode('re: '+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(imNum);
-    value.append(br)
-    value.append(reNum);
+    //value.append(im);
+
+    //value.append(br);
+    //value.append(re);
+    value.append(re_value);
+    value.append(im_value);
     parent.append(value);
 }
 
 function add_vector_field(){
-    canvas = document.createElement('canvas');
+    var 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){
-    ctx = canvas.getContext('2d');
+    canvas = document.getElementById('canvas')
+    ctx = canvas.getContext('2d')
 
     ctx.moveTo(0,0);
-    ctx.clearRect(0,0,600,600);
+    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(rx,ry);
+            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();
         }   
@@ -97,16 +123,8 @@ 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){
@@ -141,6 +159,10 @@ remap = function(x,a,b,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);
@@ -150,22 +172,30 @@ 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";
+    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);
+    canvas = add_vector_field()
+    document.body.appendChild(canvas);
 
-    renderGL();
 });
-

js/render.js

@@ -3,6 +3,7 @@ var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHe
 
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
+
 document.body.appendChild( renderer.domElement );
 
 var geometry = new THREE.PlaneGeometry( 1, 1, 50, 50 );

style/style.css

@@ -17,6 +17,10 @@ body{
     height: 16px;
     border-radius: 8px;
     border: 2px solid black;
+}
+.h2{
+
+
 }
 #gui-box{
     display: inline-block;