Very simple initial demo of mobius transformations. Constrained to (-…

…2,2) and very ugly.
tbh12001 · Oct 2, 2017 · 01c6085 · 01c6085
1 parent d1137ab
commit 01c6085
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # MobiusTransformsVisualizer
 A Javascript visualizer for Mobius Transforms.
+
+Mobius transforms are transformations of the function f(z) = (az + b)/(cz + d), where a,b,c,d,z are complex variables. 
diff --git a/js/dat.gui.min.js b/js/dat.gui.min.js
diff --git a/js/mobius.js b/js/mobius.js
@@ -0,0 +1,71 @@
+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();
+        }
+    }
+    };
+}
+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.add = function(cpx){
+        return new Complex(this.re+cpx.re,this.im+cpx.im)
+    };
+    this.multiply = function(cpx){
+        return new Complex(this.re*cpx.re - this.im*cpx.im,this.re*cpx.im + this.im*cpx.re);
+    };
+    this.reciprocal = function(cpx){
+        var _re = this.re / (this.re*this.re + this.im*this.im);
+        var _im = -this.im / (this.re*this.re + this.im*this.im);
+        return new Complex(_re,_im)
+    }
+}
+var mobius = function(a,b,c,d,z){
+    return d.add(c.multiply(z)).reciprocal().multiply(b.add(a.multiply(z)))
+}
+remap = function(x,a,b,c,d){
+    //maps x from [a,b] to [c,d]
+    return (x - a) * (d - c) / (b - a) + c;
+}
diff --git a/mobius.html b/mobius.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mobius Transforms</title>
+</head>
+<body>
+    <canvas width="600" height="600" id="canvas" ></canvas>
+    <script type="text/javascript" src="js/dat.gui.min.js"></script>
+    <script type="text/javascript" src="js/mobius.js"></script>
+</body>
+</html>