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
