View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
/* * READ THIS! * This is NOT the official version of JSTweener, it has been modified * to gain some performance stripping unneeded features. The use of * this version of the class is NOT recommended. -- Mr.doob * * http://coderepos.org/share/wiki/JSTweener * * Yuichi Tateno.
* http://rails2u.com/ * * The MIT License * -------- * Copyright (c) 2007 Yuichi Tateno. * * http://www.opensource.org/licenses/mit-license.php */ var JSTweener = { objects: [], defaultOptions: { time: 1, transition: 'easeoutexpo', delay: 0, prefix: {}, suffix: {}, onStart: undefined, onStartParams: undefined, onUpdate: undefined, onUpdateParams: undefined, onComplete: undefined, onCompleteParams: undefined }, easingFunctionsLowerCase: {}, init: function () { for (var key in JSTweener.easingFunctions) { this.easingFunctionsLowerCase[key.toLowerCase()] = JSTweener.easingFunctions[key]; } }, toNumber: function (value, prefix, suffix) { if (!suffix) suffix = 'px'; return value.toString().match(/[0-9]/) ? Number(value.toString().replace( new RegExp(suffix + '$'), '').replace( new RegExp('^' + (prefix ? prefix : '')), '')) : 0; }, addTween: function (obj, options) { var self = this; for (var i = 0; i < self.objects.length; i++) { if (self.objects[i].target == obj) self.objects.splice(i, 1); } var o = {}; o.target = obj; o.targetProperties = {}; for (var key in this.defaultOptions) { if (typeof options[key] != 'undefined') { o[key] = options[key]; delete options[key]; } else { o[key] = this.defaultOptions[key]; } } if (typeof o.transition == 'function') { o.easing = o.transition; } else { o.easing = this.easingFunctionsLowerCase[o.transition.toLowerCase()]; } for (var key in options) { if (!o.prefix[key]) o.prefix[key] = ''; if (!o.suffix[key]) o.suffix[key] = ''; var sB = this.toNumber(obj[key], o.prefix[key], o.suffix[key]); o.targetProperties[key] = { b: sB, c: options[key] - sB }; } setTimeout(function () { o.startTime = (new Date() - 0); o.endTime = o.time * 1000 + o.startTime; self.objects.push(o); }, o.delay * 1000); }, update: function () { var now = (new Date() - 0); for (var i = 0; i < this.objects.length; i++) { var o = this.objects[i]; var t = now - o.startTime; var d = o.endTime - o.startTime; if (t >= d) { for (var property in o.targetProperties) { var tP = o.targetProperties[property]; try { o.target[property] = o.prefix[property] + (tP.b + tP.c) + o.suffix[property]; } catch (e) {} } this.objects.splice(i, 1); if (typeof o.onComplete == 'function') { if (o.onCompleteParams) { o.onComplete.apply(o, o.onCompleteParams); } else { o.onComplete(); } } } else { for (var property in o.targetProperties) { var tP = o.targetProperties[property]; var val = o.easing(t, tP.b, tP.c, d); try { // FIXME:For IE. A Few times IE (style.width||style.height) = value is throw error... o.target[property] = o.prefix[property] + val + o.suffix[property]; } catch (e) {} } } } } }; /* * JSTweener.easingFunctions is * Tweener's easing functions (Penner's Easing Equations) porting to JavaScript. * http://code.google.com/p/tweener/ */ JSTweener.easingFunctions = { easeNone: function (t, b, c, d) { return c * t / d + b; }, easeInQuad: function (t, b, c, d) { return c * (t /= d) * t + b; }, easeOutQuad: function (t, b, c, d) { return -c * (t /= d) * (t - 2) + b; }, easeInOutQuad: function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t - 2) - 1) + b; }, easeInCubic: function (t, b, c, d) { return c * (t /= d) * t * t + b; }, easeOutCubic: function (t, b, c, d) { return c * ((t = t / d - 1) * t * t + 1) + b; }, easeInOutCubic: function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; return c / 2 * ((t -= 2) * t * t + 2) + b; }, easeOutInCubic: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeOutCubic(t * 2, b, c / 2, d); return JSTweener.easingFunctions.easeInCubic((t * 2) - d, b + c / 2, c / 2, d); }, easeInQuart: function (t, b, c, d) { return c * (t /= d) * t * t * t + b; }, easeOutQuart: function (t, b, c, d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b; }, easeInOutQuart: function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b; }, easeOutInQuart: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeOutQuart(t * 2, b, c / 2, d); return JSTweener.easingFunctions.easeInQuart((t * 2) - d, b + c / 2, c / 2, d); }, easeInQuint: function (t, b, c, d) { return c * (t /= d) * t * t * t * t + b; }, easeOutQuint: function (t, b, c, d) { return c * ((t = t / d - 1) * t * t * t * t + 1) + b; }, easeInOutQuint: function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; }, easeOutInQuint: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeOutQuint(t * 2, b, c / 2, d); return JSTweener.easingFunctions.easeInQuint((t * 2) - d, b + c / 2, c / 2, d); }, easeInSine: function (t, b, c, d) { return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; }, easeOutSine: function (t, b, c, d) { return c * Math.sin(t / d * (Math.PI / 2)) + b; }, easeInOutSine: function (t, b, c, d) { return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; }, easeOutInSine: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeOutSine(t * 2, b, c / 2, d); return JSTweener.easingFunctions.easeInSine((t * 2) - d, b + c / 2, c / 2, d); }, easeInExpo: function (t, b, c, d) { return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b - c * 0.001; }, easeOutExpo: function (t, b, c, d) { return (t == d) ? b + c : c * 1.001 * (-Math.pow(2, -10 * t / d) + 1) + b; }, easeInOutExpo: function (t, b, c, d) { if (t == 0) return b; if (t == d) return b + c; if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b - c * 0.0005; return c / 2 * 1.0005 * (-Math.pow(2, -10 * --t) + 2) + b; }, easeOutInExpo: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeOutExpo(t * 2, b, c / 2, d); return JSTweener.easingFunctions.easeInExpo((t * 2) - d, b + c / 2, c / 2, d); }, easeInCirc: function (t, b, c, d) { return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; }, easeOutCirc: function (t, b, c, d) { return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; }, easeInOutCirc: function (t, b, c, d) { if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; }, easeOutInCirc: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeOutCirc(t * 2, b, c / 2, d); return JSTweener.easingFunctions.easeInCirc((t * 2) - d, b + c / 2, c / 2, d); }, easeInElastic: function (t, b, c, d, a, p) { var s; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (!a || a < Math.abs(c)) { a = c; s = p / 4; } else s = p / (2 * Math.PI) * Math.asin(c / a); return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; }, easeOutElastic: function (t, b, c, d, a, p) { var s; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (!a || a < Math.abs(c)) { a = c; s = p / 4; } else s = p / (2 * Math.PI) * Math.asin(c / a); return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); }, easeInOutElastic: function (t, b, c, d, a, p) { var s; if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5); if (!a || a < Math.abs(c)) { a = c; s = p / 4; } else s = p / (2 * Math.PI) * Math.asin(c / a); if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b; }, easeOutInElastic: function (t, b, c, d, a, p) { if (t < d / 2) return JSTweener.easingFunctions.easeOutElastic(t * 2, b, c / 2, d, a, p); return JSTweener.easingFunctions.easeInElastic((t * 2) - d, b + c / 2, c / 2, d, a, p); }, easeInBack: function (t, b, c, d, s) { if (s == undefined) s = 1.70158; return c * (t /= d) * t * ((s + 1) * t - s) + b; }, easeOutBack: function (t, b, c, d, s) { if (s == undefined) s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; }, easeInOutBack: function (t, b, c, d, s) { if (s == undefined) s = 1.70158; if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; }, easeOutInBack: function (t, b, c, d, s) { if (t < d / 2) return JSTweener.easingFunctions.easeOutBack(t * 2, b, c / 2, d, s); return JSTweener.easingFunctions.easeInBack((t * 2) - d, b + c / 2, c / 2, d, s); }, easeInBounce: function (t, b, c, d) { return c - JSTweener.easingFunctions.easeOutBounce(d - t, 0, c, d) + b; }, easeOutBounce: function (t, b, c, d) { if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; } }, easeInOutBounce: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeInBounce(t * 2, 0, c, d) * .5 + b; else return JSTweener.easingFunctions.easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b; }, easeOutInBounce: function (t, b, c, d) { if (t < d / 2) return JSTweener.easingFunctions.easeOutBounce(t * 2, b, c / 2, d); return JSTweener.easingFunctions.easeInBounce((t * 2) - d, b + c / 2, c / 2, d); } }; JSTweener.easingFunctions.linear = JSTweener.easingFunctions.easeNone; // vector3d.js var Vector3D = Class.create(); Vector3D.prototype = { x: null, y: null, z: null, sx: null, sy: null, sz: null, userData: null, dx: null, dy: null, dz: null, tx: null, ty: null, tz: null, oll: null, initialize: function (x, y, z) { this.x = x; this.y = y; this.z = z; }, copy: function (v) { this.x = v.x; this.y = v.y; this.z = v.z; }, add: function (v) { this.x += v.x; this.y += v.y; this.z += v.z; }, sub: function (v) { this.x -= v.x; this.y -= v.y; this.z -= v.z; }, cross: function (v) { this.tx = this.x; this.ty = this.y; this.tz = this.z; this.x = this.ty * v.z - this.tz * v.y; this.y = this.tz * v.x - this.tx * v.z; this.z = this.tx * v.y - this.ty * v.x; }, multiply: function (s) { this.x *= s; this.y *= s; this.z *= s; }, distanceTo: function (v) { this.dx = this.x - v.x; this.dy = this.y - v.y; this.dz = this.z - v.z; return Math.sqrt(this.dx * this.dx + this.dy * this.dy + this.dz * this.dz); }, distanceToSquared: function (v) { this.dx = this.x - v.x; this.dy = this.y - v.y; this.dz = this.z - v.z; return this.dx * this.dx + this.dy * this.dy + this.dz * this.dz; }, length: function () { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); }, lengthSq: function () { return this.x * this.x + this.y * this.y + this.z * this.z; }, negate: function () { this.x = -this.x; this.y = -this.y; this.z = -this.z; }, normalize: function () { if (this.length() > 0) this.ool = 1.0 / this.length(); else this.ool = 0; this.x *= this.ool; this.y *= this.ool; this.z *= this.ool; return this; }, dot: function (v) { return this.x * v.x + this.y * v.y + this.z * v.z; }, clone: function () { return new Vector3D(this.x, this.y, this.z); }, toString: function () { return '(' + this.x + ', ' + this.y + ', ' + this.z + ')'; } } Vector3D.add = function (a, b) { return new Vector3D(a.x + b.x, a.y + b.y, a.z + b.z); } Vector3D.sub = function (a, b) { return new Vector3D(a.x - b.x, a.y - b.y, a.z - b.z); } Vector3D.multiply = function (a, s) { return new Vector3D(a.x * s, a.y * s, a.z * s); } Vector3D.cross = function (a, b) { return new Vector3D(a.y * b.z - a.z * b.y, a.z * b.x - a.x * b.z, a.x * b.y - a.y * b.x); } Vector3D.dot = function (a, b) { return a.x * b.x + a.y * b.y + a.z * b.z; } // matrix3d.js var Matrix3D = Class.create(); Matrix3D.prototype = { n11: null, n12: null, n13: null, n14: null, n21: null, n22: null, n23: null, n24: null, n31: null, n32: null, n33: null, n34: null, x: new Vector3D(0, 0, 0), y: new Vector3D(0, 0, 0), z: new Vector3D(0, 0, 0), initialize: function () { this.identity(); }, identity: function () { this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0; this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0; this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0; this.x = new Vector3D(0, 0, 0); this.y = new Vector3D(0, 0, 0); this.z = new Vector3D(0, 0, 0); }, lookAt: function (eye, center, up) { this.z.copy(center); this.z.sub(eye); this.z.normalize(); this.x.copy(this.z); this.x.cross(up); this.x.normalize(); this.y.copy(this.x); this.y.cross(this.z); this.y.normalize(); this.n11 = this.x.x; this.n12 = this.x.y; this.n13 = this.x.z; this.n14 = -this.x.dot(eye); this.n21 = this.y.x; this.n22 = this.y.y; this.n23 = this.y.z; this.n24 = -this.y.dot(eye); this.n31 = this.z.x; this.n32 = this.z.y; this.n33 = this.z.z; this.n34 = -this.z.dot(eye); }, transform: function (v) { var vx = v.x, vy = v.y, vz = v.z; v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14; v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24; v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34; }, transformVector: function (v) { var vx = v.x, vy = v.y, vz = v.z; v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz; v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz; v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz; }, multiply: function (a, b) { var a11 = a.n11; var b11 = b.n11; var a21 = a.n21; var b21 = b.n21; var a31 = a.n31; var b31 = b.n31; var a12 = a.n12; var b12 = b.n12; var a22 = a.n22; var b22 = b.n22; var a32 = a.n32; var b32 = b.n32; var a13 = a.n13; var b13 = b.n13; var a23 = a.n23; var b23 = b.n23; var a33 = a.n33; var b33 = b.n33; var a14 = a.n14; var b14 = b.n14; var a24 = a.n24; var b24 = b.n24; var a34 = a.n34; var b34 = b.n34; this.n11 = a11 * b11 + a12 * b21 + a13 * b31; this.n12 = a11 * b12 + a12 * b22 + a13 * b32; this.n13 = a11 * b13 + a12 * b23 + a13 * b33; this.n14 = a11 * b14 + a12 * b24 + a13 * b34 + a14; this.n21 = a21 * b11 + a22 * b21 + a23 * b31; this.n22 = a21 * b12 + a22 * b22 + a23 * b32; this.n23 = a21 * b13 + a22 * b23 + a23 * b33; this.n24 = a21 * b14 + a22 * b24 + a23 * b34 + a24; this.n31 = a31 * b11 + a32 * b21 + a33 * b31; this.n32 = a31 * b12 + a32 * b22 + a33 * b32; this.n33 = a31 * b13 + a32 * b23 + a33 * b33; this.n34 = a31 * b14 + a32 * b24 + a33 * b34 + a34; }, toString: function () { return "11: " + this.n11 + ", 12: " + this.n12 + ", 13: " + this.n13 + ", 14: " + this.n14 + "\n" + "21: " + this.n21 + ", 22: " + this.n22 + ", 23: " + this.n23 + ", 24: " + this.n24 + "\n" + "31: " + this.n31 + ", 32: " + this.n32 + ", 33: " + this.n33 + ", 34: " + this.n34; } } Matrix3D.translationMatrix = function (x, y, z) { var m = new Matrix3D(); m.n14 = x; m.n24 = y; m.n34 = z; return m; } Matrix3D.scaleMatrix = function (x, y, z) { var m = new Matrix3D(); m.n11 = x; m.n22 = y; m.n33 = z; return m; } // Apply Rotation about X to Matrix Matrix3D.rotationXMatrix = function (theta) { var rot = new Matrix3D(); rot.n22 = rot.n33 = Math.cos(theta); rot.n32 = Math.sin(theta); rot.n23 = -rot.n32; return rot; } // Apply Rotation about Y to Matrix Matrix3D.rotationYMatrix = function (theta) { var rot = new Matrix3D(); rot.n11 = rot.n33 = Math.cos(theta); rot.n13 = Math.sin(theta); rot.n31 = -rot.n13; return rot; } // Apply Rotation about Z to Matrix Matrix3D.rotationZMatrix = function (theta) { var rot = new Matrix3D(); rot.n11 = rot.n22 = Math.cos(theta); rot.n21 = Math.sin(theta); rot.n12 = -rot.n21; return rot; } Matrix3D.rotationMatrix = function (ry, rx, rz) { var sx, sy, sz; var cx, cy, cz; sx = Math.sin(rx); sy = Math.sin(ry); sz = Math.sin(rz); cx = Math.cos(rx); cy = Math.cos(ry); cz = Math.cos(rz); var rot = new Matrix3D(); rot.n11 = cx * cz - sx * sy * sz; rot.n12 = -cy * sz; rot.n13 = sx * cz + cx * sy * sz; rot.n21 = cx * sz + sx * sy * cz; rot.n22 = cy * cz; rot.n23 = sx * sz - cx * sy * cz; rot.n31 = -sx * cy; rot.n32 = sy; rot.n33 = cx * cy; return rot; } // camera3d.js var Camera3D = Class.create(); Object.extend(Camera3D.prototype, Vector3D.prototype); Object.extend(Camera3D.prototype, { up: null, target: null, zoom: null, focus: null, roll: null, initialize: function () { this.up = new Vector3D(0, 1, 0); this.target = new Vector3D(0, 0, 0); this.zoom = 3; this.focus = 500; this.roll = 0; } }); // div3d.js var Div3D = Class.create(); Object.extend(Div3D.prototype, Vector3D.prototype); Object.extend(Div3D.prototype, { container: null, content: null, scale: 1, initialize: function (x, y, z) { this.x = x; this.y = y; this.z = z; this.container = document.createElement("div"); this.container.style['position'] = 'absolute'; this.content = document.createElement("div"); this.content.style['position'] = 'absolute'; this.container.appendChild(this.content); }, setVisible: function () { container.style['visibility'] = 'visible'; }, setHidden: function () { container.style['visibility'] = 'hidden'; } }); // main.js var canvas; var debug; var timer = 0; var shape = 0; var shapes = []; var particles = []; var particlesTotal = 300; var mouseX = 0; var mouseY = 0; var view = new Matrix3D(); var camera = new Camera3D(); camera.z = 750; camera.focus = 200; var focus = camera.focus; var focuszoom = camera.focus * camera.zoom; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; document.addEventListener('mousemove', onDocumentMouseMove, false); init() setInterval(loop, 1000 / 60); function init() { JSTweener.init(); canvas = document.getElementById('canvas'); // 3D Shapes // Up shapes[0] = []; for (var i = 0; i < particlesTotal; i++) { shapes[0][i] = [0, 1500, 0]; } // Plane shapes[1] = []; var amountXZ = Math.sqrt(particlesTotal); var separation = 150; var offset = amountXZ * separation * .5; var i = 0; for (var x = 0; x < amountXZ; x++) { for (var z = 0; z < amountXZ; z++) { shapes[1][i++] = [x * separation - offset, 0, z * separation - offset]; } } // Cube shapes[2] = []; var amountX = 8; var amountY = 8; var amountZ = 8; var separation = 100; var offsetX = (amountX - 1) * separation * .5; var offsetY = (amountY - 1) * separation * .5; var offsetZ = (amountZ - 1) * separation * .5; var i = 0; for (var x = 0; x < amountX; x++) { // TOP for (var z = 0; z < amountZ; z++) { shapes[2][i++] = [x * separation - offsetX, offsetY, z * separation - offsetZ]; } } for (var x = 0; x < amountX; x++) { // BOTTOM for (var z = 0; z < amountZ; z++) { shapes[2][i++] = [x * separation - offsetY, -offsetY, z * separation - offsetZ]; } } for (var x = 0; x < amountX; x++) { // FRONT for (var y = 1; y < amountY - 1; y++) { shapes[2][i++] = [x * separation - offsetX, y * separation - offsetY, offsetZ]; } } for (var x = 0; x < amountX; x++) { // BACK for (var y = 1; y < amountY - 1; y++) { shapes[2][i++] = [x * separation - offsetX, y * separation - offsetY, -offsetZ]; } } for (var y = 1; y < amountY - 1; y++) { // RIGHT for (var z = 1; z < amountZ - 1; z++) { shapes[2][i++] = [offsetX, y * separation - offsetY, z * separation - offsetZ]; } } for (var y = 1; y < amountY; y++) { // LEFT for (var z = 1; z < amountZ - 1; z++) { shapes[2][i++] = [-offsetX, y * separation - offsetY, z * separation - offsetZ]; } } // Random shapes[3] = new Array(); for (var i = 0; i < particlesTotal; i++) { shapes[3][i] = new Array(Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000); } // Sphere shapes[4] = new Array(); var phi; var theta; var radius = 500; for (var i = 0; i < particlesTotal; i++) { phi = Math.acos(-1 + (2 * i) / particlesTotal); theta = Math.sqrt(particlesTotal * Math.PI) * phi; shapes[4][i] = new Array(radius * Math.cos(theta) * Math.sin(phi), radius * Math.sin(theta) * Math.sin(phi), radius * Math.cos(phi)); } // Particles for (var i = 0; i < particlesTotal; i++) { var particle = particles[i] = new Div3D(shapes[shape][i][0], shapes[shape][i][1], shapes[shape][i][2]); particle.content.style.top = '-64px'; particle.content.style.left = '-64px'; particle.content.style.width = '128px'; particle.content.style.height = '128px'; particle.content.style.background = 'url(/assets/spriteBlur.png)'; /* particle.content.style.backgroundColor = '#ff0000'; particle.content.style.opacity = '0.2'; */ canvas.appendChild(particle.container); } animate(); } function onDocumentMouseMove(event) { mouseX = (event.clientX - windowHalfX); mouseY = (event.clientY - windowHalfY); } function animate() { shape = ++shape % shapes.length; for (var i = 0; i < particlesTotal; i++) { JSTweener.addTween(particles[i], { time: 3, delay: Math.random() * 2, x: shapes[shape][i][0], y: shapes[shape][i][1], z: shapes[shape][i][2], transition: JSTweener.easingFunctions.easeInOutExpo }); } JSTweener.addTween(null, { time: 6, onComplete: animate }); } function loop() { JSTweener.update(); timer = new Date() - 0; windowHalfX = window.innerWidth >> 1; windowHalfY = window.innerHeight >> 1; camera.x += (mouseX - camera.x) * .05; camera.y += (-mouseY - camera.y) * .05; view.lookAt(camera, camera.target, camera.up); var i = particles.length; while (--i >= 0) { var particle = particles[i]; particle.sz = particle.x * view.n31 + particle.y * view.n32 + particle.z * view.n33 + view.n34; if (focus + particle.sz < 0) { particle.content.style['visibility'] = 'hidden'; continue; } else { particle.content.style['visibility'] = 'visible'; } var ow = focuszoom / (focus + particle.sz); particle.sx = (particle.x * view.n11 + particle.y * view.n12 + particle.z * view.n13 + view.n14) * ow; particle.sy = (particle.x * view.n21 + particle.y * view.n22 + particle.z * view.n23 + view.n24) * -ow; particle.container.style.left = (particle.sx + windowHalfX) + 'px'; particle.container.style.top = (particle.sy + windowHalfY) + 'px'; // I'm sure there is a better dof formula than this... // Let me know if you have a better one! var dof = ow - .6; dof = dof < 0 ? dof * 40 : dof; dof = Math.abs(Math.floor(dof)) * 128; dof = dof > 1792 ? 1792 : dof < 0 ? 0 : dof; particle.content.style.backgroundPosition = '0px ' + -dof + 'px'; particle.scale = Math.sin((Math.floor(particle.x) + timer) * .002) * .2 + .8; var scale = ow * particle.scale; // webkit particle.container.style['-webkit-transform'] = 'scale(' + scale + ')'; // gecko particle.container.style['MozTransform'] = 'scale(' + scale + ')'; // opera particle.container.style['OTransform'] = 'scale(' + scale + ')'; particle.container.style.zIndex = 1000 + (-particle.sz * 100) >> 0; } }
Depth of Field (Javascript)
body { background-color: #ffffff; margin: 0px; overflow: hidden; }
Pop out
Help
About
×
×