diff --git a/js/mobius.js b/js/mobius.js
index 8bb6783..4c7d7bd 100644
--- a/js/mobius.js
+++ b/js/mobius.js
@@ -1,16 +1,16 @@
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",
- drag: function(event, ui){
+ 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));
- console.log(variable);
+ //Add drawing update function here when added
}
});
container.append(slider);
@@ -41,8 +41,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;
@@ -56,8 +61,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);
});
diff --git a/js/render.js b/js/render.js
index 1c17793..a6e32ec 100644
--- a/js/render.js
+++ b/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();
\ No newline at end of file
diff --git a/mobius.html b/mobius.html
index 5a8dc00..1272009 100644
--- a/mobius.html
+++ b/mobius.html
@@ -9,6 +9,7 @@
+