resolving merge conflict from adding vector field functionality

js/fragshader.glsl

@@ -0,0 +1,32 @@
+
+vec2 invMobius(vec2 a, vec2 b, vec2 c, vec2 d, vec2 z){
+    vec2 num = vec2(0,0);
+    num.x = (d.x*z.x - d.y*z.y)-b.x;
+    num.y = (d.x*z.y - d.y*z.x)-b.y;
+
+    vec2 den;
+    den.x = (c.x*z.x - c.y*z.y) + a.x;
+    den.y = -(c.x*z.y + c.y*z.x) + a.y;
+
+    den= den/(den.x*den.x + den.y*den.y);
+
+    vec2 result;
+    result.x = num.x*den.x - num.y*den.y;
+    result.y = num.x*den.y + num.y*den.x;
+    return result;
+
+}
+
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord )
+{
+    vec2 uv = fragCoord.xy / iResolution.xy;
+    uv = uv- vec2(0.5,0.5);
+    uv = uv*3.0;
+    vec2 a = vec2(1,1);
+    vec2 b = vec2(0,1);
+    vec2 c = vec2(0,1);
+    vec2 d = vec2(1,0);
+    vec2 transCoord = invMobius(a,b,c,d,uv);
+    fragColor = length(transCoord)>1.0?vec4(1,1,1,1):texture(iChannel0,transCoord);
+}

js/mobius.js

@@ -1,22 +1,23 @@
 
 function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
-    var container = document.createElement('div');
+    var container = document.createElement('div'); //Create the slider container
     container.className ="slider-container";
     parent.append(container);
 
-    var slider = document.createElement('div');
+    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){
+        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));
-                //console.log(variable['im']);
+
 
             imNum.nodeValue = 'im: ' +variable['im'].toFixed(3)
             reNum.nodeValue = 're: ' +variable['re'].toFixed(3)
+
         }
     });
     container.append(slider);
@@ -62,8 +63,13 @@ var Complex = function(_re,_im){
     }
 }
 var mobius = function(a,b,c,d,z){
-    return d.add(c.multiply(z)).reciprocal().multiply(b.add(a.multiply(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;
@@ -77,8 +83,13 @@ var c = new Complex(0,0);
 var d = new Complex(0,0);
 
 $(function () {//document is ready, setup everything
-    add_2d_ctrl($('body'),a,"a",-1,1,-1,1);
-    add_2d_ctrl($('body'),b,"b",-1,1,-1,1);
-    add_2d_ctrl($('body'),c,"c",-1,1,-1,1);
-    add_2d_ctrl($('body'),d,"d",-1,1,-1,1);
+    //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);
 });

js/render.js

@@ -5,17 +5,31 @@ var renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
 
-var geometry = new THREE.PlaneGeometry( 1, 1, 1 );
-var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-var cube = new THREE.Mesh( geometry, material );
-scene.add( cube );
+var geometry = new THREE.PlaneGeometry( 1, 1, 50, 50 );
+var material = new THREE.MeshPhongMaterial( { color: 0x008800,side: THREE.DoubleSide } );
+var plane = new THREE.Mesh( geometry, material );
+
+var wireframe = new THREE.WireframeGeometry( geometry );
+var line = new THREE.LineSegments( wireframe );
+// line.material.depthTest = false;
+line.material.opacity = 1;
+line.material.transparent = true;
+
+scene.add(line);
+scene.add( plane );
+
+var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+scene.add( directionalLight );
+
 
 camera.position.z = 5;
 
+var frame = 0;
 function animate() {
+    frame += 1;
     requestAnimationFrame( animate );
-    cube.rotation.x += 0.1;
-    cube.rotation.y += 0.1;
+    geometry.vertices[0].z = Math.sin(frame/100.0);
+    geometry.verticesNeedUpdate = true;
     renderer.render( scene, camera );
 }
 animate();

js/ui.js

@@ -0,0 +1,21 @@
+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.className ="slider-container";
+    parent.append(container);
+
+    var slider = document.createElement('div'); //Create the actual slider handle
+    slider.className = "sliderHandle";
+    $(slider).draggable({
+        containment: "parent", //Constrain its motion to the parent
+        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));
+            //Add drawing update function here when added
+        }
+    });
+    container.append(slider);
+
+    var caption = document.createElement('p');
+    caption.className = "slider-caption";
+    $(caption).text(label);
+    container.append(caption);
+}

mobius.html

@@ -9,6 +9,7 @@
     <script type="text/javascript" src="js/dat.gui.min.js"></script>
     <script type="text/javascript" src="js/three.min.js"></script>
     <script type="text/javascript" src="js/mobius.js"></script>
+    <script type="text/javascript" src="js/render.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
     <link rel="stylesheet" href="style\style.css">
 </body>