Momentum

static/main.css

@@ -1,6 +1,6 @@
 html, body { margin: 0; padding: 0; overflow: hidden; font-size:  10pt; font-family:  "courier new"; }
 #node_info { 
-    background: black; 
+    background: rgba(0, 0, 0, .8); 
     color:white;
     padding: 5px;
     margin:0px;
@@ -9,9 +9,10 @@ html, body { margin: 0; padding: 0; overflow: hidden; font-size:  10pt; font-fam
     left:5px;
     font-family:"courier new";
     text-align: center;
-    font-size:10pt;
-    height:15px;
+    font-size:9pt;
+    /*height:15px;*/
     border-radius:3px;
+    pointer-events: none;
 }
 
 #server_info {

static/scripts/graph.js

@@ -1,5 +1,5 @@
 var graph = {};
-graph.colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];
+graph.colors = ["lightblue", "green", "yellow", "red", "pink", "orange", "purple"];
 
 graph.prepare = function() {
     materials.prepare();
@@ -44,6 +44,6 @@ graph.update = function(newState) {
 };
 
 graph.add_node = function(x, y, z) {
-    meta = {"position": new THREE.Vector3(x, y, z)};
+    meta = {position: new THREE.Vector3(x, y, z)};
     abj.add_node(abj.order(), meta);
 };

static/scripts/gui.js

@@ -14,9 +14,10 @@ gui.prepare = function() {
     gui.controls = new THREE.OrbitControls(gui.camera);
     gui.controls.addEventListener("change", gui.render);
     gui.controls.center.set(0, 0, 0);
+    gui.controls.target.set(0, 0, 0);
     gui.controls.rotateSpeed = 0.2;
-    gui.controls.userPanSpeed = 0.3;
-    gui.camera.position.set(0, 0, 20);
+    gui.controls.userPanSpeed = 0.1;
+    gui.camera.position.set(4, 4, 10);
 };
 
 // Someone resized the window

static/scripts/main.js

@@ -1,5 +1,6 @@
 function bootstrap(){
     graph.add_node(0, 0, 0);
+    graph.add_node(3, 0, 0);
     graph.update();
 }
 

static/scripts/materials.js

@@ -23,7 +23,7 @@ materials.prepare = function() {
         color: "red"
     });
     materials.qubit = new THREE.PointsMaterial({
-        size: 0.3,
+        size: 0.7,
         map: ballSprite,
         alphaTest: 0.5,
         transparent: true,

static/scripts/orbitcontrols.js

@@ -18,6 +18,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 	this.enabled = true;
 
 	this.center = new THREE.Vector3();
+	this.target = new THREE.Vector3();
 
 	this.userZoom = true;
 	this.userZoomSpeed = 1.0;
@@ -156,6 +157,9 @@ THREE.OrbitControls = function ( object, domElement ) {
 		var position = this.object.position;
 		var offset = position.clone().sub( this.center );
 
+		var diff = this.center.clone().sub( this.target ).multiplyScalar(0.2);
+        this.center.sub(diff);
+
 		// angle from z-axis around y-axis
 
 		var theta = Math.atan2( offset.x, offset.z );
@@ -192,11 +196,11 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 		this.object.lookAt( this.center );
 
-		thetaDelta = 0;
-		phiDelta = 0;
+		thetaDelta /= 1.5;
+		phiDelta /= 1.5;
 		scale = 1;
 
-		if ( lastPosition.distanceTo( this.object.position ) > 0 ) {
+		if ( lastPosition.distanceTo( this.object.position ) > 0.01 ) {
 
 			this.dispatchEvent( changeEvent );
 

static/scripts/websocket.js

@@ -1,26 +1,25 @@
 var websocket = {};
 
-websocket.connect = function(update){
+websocket.connect = function(update) {
     var ws = new WebSocket("ws://localhost:5000");
-    ws.onopen = function(evt)
-    {
+    ws.onopen = function(evt) {
         gui.serverMessage("Connected to server.");
     };
 
-    ws.onerror = function(err)
-    {
+    ws.onerror = function(err) {
         gui.serverMessage("Could not connect to server.");
     };
-     
-    ws.onmessage = function (evt) 
-    { 
-       update(JSON.parse(evt.data));
+
+    ws.onmessage = function(evt) {
+        json = JSON.parse(evt.data);
+        for (var i in json.meta) {
+            var pos = json.meta[i].position;
+            json.meta[i].position = new THREE.Vector3(pos.x, pos.y, pos.z);
+        }
+        update(json);
     };
-     
-    ws.onclose = function(evt)
-    { 
+
+    ws.onclose = function(evt) {
         gui.serverMessage("Connection to server lost. <a href='#' onclick='javascript:websocket.connect()'>Reconnect</a>.");
     };
 };
-
-