dots and lines

gvn · Feb 16, 2013 · be209ea · be209ea
1 parent b7c88fa
commit be209ea
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
+models/
 .DS_Store
diff --git a/_ui/js/faux.renderer.js b/_ui/js/faux.renderer.js
@@ -11,10 +11,11 @@
 
     DEPENDENCIES:
 
-    - 
+    - jQuery
 
     TODO:
 
+    - Remove jQuery dependency
     - Determine scaledRadius value that feels realistic
 
 */
@@ -36,6 +37,20 @@ FAUX.renderer = {
 
         self.ctx.clearRect(0, 0, self.width, self.height);
     },
+    depthToColor: function (z) {
+        var self = this,
+            colorValue;
+
+        colorValue = (z > -255 ? -1 * Math.floor(z) : 255).toString(16); // convert base 10 to hexadecimal
+
+        if (colorValue.length > 1) {
+            colorValue = '#' + colorValue + colorValue + colorValue;
+        } else {
+            colorValue = '#0' + colorValue + '0' + colorValue + '0' + colorValue;
+        }
+
+        return colorValue;
+    },
     drawSphere: function (x, y, z, radius) {
         var self = this,
             scaledRadius,
@@ -58,22 +73,28 @@ FAUX.renderer = {
 
         // Simulate "fog" by transitioning to white as distance increases
 
-        colorValue = (z > -255 ? -1 * Math.floor(z) : 255).toString(16); // convert base 10 to hexadecimal
-
-        if (colorValue.length > 1) {
-            colorValue = '#' + colorValue + colorValue + colorValue;
-        } else {
-            colorValue = '#0' + colorValue + '0' + colorValue + '0' + colorValue;
-        }
+        colorValue = self.depthToColor(z);
 
         // Draw the circle
 
         self.ctx.beginPath();
         self.ctx.arc(x, y, scaledRadius, 0, 2 * Math.PI, false);
         self.ctx.fillStyle = colorValue;
         self.ctx.fill();
-        //self.ctx.lineWidth = 1;
-        //self.ctx.strokeStyle = 'white';
-        //self.ctx.stroke();
+
+        // 1px white border
+        self.ctx.lineWidth = 1;
+        self.ctx.strokeStyle = 'white';
+        self.ctx.stroke();
+    },
+    drawLine: function (vertex1, vertex2) {
+        var self = this;
+
+        self.ctx.lineWidth = 1;
+        self.ctx.beginPath();
+        self.ctx.moveTo(vertex1.x, vertex1.y);
+        self.ctx.lineTo(vertex2.x, vertex2.y);
+        self.ctx.strokeStyle = self.depthToColor(vertex1.z);
+        self.ctx.stroke();
     }
 };
diff --git a/_ui/js/main.js b/_ui/js/main.js
@@ -33,7 +33,7 @@ FAUX.main = {
 
         self.spheres = [];
 
-        for (i = 0, ii = 50; i < ii; i++) {
+        for (i = 0, ii = 10; i < ii; i++) {
             self.spheres.push(Object.create(FAUX.Sphere));
 
             self.spheres[i].x = 0;
@@ -72,6 +72,8 @@ FAUX.main = {
                 requestAnimationFrame(draw);
                 TWEEN.update();
                 stats.update();
+                FAUX.renderer.clear();
+                self.drawLines();
                 self.drawSpheres();
             }
         }
@@ -109,8 +111,6 @@ FAUX.main = {
             ii,
             sphere;
 
-        FAUX.renderer.clear();
-
         // Sort by z-depth
         self.spheres.sort(function (a, b) {
             return a.z > b.z;
@@ -123,5 +123,32 @@ FAUX.main = {
             FAUX.renderer.drawSphere(sphere.x, sphere.y, sphere.z, sphere.radius);
             //console.log(i, ' z: ', sphere.z);
         }
+    },
+    drawLines: function () {
+        var self = this,
+            i,
+            ii,
+            sphere1,
+            sphere2;
+
+        for (i = 0, ii = self.spheres.length; i < ii; i++) {
+            sphere1 = self.spheres[i];
+
+            if (i !== ii - 1) {
+                sphere2 = self.spheres[i + 1];
+            } else {
+                sphere2 = self.spheres[0];
+            }
+
+            FAUX.renderer.drawLine({
+                x: sphere1.x,
+                y: sphere1.y,
+                z: sphere1.z
+            }, {
+                x: sphere2.x,
+                y: sphere2.y,
+                z: sphere2.z
+            });
+        }
     }
 };
diff --git a/index.html b/index.html
@@ -23,10 +23,7 @@
 <script src="_ui/js/lib/stats.min.js"></script>
 <script type="text/javascript">
     var stats = new Stats();
-    stats.setMode(1); // 0: fps, 1: ms
+    stats.setMode(0); // 0: fps, 1: ms
     document.body.appendChild( stats.domElement );
-
-    $(document).ready(function () {
-        FAUX.main.init();
-    });
+    FAUX.main.init();
 </script>