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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment