Created
July 24, 2010 14:45
-
-
Save beastaugh/488729 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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