Merge branch 'master' of https://github.uconn.edu/tbh12001/MobiusTran…

…sformsVisualizer

js/mobius.js

@@ -1,3 +1,4 @@
+
 var buffer;
 var gl;
 var canvas;
@@ -25,15 +26,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,80,0,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);
 
@@ -43,53 +51,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 = 500;
     canvas.width = 500;
     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();
         }   
@@ -109,10 +139,10 @@ 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(texture) {
 
 
@@ -156,6 +186,7 @@ function loadTexture(gl, url) {
                 pixel);
 
   const image = new Image();
+  image.src = url;
   image.onload = function() {
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
@@ -175,7 +206,7 @@ function loadTexture(gl, url) {
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     }
   };
-  image.src = url;
+
 
   return texture;
 }
@@ -236,6 +267,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);
@@ -245,18 +280,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();
+
 
     glCanvas = document.createElement("canvas");
     glCanvas.id = 'glcanvas';

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;