Tidy javascript

static/anders_briegel.js

@@ -1,7 +1,10 @@
-var ngbh = {};
-var vops = {};
-var meta = {};
 var abj = {};
+abj.ngbh = {};
+abj.vops = {};
+abj.meta = {};
+ngbh = abj.ngbh;
+vops = abj.vops;
+meta = abj.meta;
 abj.add_node = function(node, m) {
     ngbh[node] = {};
     vops[node] = clifford.hadamard;

static/graph.js

@@ -6,21 +6,21 @@ function updateScene() {
     oldState = null;
    
     var geometry = new THREE.Geometry();
-    for (var i in vops) {
-        var vop = vops[i];
-        var pos = meta[i].position;
+    for (var i in abj.vops) {
+        var vop = abj.vops[i];
+        var pos = abj.meta[i].position;
         var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
         geometry.vertices.push(vertex);
-        geometry.colors[i] = new THREE.Color(colors[vops[i] % colors.length]);
+        geometry.colors[i] = new THREE.Color(colors[abj.vops[i] % colors.length]);
     }
 
     var edges = new THREE.Object3D();
-    var my_edges = edgelist();
+    var my_edges = abj.edgelist();
     for (i=0; i < my_edges.length; ++i) {
         var edge = my_edges[i];
-        var start = meta[edge[0]].position;
+        var start = abj.meta[edge[0]].position;
         var startpos = new THREE.Vector3(start[0], start[1], start[2]);
-        var end = meta[edge[1]].position;
+        var end = abj.meta[edge[1]].position;
         var endpos = new THREE.Vector3(end[0], end[1], end[2]);
         var newEdge = makeEdge(startpos, endpos);
         edges.add(newEdge);

static/index.html

@@ -12,7 +12,6 @@
 <script type="text/javascript" src="three.js"></script>
 <script type="text/javascript" src="libs.js"></script>
 <script type="text/javascript" src="materials.js"></script>
-<script type="text/javascript" src="poll.js"></script>
 <script type="text/javascript" src="api.js"></script>
 <script type="text/javascript" src="curve.js"></script>
 <script type="text/javascript" src="graph.js"></script>

static/interaction.js

@@ -1,46 +1,58 @@
+var mouse = {};
+var interaction = {};
+
+interaction.raycaster = new THREE.Raycaster();
+interaction.xyplane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+
 // Gets a reference to the node nearest to the mouse cursor
-function nearestNode() {
-    raycaster.setFromCamera(mouse, camera);
+interaction.nearestNode = function() {
+    this.raycaster.setFromCamera(mouse, camera);
     for (var i = 0; i < nodeGeometry.vertices.length; ++i) {
-        if (raycaster.ray.distanceSqToPoint(nodeGeometry.vertices[i]) < 0.01) {
+        var v = nodeGeometry.vertices[i];
+        if (this.raycaster.ray.distanceSqToPoint(v) < 0.01) {
             return i;
         }
     }
     return undefined;
-}
+};
 
 
 // Find out: what is the mouse pointing at?
-function checkIntersections() {
+interaction.checkIntersections = function() {
     var new_selection = nearestNode();
-    if (new_selection != selection) {
-        selection = new_selection;
-        info.className = selection ? "visible" : "hidden";
-        info.innerHTML = selection ? nodeGeometry.labels[new_selection] : info.innerHTML;
+    if (new_selection != this.selection) {
+        this.selection = new_selection;
+        info.className = this.selection ? "visible" : "hidden";
+        info.innerHTML = this.selection ? nodeGeometry.labels[new_selection] : info.innerHTML;
         render();
     }
-}
+};
 
 // Update the mouse position tracker
-function onMouseMove(event) {
+interaction.onMouseMove = function(event) {
     mouse.wasClick = false;
     mouse.absx = event.clientX;
     mouse.absy = event.clientY;
     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
     mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-    w = 200;
-    h = 15;
-    info.style.top = mouse.absy - h - 40 + "px";
-    info.style.left = mouse.absx - w / 2 + "px";
-    checkIntersections();
-}
+    //w = 200; //h = 15; //info.style.top = mouse.absy - h - 40 + "px"; //info.style.left = mouse.absx - w / 2 + "px"; //checkIntersections();
+};
 
-// Add qubits or whatever
-function onClick(event){
-    if (!selection){return;}
-    console.log(nodeGeometry.vertices[selection]);
-    qubits.geometry.dynamic = true;
-    qubits.geometry.vertices.push(nodeGeometry.vertices[selection].clone());
-    qubits.geometry.verticesNeedUpdate = true;
+// Try to add a qubit at the current mouse position
+interaction.addQubitAtMouse = function(event) {
+    this.raycaster.setFromCamera(mouse, camera);
+    var intersection = this.raycaster.ray.intersectPlane(this.plane);
+    intersection.x = Math.round(intersection.x);
+    intersection.y = Math.round(intersection.y);
+    abj.add_node(Object.keys(vops).length, {
+        "position": intersection
+    });
+    updateScene();
 }
 
+interaction.bind = function() {
+    var el = renderer.domElement;
+    el.addEventListener("mousedown", this.onMouseDown);
+    el.addEventListener("mouseup", this.onMouseDown);
+    el.addEventListener("mousemove", this.onMouseMove);
+};

static/main.js

@@ -9,7 +9,7 @@ window.onload = init;
 // Clear the whole scene
 function makeScene() {
     var myScene = new THREE.Scene();
-    var grid = new THREE.GridHelper(20, 2);
+    var grid = new THREE.GridHelper(10, 1);
     grid.rotation.x = Math.PI/2;
     grid.setColors(0xdddddd, 0xeeeeee);
     myScene.add(grid);
@@ -34,31 +34,6 @@ function onWindowResize(evt){
 
 function bind_events() {
     window.addEventListener("resize", onWindowResize, false);
-    renderer.domElement.addEventListener("mousedown", function (event) {
-        var mouse = new THREE.Vector2(); // create once and reuse
-        mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
-        mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
-        mouseprevpos.x = mouse.x;
-        mouseprevpos.y = mouse.y;
-    });
-
-    renderer.domElement.addEventListener("mouseup", function (event) {
-        var mouse = new THREE.Vector2(); // create once and reuse
-        mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
-        mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
-        if (mouse.x != mouseprevpos.x || mouse.y != mouseprevpos.y ){return;}
-
-        var raycaster = new THREE.Raycaster(); // create once and reuse
-        raycaster.setFromCamera( mouse, camera );
-        var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-        var intersection = raycaster.ray.intersectPlane(plane);
-        console.log(intersection);
-
-        intersection.x = Math.round(intersection.x);
-        intersection.y = Math.round(intersection.y);
-        add_node(Object.keys(vops).length, {"position":intersection});
-        updateScene();
-    });
     controls.addEventListener("change", render);
 
 }
@@ -76,14 +51,11 @@ function init() {
     loadMaterials();
 
     // Camera, controls, raycaster
-    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 100);
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000);
     controls = new THREE.OrbitControls(camera);
-
-    // Center the camera
-    // TODO: frustrum
     controls.center.set(0, 0, 0);
     controls.rotateSpeed = 0.2;
-    camera.position.set(0, 0, 40);
+    camera.position.set(0, 0, 20);
 
     // Run
     bind_events();

static/poll.js

@@ -1,21 +0,0 @@
-function poll() {
-    var ws = new WebSocket("ws://localhost:5001");
-    ws.onopen = function()
-    {
-       console.log("Connected to server.");
-    };
-     
-    ws.onmessage = function (evt) 
-    { 
-       var new_state = JSON.parse(evt.data);
-       vops = new_state.vops;
-       ngbh = new_state.ngbh;
-       updateScene();
-    };
-     
-    ws.onclose = function()
-    { 
-       console.log("Connection was closed.");
-    };
-}
-