Port tests to JS.Test and do some more reorganization.

jcoglan · Mar 17, 2012 · 7c9cb8c · 7c9cb8c
1 parent 3710b3c
commit 7c9cb8c
Show file tree

Hide file tree

Showing 19 changed files with 897 additions and 1,025 deletions.
diff --git a/test/demo.html → examples/demo.html b/test/demo.html → examples/demo.html
@@ -1,19 +1,16 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!doctype html>
 
 <html>
-<head>
-  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-  <title>Polygon demo</title>
-  <script src="../lib/sylvester.js" type="text/javascript" language="javascript" charset="utf-8"></script>
-</head>
-<body>
-
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Polygon demo</title>
+    <script type="text/javascript" src="../lib/sylvester-min.js"></script>
+  </head>
+  <body>
+    
     <canvas id="screen" width="800" height="600"></canvas>
 
     <script type="text/javascript">
-    (function() {
-
         var P = Polygon.create([
             [0,0], [5,0], [5,5], [0,5], [0,10],
 
@@ -60,9 +57,7 @@
         document.onclick = function() {
             trigs[i++].copyVertices();
         };
-
-    })();
     </script>
-
-</body>
+    
+  </body>
 </html>
diff --git a/test/dot.png → examples/dot.png b/test/dot.png → examples/dot.png
diff --git a/examples/dots.html b/examples/dots.html
@@ -0,0 +1,42 @@
+<!doctype html>
+
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Vectors / Matrices</title>
+    <script type="text/javascript" src="../lib/sylvester-min.js"></script>
+  </head>
+  <body style="background: #000;">
+
+    <script type="text/javascript">
+      var dots = [], images = [], h = 500;
+      var axis = Vector.create([0.7,1,0.3]);
+      var rot = Matrix.Rotation(0.1, axis);
+
+      for (var i = 0; i < 16; i++) {
+        dots[i] = Vector.create([h*(Math.random()-0.5), h*(Math.random()-0.5), h*(Math.random()-0.5)]);
+        image = document.createElement('img');
+        image.id = 'img_' + i;
+        image.src = './dot.png';
+        document.body.appendChild(image);
+        images[i] = image;
+      }
+
+      setInterval(function() {
+        for (var i = 0; i < dots.length; i++) {
+          f = (dots[i].e(3) + h)/(2*h) + 0.1;
+
+          images[i].style.opacity = f - 0.1;
+          images[i].style.width = (100 * f) + 'px';
+          images[i].style.height = (100 * f) + 'px';
+          images[i].style.position = 'absolute';
+          images[i].style.top = (300 - dots[i].e(2)*f) + 'px';
+          images[i].style.left = (600 + dots[i].e(1)*f) + 'px';
+
+          dots[i] = rot.x(dots[i]);
+        }
+      }, 20);
+    </script>
+
+  </body>
+</html>
diff --git a/examples/polygons.html b/examples/polygons.html
@@ -0,0 +1,72 @@
+<!doctype html>
+
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Vectors / Matrices</title>
+    <script type="text/javascript" src="../lib/sylvester-min.js"></script>
+  </head>
+  <body>
+
+    <canvas id="canv" width="600" height="450" style="display: block; margin: 20px auto;" onclick="rotate();"></canvas>
+
+    <script type="text/javascript">
+      var O = $V([300,225,0]);
+
+      var Foo = Polygon.create([ [0,0], [5,0], [5,5], [0,5], [0,10], [5,10], [0,5],
+          [5,5], [10,10], [10,15], [-5,15], [-5,5], [-10,5], [-10,0], [-5,0],
+          [-5,-5], [0,-5] ]).scale(20, $V([0,5])).rotate(Math.PI/3, $L([0,5], [0,2,1]));
+
+      var canvas, ctx;
+
+      window.onload = function() {
+        canvas = document.getElementById('canv');
+        ctx = canvas.getContext('2d');
+        ctx.fillColor = '#000000';
+        ctx.fillRect(0,0, canvas.width, canvas.height);
+
+        draw(ctx, Foo, 100);
+
+        var trigs;
+        trigs = Foo.toTriangles();
+        var C = 255;
+        for (var i = 0; i < trigs.length; i++) {
+          draw(ctx, trigs[i], C);
+          C -= Math.round((255 - 100) / trigs.length);
+        }
+
+        var c = Foo.centroid();
+        ctx.fillStyle = 'red';
+        ctx.fillRect(300 + c.e(1) - 5, 225 - c.e(2) - 5, 10, 10);
+      };
+
+      function draw(ctx, poly, color) {
+        ctx.fillStyle = 'rgb(' + color +',' + color + ',' + color + ')';
+        ctx.beginPath();
+        poly.vertices.each(function(node) {
+          point = O.add(node.data).reflectionIn($L(O, Vector.i));
+          if (node.data == poly.vertices.first.data) {
+            ctx.moveTo(point.e(1), point.e(2));
+          } else {
+            ctx.lineTo(point.e(1), point.e(2));
+          }
+        } );
+        ctx.fill();
+      }
+
+      function rotate() {
+        ctx.fillStyle = '#000000';
+        ctx.fillRect(0,0, canvas.width, canvas.height);
+        Foo.rotate(Math.PI/20, $L([0,5], [0,2,1]));
+        var trigs = Foo.toTriangles();
+        var C = 255;
+        for (var i = 0; i < trigs.length; i++) {
+          draw(ctx, trigs[i], C);
+          C -= Math.round((255 - 100) / trigs.length);
+        }
+        setTimeout(rotate, 20);
+      }
+    </script>
+
+  </body>
+</html>
diff --git a/src/matrix.js b/src/matrix.js
@@ -225,7 +225,7 @@ Sylvester.Matrix.prototype = {
       }
     }
     var M = Sylvester.Matrix.create(elements);
-    return returnSylvester.Vector ? M.col(1) : M;
+    return returnVector ? M.col(1) : M;
   },
 
   x: function(matrix) { return this.multiply(matrix); },

diff --git a/src/vector.js b/src/vector.js
@@ -180,7 +180,7 @@ Sylvester.Vector.prototype = {
 
   // Returns a diagonal matrix with the vector's elements as its diagonal elements
   toDiagonalMatrix: function() {
-    return Matrix.Diagonal(this.elements);
+    return Sylvester.Matrix.Diagonal(this.elements);
   },
 
   // Returns the result of rounding the elements of the vector
@@ -228,7 +228,7 @@ Sylvester.Vector.prototype = {
       case 2:
         V = obj.elements || obj;
         if (V.length != 2) { return null; }
-        if (!R) { R = Matrix.Rotation(t).elements; }
+        if (!R) { R = Sylvester.Matrix.Rotation(t).elements; }
         x = this.elements[0] - V[0];
         y = this.elements[1] - V[1];
         return Sylvester.Vector.create([
@@ -239,7 +239,7 @@ Sylvester.Vector.prototype = {
       case 3:
         if (!obj.direction) { return null; }
         var C = obj.pointClosestTo(this).elements;
-        if (!R) { R = Matrix.Rotation(t, obj.direction).elements; }
+        if (!R) { R = Sylvester.Matrix.Rotation(t, obj.direction).elements; }
         x = this.elements[0] - C[0];
         y = this.elements[1] - C[1];
         z = this.elements[2] - C[2];

diff --git a/test/dots.html b/test/dots.html
diff --git a/test/line.html b/test/line.html