Add initial slider support. Remove old SVG drawing code to prepare fo…

…r three.js
tbh12001 · Nov 13, 2017 · 20e17d5 · 20e17d5
1 parent 00e3a26
commit 20e17d5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 48 deletions.
diff --git a/js/mobius.js b/js/mobius.js
@@ -1,55 +1,33 @@
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var RenderHolder = function(a,b,c,d){
-    this.render = function(){
-    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 add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
+    var container = document.createElement('div');
+    container.className ="slider-container";
+    parent.append(container);
+
+    var slider = document.createElement('div');
+    slider.className = "sliderHandle";
+    $(slider).draggable({
+        containment: "parent",
+        drag: function(event, ui){
+            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);
         }
-    }
-    };
+    });
+    container.append(slider);
+
+    var caption = document.createElement('p');
+    caption.className = "slider-caption";
+    $(caption).text(label);
+    container.append(caption);
 }
-window.onload = function() {
-    var a = new Complex(0,0);
-    var b = new Complex(0,0);
-    var c = new Complex(0,0);
-    var d = new Complex(0,0);
-    var rh = new RenderHolder(a,b,c,d);
-    var gui = new dat.GUI();
-    controls = [];
-    var f1 = gui.addFolder("a");
-    controls = controls.concat(f1.add(a, 're', -2, 2).step(0.01));
-    controls = controls.concat(f1.add(a, 'im', -2, 2).step(0.01));
-    var f2 = gui.addFolder("b");
-    controls = controls.concat(f2.add(b, 're', -2, 2).step(0.01));
-    controls = controls.concat(f2.add(b, 'im', -2, 2).step(0.01));
-    var f3 = gui.addFolder("c");
-    controls = controls.concat(f3.add(c, 're', -2, 2).step(0.01));
-    controls = controls.concat(f3.add(c, 'im', -2, 2).step(0.01));
-    var f4 = gui.addFolder("d");
-    controls = controls.concat(f4.add(d, 're', -2, 2).step(0.01));
-    controls = controls.concat(f4.add(d, 'im', -2, 2).step(0.01));
-    gui.add(rh,'render');
-    for (var n = 0; n < controls.length; n++) {
-        controls[n].onChange(function(value){rh.render()});
-    }
-};
 
 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)
     };
@@ -68,4 +46,18 @@ var mobius = function(a,b,c,d,z){
 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
+    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);
+});
diff --git a/mobius.html b/mobius.html
@@ -4,8 +4,12 @@
     <title>Mobius Transforms</title>
 </head>
 <body>
-    <canvas width="600" height="600" id="canvas" ></canvas>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <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>
+    <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>
 </html>