beastaugh / 3d_transforms.patch

Created July 24, 2010

From ec4ee0a508c3b4573b805cafda8c8f35388f9ffc Mon Sep 17 00:00:00 2001
From: Benedict Eastaugh <benedict@eastaugh.net>
Date: Sat, 24 Jul 2010 15:43:57 +0100
Subject: [PATCH] Just generating a patch so I can hack on stuff.
 
---
 src/firmin.js           |  115 +++++++++++++++++++++++++++++++++++++++++-----
 test/3d-transforms.html |  109 ++++++++++++++++++++++++++++++++++++++++++++
 test/index.html         |    1 +
 3 files changed, 212 insertions(+), 13 deletions(-)
 create mode 100644 test/3d-transforms.html
 
diff --git a/src/firmin.js b/src/firmin.js
index b5af7b9..4ffcb54 100644
--- a/src/firmin.js
+++ b/src/firmin.js
@@ -110,11 +110,12 @@ Firmin.Transform.multiply = function(a, b) {
 };
 
 Firmin.Transform.methods = [
-    "translate", "translateX", "translateY",
-    "scale", "scaleX", "scaleY",
-    "rotate",
+    "translate", "translate3d", "translateX", "translateY", "translateZ",
+    "scale", "scale3d", "scaleX", "scaleY", "scaleZ",
+    "rotate", "rotate3d", "rotateX", "rotateY", "rotateZ",
     "skew", "skewX", "skewY",
-    "matrix"
+    "matrix", "matrix3d",
+    "perspective"
 ];
 
 /*
@@ -163,6 +164,7 @@ Firmin.Transform.parse = function(description, context) {
 };
 
 Firmin.Transform.prototype.matrix3d = function(m) {
+    console.log(m);
     this.ctm = Firmin.Transform.multiply(this.ctm, m);
 };
 
@@ -219,6 +221,22 @@ Firmin.Transform.prototype.translate = function(distances) {
     this.matrix(1, 0, 0, 1, x, y);
 };
 
+Firmin.Transform.prototype.translate3d = function(distances) {
+    var vector = Firmin.pointToVector(distances),
+        x      = vector[0],
+        y      = vector[1],
+        z      = vector[2];
+    
+    if (typeof x !== "number") x = parseInt(x, 10) || 0;
+    if (typeof y !== "number") y = parseInt(y, 10) || 0;
+    if (typeof z !== "number") z = parseInt(z, 10) || 0;
+    
+    this.matrix3d([1, 0, 0, 0,
+                   0, 1, 0, 0,
+                   0, 0, 1, 0,
+                   x, y, z, 1]);
+};
+
 Firmin.Transform.prototype.translateX = function(distance) {
     this.translate([distance, 0]);
 };
@@ -227,29 +245,50 @@ Firmin.Transform.prototype.translateY = function(distance) {
     this.translate([0, distance]);
 };
 
+Firmin.Transform.prototype.translateZ = function(distance) {
+    this.translate3d([0, 0, distance]);
+};
+
+Firmin.Transform.prototype.scale3d = function(magnitudes) {
+    var vector = Firmin.pointToVector(magnitudes),
+        x      = vector[0],
+        y      = vector[1],
+        z      = vector[2];
+    
+    if (typeof x !== "number") x = 1;
+    if (typeof y !== "number") y = 1;
+    if (typeof z !== "number") z = 1;
+    
+    this.matrix3d([x, 0, 0, 0,
+                   0, y, 0, 0,
+                   0, 0, z, 0,
+                   0, 0, 0, 1])
+};
+
 Firmin.Transform.prototype.scale = function(magnitudes) {
-    var vector, x, y;
+    var vector;
     
     if (typeof magnitudes === "number") {
-        x = y = magnitudes;
+        vector = [magnitudes, magnitudes, 1];
     } else {
         vector = Firmin.pointToVector(magnitudes);
-        x      = vector[0];
-        y      = vector[1];
         
-        if (typeof x !== "number") x = 1;
-        if (typeof y !== "number") y = 1;
+        if (typeof vector[2] !== "number") vector[2] = 1;
     }
     
-    this.matrix(x, 0, 0, y, 0, 0);
+    this.scale3d(vector);
 };
 
 Firmin.Transform.prototype.scaleX = function(magnitude) {
-    this.scale([magnitude, 1]);
+    this.scale3d([magnitude, 1, 1]);
 };
 
 Firmin.Transform.prototype.scaleY = function(magnitude) {
-    this.scale([1, magnitude]);
+    this.scale3d([1, magnitude, 1]);
+};
+
+Firmin.Transform.prototype.scaleZ = function(magnitude) {
+    this.scale3d([1, 1, magnitude]);
 };
 
 Firmin.Transform.prototype.skew = function(magnitudes) {
@@ -296,6 +335,52 @@ Firmin.Transform.prototype.rotate = function(angle) {
     );
 };
 
+Firmin.Transform.prototype.rotate3d = function(params) {
+    var x   = params.x,
+        y   = params.y,
+        z   = params.z,
+        a   = params.angle,
+        cos = Math.cos,
+        sin = Math.sin;
+    
+    if (typeof x !== "number") x = 0;
+    if (typeof y !== "number") y = 0;
+    if (typeof z !== "number") z = 0;
+    
+    a = Firmin.angleToRadians.apply(null, Firmin.Parser.parseAngle(a));
+    
+    this.matrix3d([
+        1 + (1 - cos(a)) * (x * x - 1),
+        -z * sin(a) + (1 - cos(a)) * x * y,
+        y * sin(a) + (1 - cos(a)) * x * z,
+        0,
+        z * sin(a) + (1 - cos(a)) * x * y,
+        1 + (1 - cos(a)) * (y * y - 1),
+        -x * sin(a) + (1 - cos(a)) * y * z,
+        0,
+        -y * sin(a) + (1 - cos(a)) * x * z,
+        x * sin(a) + (1 - cos(a)) * y * z,
+        1 + (1 - cos(a)) * (z * z - 1),
+        0,
+        0,
+        0,
+        0,
+        1
+    ]);
+};
+
+Firmin.Transform.prototype.rotateX = function(angle) {
+    this.rotate3d({x: 1, angle: angle});
+};
+
+Firmin.Transform.prototype.rotateY = function(angle) {
+    this.rotate3d({y: 1, angle: angle});
+};
+
+Firmin.Transform.prototype.rotateZ = function(angle) {
+    this.rotate3d({z: 1, angle: angle});
+};
+
 Firmin.Transform.prototype.origin = function(origin) {
     var vector = Firmin.pointToVector(origin);
     
@@ -304,6 +389,10 @@ Firmin.Transform.prototype.origin = function(origin) {
     if (vector[2]) this.centre[2] = vector[2];
 };
 
+Firmin.Transform.prototype.perspective = function(depth) {
+    
+};
+
 /*
 
 CSS transitions are the basic mechanism behind animation in Firmin, and
diff --git a/test/3d-transforms.html b/test/3d-transforms.html
new file mode 100644
index 0000000..70dc278
--- /dev/null
+++ b/test/3d-transforms.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html><head>
+    <title>Firmin 3D transform tests</title>
+    
+    <style type="text/css" media="screen">
+        html, body {font-family:Helvetica, Arial, sans-serif; color:#000; background:#fff; margin:0; border:none; padding:0;}
+        body {margin:50px;}
+        
+        .container {
+            position:relative;
+            float:left;
+            width:200px;
+            height:200px;
+            margin:0 20px 20px 0;
+            border:1px solid #ccc;
+            padding:50px;
+        }
+        
+        .legend {
+            margin:0;
+            position:absolute;
+            top:10px;
+            left:10px;
+            font-weight:bold;
+            background:#fff;
+        }
+        
+        .transform-css, .transform-js {
+            position:absolute;
+            top:50px;
+            left:50px;
+            width:200px;
+            height:200px;
+            opacity:0.5;
+        }
+        
+        .transform-css {
+            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f00), to(#fff));
+        }
+        
+        .transform-js {
+            background:-webkit-gradient(linear, 0 0, 0 100%, from(#00f), to(#fff));
+        }
+        
+        #test-translate .transform-css {
+            -webkit-transform:translate3d(20px, 20px, 20px);
+        }
+        
+        #test-rotate .transform-css {
+            -webkit-transform:rotate3d(0, 1, 1, 2rad);
+        }
+        
+        #test-scale .transform-css {
+            -webkit-transform:rotateZ(1rad) scale3d(1, 1, 2);
+        }
+    </style>
+    
+    <script type="text/javascript" src="lib/firmin-min.js"></script>
+    
+    <script type="text/javascript" charset="utf-8">
+        window.$ = function(query) {
+            return document.querySelector(query);
+        };
+    </script>
+</head><body>
+    <h1 id="description">Transform tests</h1>
+    
+    <p>Red boxes are transformed with CSS, blue boxes with Firmin.</p>
+        
+    <p>
+        Boxes not lining up exactly (producing a purple box) indicates a
+        regression.
+    </p>
+    
+    <div class="container" id="test-translate">
+        <div class="transform-css"></div>
+        <div class="transform-js"></div>
+        <p class="legend">Translate</p>
+    </div>
+    
+    <script type="text/javascript">
+        Firmin.translate3d($('#test-translate .transform-js'), ["20px", "20px", "20px"]);
+    </script>
+    
+    <div class="container" id="test-rotate">
+        <div class="transform-css"></div>
+        <div class="transform-js"></div>
+        <p class="legend">Rotate</p>
+    </div>
+    
+    <script type="text/javascript">
+        Firmin.rotate3d($('#test-rotate .transform-js'), {
+            x: 0, y: 1, z: 1, angle: "2rad"
+        });
+    </script>
+    
+    <div class="container" id="test-scale">
+        <div class="transform-css"></div>
+        <div class="transform-js"></div>
+        <p class="legend">Scale</p>
+    </div>
+    
+    <script type="text/javascript">
+        Firmin.animate($('#test-scale .transform-js'), {
+            rotateZ: "1rad",
+            scale3d: {x: 1, y: 1, z: 2}
+        });
+    </script>
+</body></html>
diff --git a/test/index.html b/test/index.html
index ea2ddfd..3433420 100644
--- a/test/index.html
+++ b/test/index.html
@@ -8,6 +8,7 @@
         <li><a href="animate.html">Animation</a></li>
         <li><a href="transition.html">Transitions</a></li>
         <li><a href="transforms.html">Transforms</a></li>
+        <li><a href="3d-transforms.html">3D Transforms</a></li>
         <li><a href="chain.html">Chaining</a></li>
         <li><a href="parser.html">Parsing</a></li>
     </ul>
-- 
1.7.1