├── README.md
├── index.html
└── js
├── underscore-min.js
├── Tween.js
└── pixel-hubbers.js
/README.md:
--------------------------------------------------------------------------------
1 | pixel-hubbers
2 | =============
3 |
4 | Pixelcat experiment with three.js
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | PixelHubbers
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/js/underscore-min.js:
--------------------------------------------------------------------------------
1 | // Underscore.js 1.4.1
2 | // http://underscorejs.org
3 | // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
4 | // Underscore may be freely distributed under the MIT license.
5 | (function(){var e=this,t=e._,n={},r=Array.prototype,i=Object.prototype,s=Function.prototype,o=r.push,u=r.slice,a=r.concat,f=r.unshift,l=i.toString,c=i.hasOwnProperty,h=r.forEach,p=r.map,d=r.reduce,v=r.reduceRight,m=r.filter,g=r.every,y=r.some,b=r.indexOf,w=r.lastIndexOf,E=Array.isArray,S=Object.keys,x=s.bind,T=function(e){if(e instanceof T)return e;if(!(this instanceof T))return new T(e);this._wrapped=e};typeof exports!="undefined"?(typeof module!="undefined"&&module.exports&&(exports=module.exports=T),exports._=T):e._=T,T.VERSION="1.4.1";var N=T.each=T.forEach=function(e,t,r){if(h&&e.forEach===h)e.forEach(t,r);else if(e.length===+e.length){for(var i=0,s=e.length;i2;if(d&&e.reduce===d)return r&&(t=T.bind(t,r)),i?e.reduce(t,n):e.reduce(t);N(e,function(e,s,o){i?n=t.call(r,n,e,s,o):(n=e,i=!0)});if(!i)throw new TypeError("Reduce of empty array with no initial value");return n},T.reduceRight=T.foldr=function(e,t,n,r){var i=arguments.length>2;if(v&&e.reduceRight===v)return r&&(t=T.bind(t,r)),arguments.length>2?e.reduceRight(t,n):e.reduceRight(t);var s=e.length;if(s!==+s){var o=T.keys(e);s=o.length}N(e,function(u,a,f){a=o?o[--s]:--s,i?n=t.call(r,n,e[a],a,f):(n=e[a],i=!0)});if(!i)throw new TypeError("Reduce of empty array with no initial value");return n},T.find=T.detect=function(e,t,n){var r;return C(e,function(e,i,s){if(t.call(n,e,i,s))return r=e,!0}),r},T.filter=T.select=function(e,t,n){var r=[];return m&&e.filter===m?e.filter(t,n):(N(e,function(e,i,s){t.call(n,e,i,s)&&(r[r.length]=e)}),r)},T.reject=function(e,t,n){var r=[];return N(e,function(e,i,s){t.call(n,e,i,s)||(r[r.length]=e)}),r},T.every=T.all=function(e,t,r){t||(t=T.identity);var i=!0;return g&&e.every===g?e.every(t,r):(N(e,function(e,s,o){if(!(i=i&&t.call(r,e,s,o)))return n}),!!i)};var C=T.some=T.any=function(e,t,r){t||(t=T.identity);var i=!1;return y&&e.some===y?e.some(t,r):(N(e,function(e,s,o){if(i||(i=t.call(r,e,s,o)))return n}),!!i)};T.contains=T.include=function(e,t){var n=!1;return b&&e.indexOf===b?e.indexOf(t)!=-1:(n=C(e,function(e){return e===t}),n)},T.invoke=function(e,t){var n=u.call(arguments,2);return T.map(e,function(e){return(T.isFunction(t)?t:e[t]).apply(e,n)})},T.pluck=function(e,t){return T.map(e,function(e){return e[t]})},T.where=function(e,t){return T.isEmpty(t)?[]:T.filter(e,function(e){for(var n in t)if(t[n]!==e[n])return!1;return!0})},T.max=function(e,t,n){if(!t&&T.isArray(e)&&e[0]===+e[0]&&e.length<65535)return Math.max.apply(Math,e);if(!t&&T.isEmpty(e))return-Infinity;var r={computed:-Infinity};return N(e,function(e,i,s){var o=t?t.call(n,e,i,s):e;o>=r.computed&&(r={value:e,computed:o})}),r.value},T.min=function(e,t,n){if(!t&&T.isArray(e)&&e[0]===+e[0]&&e.length<65535)return Math.min.apply(Math,e);if(!t&&T.isEmpty(e))return Infinity;var r={computed:Infinity};return N(e,function(e,i,s){var o=t?t.call(n,e,i,s):e;or||n===void 0)return 1;if(n>>1;n.call(r,e[u])=0})})},T.difference=function(e){var t=a.apply(r,u.call(arguments,1));return T.filter(e,function(e){return!T.contains(t,e)})},T.zip=function(){var e=u.call(arguments),t=T.max(T.pluck(e,"length")),n=new Array(t);for(var r=0;r=0;n--)t=[e[n].apply(this,t)];return t[0]}},T.after=function(e,t){return e<=0?t():function(){if(--e<1)return t.apply(this,arguments)}},T.keys=S||function(e){if(e!==Object(e))throw new TypeError("Invalid object");var t=[];for(var n in e)T.has(e,n)&&(t[t.length]=n);return t},T.values=function(e){var t=[];for(var n in e)T.has(e,n)&&t.push(e[n]);return t},T.pairs=function(e){var t=[];for(var n in e)T.has(e,n)&&t.push([n,e[n]]);return t},T.invert=function(e){var t={};for(var n in e)T.has(e,n)&&(t[e[n]]=n);return t},T.functions=T.methods=function(e){var t=[];for(var n in e)T.isFunction(e[n])&&t.push(n);return t.sort()},T.extend=function(e){return N(u.call(arguments,1),function(t){for(var n in t)e[n]=t[n]}),e},T.pick=function(e){var t={},n=a.apply(r,u.call(arguments,1));return N(n,function(n){n in e&&(t[n]=e[n])}),t},T.omit=function(e){var t={},n=a.apply(r,u.call(arguments,1));for(var i in e)T.contains(n,i)||(t[i]=e[i]);return t},T.defaults=function(e){return N(u.call(arguments,1),function(t){for(var n in t)e[n]==null&&(e[n]=t[n])}),e},T.clone=function(e){return T.isObject(e)?T.isArray(e)?e.slice():T.extend({},e):e},T.tap=function(e,t){return t(e),e};var M=function(e,t,n,r){if(e===t)return e!==0||1/e==1/t;if(e==null||t==null)return e===t;e instanceof T&&(e=e._wrapped),t instanceof T&&(t=t._wrapped);var i=l.call(e);if(i!=l.call(t))return!1;switch(i){case"[object String]":return e==String(t);case"[object Number]":return e!=+e?t!=+t:e==0?1/e==1/t:e==+t;case"[object Date]":case"[object Boolean]":return+e==+t;case"[object RegExp]":return e.source==t.source&&e.global==t.global&&e.multiline==t.multiline&&e.ignoreCase==t.ignoreCase}if(typeof e!="object"||typeof t!="object")return!1;var s=n.length;while(s--)if(n[s]==e)return r[s]==t;n.push(e),r.push(t);var o=0,u=!0;if(i=="[object Array]"){o=e.length,u=o==t.length;if(u)while(o--)if(!(u=M(e[o],t[o],n,r)))break}else{var a=e.constructor,f=t.constructor;if(a!==f&&!(T.isFunction(a)&&a instanceof a&&T.isFunction(f)&&f instanceof f))return!1;for(var c in e)if(T.has(e,c)){o++;if(!(u=T.has(t,c)&&M(e[c],t[c],n,r)))break}if(u){for(c in t)if(T.has(t,c)&&!(o--))break;u=!o}}return n.pop(),r.pop(),u};T.isEqual=function(e,t){return M(e,t,[],[])},T.isEmpty=function(e){if(e==null)return!0;if(T.isArray(e)||T.isString(e))return e.length===0;for(var t in e)if(T.has(e,t))return!1;return!0},T.isElement=function(e){return!!e&&e.nodeType===1},T.isArray=E||function(e){return l.call(e)=="[object Array]"},T.isObject=function(e){return e===Object(e)},N(["Arguments","Function","String","Number","Date","RegExp"],function(e){T["is"+e]=function(t){return l.call(t)=="[object "+e+"]"}}),T.isArguments(arguments)||(T.isArguments=function(e){return!!e&&!!T.has(e,"callee")}),typeof /./!="function"&&(T.isFunction=function(e){return typeof e=="function"}),T.isFinite=function(e){return T.isNumber(e)&&isFinite(e)},T.isNaN=function(e){return T.isNumber(e)&&e!=+e},T.isBoolean=function(e){return e===!0||e===!1||l.call(e)=="[object Boolean]"},T.isNull=function(e){return e===null},T.isUndefined=function(e){return e===void 0},T.has=function(e,t){return c.call(e,t)},T.noConflict=function(){return e._=t,this},T.identity=function(e){return e},T.times=function(e,t,n){for(var r=0;r":">",'"':""","'":"'","/":"/"}};_.unescape=T.invert(_.escape);var D={escape:new RegExp("["+T.keys(_.escape).join("")+"]","g"),unescape:new RegExp("("+T.keys(_.unescape).join("|")+")","g")};T.each(["escape","unescape"],function(e){T[e]=function(t){return t==null?"":(""+t).replace(D[e],function(t){return _[e][t]})}}),T.result=function(e,t){if(e==null)return null;var n=e[t];return T.isFunction(n)?n.call(e):n},T.mixin=function(e){N(T.functions(e),function(t){var n=T[t]=e[t];T.prototype[t]=function(){var e=[this._wrapped];return o.apply(e,arguments),F.call(this,n.apply(T,e))}})};var P=0;T.uniqueId=function(e){var t=P++;return e?e+t:t},T.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var H=/(.)^/,B={"'":"'","\\":"\\","\r":"r","\n":"n"," ":"t","\u2028":"u2028","\u2029":"u2029"},j=/\\|'|\r|\n|\t|\u2028|\u2029/g;T.template=function(e,t,n){n=T.defaults({},n,T.templateSettings);var r=new RegExp([(n.escape||H).source,(n.interpolate||H).source,(n.evaluate||H).source].join("|")+"|$","g"),i=0,s="__p+='";e.replace(r,function(t,n,r,o,u){s+=e.slice(i,u).replace(j,function(e){return"\\"+B[e]}),s+=n?"'+\n((__t=("+n+"))==null?'':_.escape(__t))+\n'":r?"'+\n((__t=("+r+"))==null?'':__t)+\n'":o?"';\n"+o+"\n__p+='":"",i=u+t.length}),s+="';\n",n.variable||(s="with(obj||{}){\n"+s+"}\n"),s="var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};\n"+s+"return __p;\n";try{var o=new Function(n.variable||"obj","_",s)}catch(u){throw u.source=s,u}if(t)return o(t,T);var a=function(e){return o.call(this,e,T)};return a.source="function("+(n.variable||"obj")+"){\n"+s+"}",a},T.chain=function(e){return T(e).chain()};var F=function(e){return this._chain?T(e).chain():e};T.mixin(T),N(["pop","push","reverse","shift","sort","splice","unshift"],function(e){var t=r[e];T.prototype[e]=function(){var n=this._wrapped;return t.apply(n,arguments),(e=="shift"||e=="splice")&&n.length===0&&delete n[0],F.call(this,n)}}),N(["concat","join","slice"],function(e){var t=r[e];T.prototype[e]=function(){return F.call(this,t.apply(this._wrapped,arguments))}}),T.extend(T.prototype,{chain:function(){return this._chain=!0,this},value:function(){return this._wrapped}})}).call(this);
--------------------------------------------------------------------------------
/js/Tween.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author sole / http://soledadpenades.com
3 | * @author mr.doob / http://mrdoob.com
4 | * @author Robert Eisele / http://www.xarg.org
5 | * @author Philippe / http://philippe.elsass.me
6 | * @author Robert Penner / http://www.robertpenner.com/easing_terms_of_use.html
7 | * @author Paul Lewis / http://www.aerotwist.com/
8 | * @author lechecacharro
9 | * @author Josh Faul / http://jocafa.com/
10 | * @author egraether / http://egraether.com/
11 | */
12 |
13 | var TWEEN = TWEEN || ( function () {
14 |
15 | var _tweens = [];
16 |
17 | return {
18 |
19 | REVISION: '6',
20 |
21 | getAll: function () {
22 |
23 | return _tweens;
24 |
25 | },
26 |
27 | removeAll: function () {
28 |
29 | _tweens = [];
30 |
31 | },
32 |
33 | add: function ( tween ) {
34 |
35 | _tweens.push( tween );
36 |
37 | },
38 |
39 | remove: function ( tween ) {
40 |
41 | var i = _tweens.indexOf( tween );
42 |
43 | if ( i !== -1 ) {
44 |
45 | _tweens.splice( i, 1 );
46 |
47 | }
48 |
49 | },
50 |
51 | update: function ( time ) {
52 |
53 | var i = 0;
54 | var num_tweens = _tweens.length;
55 | var time = time !== undefined ? time : Date.now();
56 |
57 | while ( i < num_tweens ) {
58 |
59 | if ( _tweens[ i ].update( time ) ) {
60 |
61 | i ++;
62 |
63 | } else {
64 |
65 | _tweens.splice( i, 1 );
66 | num_tweens --;
67 |
68 | }
69 |
70 | }
71 |
72 | }
73 |
74 | };
75 |
76 | } )();
77 |
78 | TWEEN.Tween = function ( object ) {
79 |
80 | var _object = object;
81 | var _valuesStart = {};
82 | var _valuesEnd = {};
83 | var _duration = 1000;
84 | var _delayTime = 0;
85 | var _startTime = null;
86 | var _easingFunction = TWEEN.Easing.Linear.None;
87 | var _interpolationFunction = TWEEN.Interpolation.Linear;
88 | var _chainedTween = null;
89 | var _onUpdateCallback = null;
90 | var _onCompleteCallback = null;
91 |
92 | this.to = function ( properties, duration ) {
93 |
94 | if ( duration !== null ) {
95 |
96 | _duration = duration;
97 |
98 | }
99 |
100 | _valuesEnd = properties;
101 |
102 | return this;
103 |
104 | };
105 |
106 | this.start = function ( time ) {
107 |
108 | TWEEN.add( this );
109 |
110 | _startTime = time !== undefined ? time : Date.now();
111 | _startTime += _delayTime;
112 |
113 | for ( var property in _valuesEnd ) {
114 |
115 | // This prevents the engine from interpolating null values
116 | if ( _object[ property ] === null ) {
117 |
118 | continue;
119 |
120 | }
121 |
122 | // check if an Array was provided as property value
123 | if ( _valuesEnd[ property ] instanceof Array ) {
124 |
125 | if ( _valuesEnd[ property ].length === 0 ) {
126 |
127 | continue;
128 |
129 | }
130 |
131 | // create a local copy of the Array with the start value at the front
132 | _valuesEnd[ property ] = [ _object[ property ] ].concat( _valuesEnd[ property ] );
133 |
134 | }
135 |
136 | _valuesStart[ property ] = _object[ property ];
137 |
138 | }
139 |
140 | return this;
141 |
142 | };
143 |
144 | this.stop = function () {
145 |
146 | TWEEN.remove( this );
147 | return this;
148 |
149 | };
150 |
151 | this.delay = function ( amount ) {
152 |
153 | _delayTime = amount;
154 | return this;
155 |
156 | };
157 |
158 | this.easing = function ( easing ) {
159 |
160 | _easingFunction = easing;
161 | return this;
162 |
163 | };
164 |
165 | this.interpolation = function ( interpolation ) {
166 |
167 | _interpolationFunction = interpolation;
168 | return this;
169 |
170 | };
171 |
172 | this.chain = function ( chainedTween ) {
173 |
174 | _chainedTween = chainedTween;
175 | return this;
176 |
177 | };
178 |
179 | this.onUpdate = function ( onUpdateCallback ) {
180 |
181 | _onUpdateCallback = onUpdateCallback;
182 | return this;
183 |
184 | };
185 |
186 | this.onComplete = function ( onCompleteCallback ) {
187 |
188 | _onCompleteCallback = onCompleteCallback;
189 | return this;
190 |
191 | };
192 |
193 | this.update = function ( time ) {
194 |
195 | if ( time < _startTime ) {
196 |
197 | return true;
198 |
199 | }
200 |
201 | var elapsed = ( time - _startTime ) / _duration;
202 | elapsed = elapsed > 1 ? 1 : elapsed;
203 |
204 | var value = _easingFunction( elapsed );
205 |
206 | for ( var property in _valuesStart ) {
207 |
208 | var start = _valuesStart[ property ];
209 | var end = _valuesEnd[ property ];
210 |
211 | if ( end instanceof Array ) {
212 |
213 | _object[ property ] = _interpolationFunction( end, value );
214 |
215 | } else {
216 |
217 | _object[ property ] = start + ( end - start ) * value;
218 |
219 | }
220 |
221 | }
222 |
223 | if ( _onUpdateCallback !== null ) {
224 |
225 | _onUpdateCallback.call( _object, value );
226 |
227 | }
228 |
229 | if ( elapsed == 1 ) {
230 |
231 | if ( _onCompleteCallback !== null ) {
232 |
233 | _onCompleteCallback.call( _object );
234 |
235 | }
236 |
237 | if ( _chainedTween !== null ) {
238 |
239 | _chainedTween.start();
240 |
241 | }
242 |
243 | return false;
244 |
245 | }
246 |
247 | return true;
248 |
249 | };
250 |
251 | };
252 |
253 | TWEEN.Easing = {
254 |
255 | Linear: {
256 |
257 | None: function ( k ) {
258 |
259 | return k;
260 |
261 | }
262 |
263 | },
264 |
265 | Quadratic: {
266 |
267 | In: function ( k ) {
268 |
269 | return k * k;
270 |
271 | },
272 |
273 | Out: function ( k ) {
274 |
275 | return k * ( 2 - k );
276 |
277 | },
278 |
279 | InOut: function ( k ) {
280 |
281 | if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
282 | return - 0.5 * ( --k * ( k - 2 ) - 1 );
283 |
284 | }
285 |
286 | },
287 |
288 | Cubic: {
289 |
290 | In: function ( k ) {
291 |
292 | return k * k * k;
293 |
294 | },
295 |
296 | Out: function ( k ) {
297 |
298 | return --k * k * k + 1;
299 |
300 | },
301 |
302 | InOut: function ( k ) {
303 |
304 | if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
305 | return 0.5 * ( ( k -= 2 ) * k * k + 2 );
306 |
307 | }
308 |
309 | },
310 |
311 | Quartic: {
312 |
313 | In: function ( k ) {
314 |
315 | return k * k * k * k;
316 |
317 | },
318 |
319 | Out: function ( k ) {
320 |
321 | return 1 - --k * k * k * k;
322 |
323 | },
324 |
325 | InOut: function ( k ) {
326 |
327 | if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
328 | return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );
329 |
330 | }
331 |
332 | },
333 |
334 | Quintic: {
335 |
336 | In: function ( k ) {
337 |
338 | return k * k * k * k * k;
339 |
340 | },
341 |
342 | Out: function ( k ) {
343 |
344 | return --k * k * k * k * k + 1;
345 |
346 | },
347 |
348 | InOut: function ( k ) {
349 |
350 | if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
351 | return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
352 |
353 | }
354 |
355 | },
356 |
357 | Sinusoidal: {
358 |
359 | In: function ( k ) {
360 |
361 | return 1 - Math.cos( k * Math.PI / 2 );
362 |
363 | },
364 |
365 | Out: function ( k ) {
366 |
367 | return Math.sin( k * Math.PI / 2 );
368 |
369 | },
370 |
371 | InOut: function ( k ) {
372 |
373 | return 0.5 * ( 1 - Math.cos( Math.PI * k ) );
374 |
375 | }
376 |
377 | },
378 |
379 | Exponential: {
380 |
381 | In: function ( k ) {
382 |
383 | return k === 0 ? 0 : Math.pow( 1024, k - 1 );
384 |
385 | },
386 |
387 | Out: function ( k ) {
388 |
389 | return k === 1 ? 1 : 1 - Math.pow( 2, - 10 * k );
390 |
391 | },
392 |
393 | InOut: function ( k ) {
394 |
395 | if ( k === 0 ) return 0;
396 | if ( k === 1 ) return 1;
397 | if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 1024, k - 1 );
398 | return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );
399 |
400 | }
401 |
402 | },
403 |
404 | Circular: {
405 |
406 | In: function ( k ) {
407 |
408 | return 1 - Math.sqrt( 1 - k * k );
409 |
410 | },
411 |
412 | Out: function ( k ) {
413 |
414 | return Math.sqrt( 1 - --k * k );
415 |
416 | },
417 |
418 | InOut: function ( k ) {
419 |
420 | if ( ( k *= 2 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
421 | return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);
422 |
423 | }
424 |
425 | },
426 |
427 | Elastic: {
428 |
429 | In: function ( k ) {
430 |
431 | var s, a = 0.1, p = 0.4;
432 | if ( k === 0 ) return 0;
433 | if ( k === 1 ) return 1;
434 | if ( !a || a < 1 ) { a = 1; s = p / 4; }
435 | else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
436 | return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
437 |
438 | },
439 |
440 | Out: function ( k ) {
441 |
442 | var s, a = 0.1, p = 0.4;
443 | if ( k === 0 ) return 0;
444 | if ( k === 1 ) return 1;
445 | if ( !a || a < 1 ) { a = 1; s = p / 4; }
446 | else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
447 | return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
448 |
449 | },
450 |
451 | InOut: function ( k ) {
452 |
453 | var s, a = 0.1, p = 0.4;
454 | if ( k === 0 ) return 0;
455 | if ( k === 1 ) return 1;
456 | if ( !a || a < 1 ) { a = 1; s = p / 4; }
457 | else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
458 | if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
459 | return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
460 |
461 | }
462 |
463 | },
464 |
465 | Back: {
466 |
467 | In: function ( k ) {
468 |
469 | var s = 1.70158;
470 | return k * k * ( ( s + 1 ) * k - s );
471 |
472 | },
473 |
474 | Out: function ( k ) {
475 |
476 | var s = 1.70158;
477 | return --k * k * ( ( s + 1 ) * k + s ) + 1;
478 |
479 | },
480 |
481 | InOut: function ( k ) {
482 |
483 | var s = 1.70158 * 1.525;
484 | if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
485 | return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
486 |
487 | }
488 |
489 | },
490 |
491 | Bounce: {
492 |
493 | In: function ( k ) {
494 |
495 | return 1 - TWEEN.Easing.Bounce.Out( 1 - k );
496 |
497 | },
498 |
499 | Out: function ( k ) {
500 |
501 | if ( k < ( 1 / 2.75 ) ) {
502 |
503 | return 7.5625 * k * k;
504 |
505 | } else if ( k < ( 2 / 2.75 ) ) {
506 |
507 | return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
508 |
509 | } else if ( k < ( 2.5 / 2.75 ) ) {
510 |
511 | return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
512 |
513 | } else {
514 |
515 | return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
516 |
517 | }
518 |
519 | },
520 |
521 | InOut: function ( k ) {
522 |
523 | if ( k < 0.5 ) return TWEEN.Easing.Bounce.In( k * 2 ) * 0.5;
524 | return TWEEN.Easing.Bounce.Out( k * 2 - 1 ) * 0.5 + 0.5;
525 |
526 | }
527 |
528 | }
529 |
530 | };
531 |
532 | TWEEN.Interpolation = {
533 |
534 | Linear: function ( v, k ) {
535 |
536 | var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.Linear;
537 |
538 | if ( k < 0 ) return fn( v[ 0 ], v[ 1 ], f );
539 | if ( k > 1 ) return fn( v[ m ], v[ m - 1 ], m - f );
540 |
541 | return fn( v[ i ], v[ i + 1 > m ? m : i + 1 ], f - i );
542 |
543 | },
544 |
545 | Bezier: function ( v, k ) {
546 |
547 | var b = 0, n = v.length - 1, pw = Math.pow, bn = TWEEN.Interpolation.Utils.Bernstein, i;
548 |
549 | for ( i = 0; i <= n; i++ ) {
550 | b += pw( 1 - k, n - i ) * pw( k, i ) * v[ i ] * bn( n, i );
551 | }
552 |
553 | return b;
554 |
555 | },
556 |
557 | CatmullRom: function ( v, k ) {
558 |
559 | var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.CatmullRom;
560 |
561 | if ( v[ 0 ] === v[ m ] ) {
562 |
563 | if ( k < 0 ) i = Math.floor( f = m * ( 1 + k ) );
564 |
565 | return fn( v[ ( i - 1 + m ) % m ], v[ i ], v[ ( i + 1 ) % m ], v[ ( i + 2 ) % m ], f - i );
566 |
567 | } else {
568 |
569 | if ( k < 0 ) return v[ 0 ] - ( fn( v[ 0 ], v[ 0 ], v[ 1 ], v[ 1 ], -f ) - v[ 0 ] );
570 | if ( k > 1 ) return v[ m ] - ( fn( v[ m ], v[ m ], v[ m - 1 ], v[ m - 1 ], f - m ) - v[ m ] );
571 |
572 | return fn( v[ i ? i - 1 : 0 ], v[ i ], v[ m < i + 1 ? m : i + 1 ], v[ m < i + 2 ? m : i + 2 ], f - i );
573 |
574 | }
575 |
576 | },
577 |
578 | Utils: {
579 |
580 | Linear: function ( p0, p1, t ) {
581 |
582 | return ( p1 - p0 ) * t + p0;
583 |
584 | },
585 |
586 | Bernstein: function ( n , i ) {
587 |
588 | var fc = TWEEN.Interpolation.Utils.Factorial;
589 | return fc( n ) / fc( i ) / fc( n - i );
590 |
591 | },
592 |
593 | Factorial: ( function () {
594 |
595 | var a = [ 1 ];
596 |
597 | return function ( n ) {
598 |
599 | var s = 1, i;
600 | if ( a[ n ] ) return a[ n ];
601 | for ( i = n; i > 1; i-- ) s *= i;
602 | return a[ n ] = s;
603 |
604 | }
605 |
606 | } )(),
607 |
608 | CatmullRom: function ( p0, p1, p2, p3, t ) {
609 |
610 | var v0 = ( p2 - p0 ) * 0.5, v1 = ( p3 - p1 ) * 0.5, t2 = t * t, t3 = t * t2;
611 | return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1;
612 |
613 | }
614 |
615 | }
616 |
617 | };
618 |
--------------------------------------------------------------------------------
/js/pixel-hubbers.js:
--------------------------------------------------------------------------------
1 | var camera, scene, renderer, light;
2 | var cubes = [];
3 |
4 | var pixels = [
5 | {"x": 3, "y": 0, "type": "body"},
6 | {"x": 12, "y": 0, "type": "body"},
7 | {"x": 3, "y": 1, "type": "body"},
8 | {"x": 4, "y": 1, "type": "body"},
9 | {"x": 11, "y": 1, "type": "body"},
10 | {"x": 12, "y": 1, "type": "body"},
11 | {"x": 3, "y": 2, "type": "body"},
12 | {"x": 4, "y": 2, "type": "body"},
13 | {"x": 5, "y": 2, "type": "body"},
14 | {"x": 6, "y": 2, "type": "body"},
15 | {"x": 7, "y": 2, "type": "body"},
16 | {"x": 8, "y": 2, "type": "body"},
17 | {"x": 9, "y": 2, "type": "body"},
18 | {"x": 10, "y": 2, "type": "body"},
19 | {"x": 11, "y": 2, "type": "body"},
20 | {"x": 12, "y": 2, "type": "body"},
21 | {"x": 2, "y": 3, "type": "body"},
22 | {"x": 3, "y": 3, "type": "body"},
23 | {"x": 4, "y": 3, "type": "body"},
24 | {"x": 5, "y": 3, "type": "body"},
25 | {"x": 6, "y": 3, "type": "body"},
26 | {"x": 7, "y": 3, "type": "body"},
27 | {"x": 8, "y": 3, "type": "body"},
28 | {"x": 9, "y": 3, "type": "body"},
29 | {"x": 10, "y": 3, "type": "body"},
30 | {"x": 11, "y": 3, "type": "body"},
31 | {"x": 12, "y": 3, "type": "body"},
32 | {"x": 13, "y": 3, "type": "body"},
33 | {"x": 2, "y": 4, "type": "body"},
34 | {"x": 3, "y": 4, "type": "body"},
35 | {"x": 4, "y": 4, "type": "body"},
36 | {"x": 5, "y": 4, "type": "body"},
37 | {"x": 6, "y": 4, "type": "body"},
38 | {"x": 7, "y": 4, "type": "body"},
39 | {"x": 8, "y": 4, "type": "body"},
40 | {"x": 9, "y": 4, "type": "body"},
41 | {"x": 10, "y": 4, "type": "body"},
42 | {"x": 11, "y": 4, "type": "body"},
43 | {"x": 12, "y": 4, "type": "body"},
44 | {"x": 13, "y": 4, "type": "body"},
45 | {"x": 2, "y": 5, "type": "body"},
46 | {"x": 3, "y": 5, "type": "body"},
47 | {"x": 4, "y": 5, "type": "body"},
48 | {"x": 5, "y": 5, "type": "face"},
49 | {"x": 6, "y": 5, "type": "face"},
50 | {"x": 7, "y": 5, "type": "face"},
51 | {"x": 8, "y": 5, "type": "face"},
52 | {"x": 9, "y": 5, "type": "face"},
53 | {"x": 10, "y": 5, "type": "face"},
54 | {"x": 11, "y": 5, "type": "body"},
55 | {"x": 12, "y": 5, "type": "body"},
56 | {"x": 13, "y": 5, "type": "body"},
57 | {"x": 2, "y": 6, "type": "body"},
58 | {"x": 3, "y": 6, "type": "body"},
59 | {"x": 4, "y": 6, "type": "face"},
60 | {"x": 5, "y": 6, "type": "feature"},
61 | {"x": 6, "y": 6, "type": "face"},
62 | {"x": 7, "y": 6, "type": "face"},
63 | {"x": 8, "y": 6, "type": "face"},
64 | {"x": 9, "y": 6, "type": "face"},
65 | {"x": 10, "y": 6, "type": "feature"},
66 | {"x": 11, "y": 6, "type": "face"},
67 | {"x": 12, "y": 6, "type": "body"},
68 | {"x": 13, "y": 6, "type": "body"},
69 | {"x": 2, "y": 7, "type": "body"},
70 | {"x": 3, "y": 7, "type": "body"},
71 | {"x": 4, "y": 7, "type": "face"},
72 | {"x": 5, "y": 7, "type": "feature"},
73 | {"x": 6, "y": 7, "type": "face"},
74 | {"x": 7, "y": 7, "type": "face"},
75 | {"x": 8, "y": 7, "type": "face"},
76 | {"x": 9, "y": 7, "type": "face"},
77 | {"x": 10, "y": 7, "type": "feature"},
78 | {"x": 11, "y": 7, "type": "face"},
79 | {"x": 12, "y": 7, "type": "body"},
80 | {"x": 13, "y": 7, "type": "body"},
81 | {"x": 3, "y": 8, "type": "body"},
82 | {"x": 4, "y": 8, "type": "body"},
83 | {"x": 5, "y": 8, "type": "face"},
84 | {"x": 6, "y": 8, "type": "face"},
85 | {"x": 7, "y": 8, "type": "feature"},
86 | {"x": 8, "y": 8, "type": "feature"},
87 | {"x": 9, "y": 8, "type": "face"},
88 | {"x": 10, "y": 8, "type": "face"},
89 | {"x": 11, "y": 8, "type": "body"},
90 | {"x": 12, "y": 8, "type": "body"},
91 | {"x": 4, "y": 9, "type": "body"},
92 | {"x": 5, "y": 9, "type": "body"},
93 | {"x": 6, "y": 9, "type": "body"},
94 | {"x": 7, "y": 9, "type": "body"},
95 | {"x": 8, "y": 9, "type": "body"},
96 | {"x": 9, "y": 9, "type": "body"},
97 | {"x": 10, "y": 9, "type": "body"},
98 | {"x": 11, "y": 9, "type": "body"},
99 | {"x": 0, "y": 10, "type": "body"},
100 | {"x": 1, "y": 10, "type": "body"},
101 | {"x": 6, "y": 10, "type": "body"},
102 | {"x": 7, "y": 10, "type": "body"},
103 | {"x": 8, "y": 10, "type": "body"},
104 | {"x": 9, "y": 10, "type": "body"},
105 | {"x": 0, "y": 11, "type": "water"},
106 | {"x": 2, "y": 11, "type": "body"},
107 | {"x": 3, "y": 11, "type": "body"},
108 | {"x": 5, "y": 11, "type": "body"},
109 | {"x": 6, "y": 11, "type": "body"},
110 | {"x": 7, "y": 11, "type": "body"},
111 | {"x": 8, "y": 11, "type": "body"},
112 | {"x": 9, "y": 11, "type": "body"},
113 | {"x": 10, "y": 11, "type": "body"},
114 | {"x": 3, "y": 12, "type": "body"},
115 | {"x": 4, "y": 12, "type": "body"},
116 | {"x": 5, "y": 12, "type": "body"},
117 | {"x": 6, "y": 12, "type": "body"},
118 | {"x": 7, "y": 12, "type": "body"},
119 | {"x": 8, "y": 12, "type": "body"},
120 | {"x": 9, "y": 12, "type": "body"},
121 | {"x": 10, "y": 12, "type": "body"},
122 | {"x": 5, "y": 13, "type": "body"},
123 | {"x": 6, "y": 13, "type": "body"},
124 | {"x": 7, "y": 13, "type": "body"},
125 | {"x": 8, "y": 13, "type": "body"},
126 | {"x": 9, "y": 13, "type": "body"},
127 | {"x": 10, "y": 13, "type": "body"},
128 | {"x": 5, "y": 14, "type": "body"},
129 | {"x": 7, "y": 14, "type": "body"},
130 | {"x": 8, "y": 14, "type": "body"},
131 | {"x": 10, "y": 14, "type": "body"},
132 | {"x": 4, "y": 15, "type": "water"},
133 | {"x": 5, "y": 15, "type": "body"},
134 | {"x": 6, "y": 15, "type": "water"},
135 | {"x": 7, "y": 15, "type": "body"},
136 | {"x": 8, "y": 15, "type": "body"},
137 | {"x": 9, "y": 15, "type": "water"},
138 | {"x": 10, "y": 15, "type": "body"},
139 | {"x": 11, "y": 15, "type": "water"},
140 | {"x": 3, "y": 16, "type": "water"},
141 | {"x": 4, "y": 16, "type": "body"},
142 | {"x": 5, "y": 16, "type": "water"},
143 | {"x": 6, "y": 16, "type": "body"},
144 | {"x": 7, "y": 16, "type": "water"},
145 | {"x": 8, "y": 16, "type": "water"},
146 | {"x": 9, "y": 16, "type": "body"},
147 | {"x": 10, "y": 16, "type": "water"},
148 | {"x": 11, "y": 16, "type": "body"},
149 | {"x": 12, "y": 16, "type": "water"},
150 | {"x": 3, "y": 17, "type": "water"},
151 | {"x": 4, "y": 17, "type": "reflection"},
152 | {"x": 5, "y": 17, "type": "water"},
153 | {"x": 6, "y": 17, "type": "reflection"},
154 | {"x": 7, "y": 17, "type": "water"},
155 | {"x": 8, "y": 17, "type": "water"},
156 | {"x": 9, "y": 17, "type": "reflection"},
157 | {"x": 10, "y": 17, "type": "water"},
158 | {"x": 11, "y": 17, "type": "reflection"},
159 | {"x": 12, "y": 17, "type": "water"},
160 | {"x": 4, "y": 18, "type": "water"},
161 | {"x": 5, "y": 18, "type": "reflection"},
162 | {"x": 6, "y": 18, "type": "water"},
163 | {"x": 7, "y": 18, "type": "reflection"},
164 | {"x": 8, "y": 18, "type": "reflection"},
165 | {"x": 9, "y": 18, "type": "water"},
166 | {"x": 10, "y": 18, "type": "reflection"},
167 | {"x": 11, "y": 18, "type": "water"}
168 | ];
169 |
170 | var gravatars = [
171 | "25c7c18223fb42a4c6ae1c8db6f50f9b",
172 | "b8dbb1987e8e5318584865f880036796",
173 | "947c333c75de1dc54a711a400d575c8c",
174 | "9375a9529679f1b42b567a640d775e7d",
175 | "472814aac7576b67da59ea79fcbf7d66",
176 | "17fc534665d54bcd8b4d2676d709aa99",
177 | "5f2da528927a2ec9ba4fec2069cbc958",
178 | "abfc88b96ae18c85ba7aac3bded2ec5e",
179 | "6f63cde8b16b035280ca615f621a6c8c",
180 | "821395fe70906c8290df7f18ac4ac6cf",
181 | "a86224d72ce21cd9f5bee6784d4b06c7",
182 | "920e60e81da4fb61eaeb95fa9d7c3b70",
183 | "c9f60c0cb1d941fa8e93bbfcb907c27e",
184 | "88124ba9e758ec0cbd4f902f30e96fae",
185 | "7f67284c12b6d38fa1c8590911fd58a0",
186 | "63027897db609fdbe6ac820fa12736b9",
187 | "a79ff2bb7da84e275361857d2feb2b1b",
188 | "ac65e62b7ad42e9bc5fdf391d0e250a7",
189 | "2f4861b27dc35663ed271d39f5358261",
190 | "8cf17bf55c4d16cf52480619bb0b6c92",
191 | "d47656e20ff5e42f125fc5ea0fd636c6",
192 | "62e8c8bfaa8d755cab82accb48d335c8",
193 | "4f237ee952d1af0c47028bfda53664a8",
194 | "4e3f068bcac207404306e790c0d662ed",
195 | "881bd08b6b94e600475ce431e8e6ea35",
196 | "2bb2258c02ee8f25f1a41a6223f9ac1f",
197 | "bbe5dc8dcf248706525ab76f46185520",
198 | "aeb22e809b34e9c8a5623ba6c4738a63",
199 | "e650a773fc40f042e46d1e36b326e4e1",
200 | "4d1c9dad17af98e55cb65b4efce27c42",
201 | "eb6845de9b94082d7d90a0603d91ff42",
202 | "060dc0e5e351d467dec8bb4936bde683",
203 | "b6861bc75bff3c594212338a914a39ad",
204 | "e32fc8d646083d242229ef8fc9168c27",
205 | "cba1c933e48e5ec70c68f640a530b969",
206 | "9112400090829f79d97ed9b12056fa4f",
207 | "94824342b63483d17d34a489b5a0024a",
208 | "f317439da90c3176adc8938bcf5181ff",
209 | "97c3a8eea9b7eaa9e1e93ea3cd47399f",
210 | "70016e777889adad7e6ec51a520ac686",
211 | "8058c2c00149cbe4104ddc9fa814443f",
212 | "1c6aa6a048aab91f4e55962881fa779a",
213 | "1aa8160db37ef2d2343364b2c4eaa1cf",
214 | "ae14cc4491ac334f9cd23f9f93b4305e",
215 | "3783e88128f2773aa70a8f925d5f795d",
216 | "0a5a5f09f2c85cc425f7b8db4c5e61c1",
217 | "20bfe76b3d6105641f879fe45cfc9272",
218 | "80d567036e02b0b07797253f85e0fcc2",
219 | "4a182249dc31bc436c7f6fe599402ca5",
220 | "cdf546b601bf29a7eb4ca777544d11cd",
221 | "bd964c4c26b160867008b423ae92b3e7",
222 | "1cae9d75fdc2f167e04ad306514c0934",
223 | "c2e40adce99a3780789b370a2bfa02f6",
224 | "66e82696b38beea60f0e0afe40b0c870",
225 | "64b4ab1f5516ae404994313bab64ab87",
226 | "f5a0f0acef57d61304ed7c5da7cd5007",
227 | "d0bd5ccf2859245b4daf49739a2ceab3",
228 | "7f6e060e50812eb45e8916072f3f0872",
229 | "0e09704055a8efab46601502eebe0d37",
230 | "8209444173472be8823f570f77ed8b8b",
231 | "05281371ba613c3963420a2294131bcb",
232 | "33682dbe3b7d8d63a4d7c65af2bc9a94",
233 | "6753ce3284e5153f7e24e2d781354e5e",
234 | "fb127cf31f47e895f6fc0c8e84e5821b",
235 | "6af460b183446976ae7d1d06022f10ad",
236 | "7f81fd5c7792dabca22c433abbfbf0cb",
237 | "d6459b62e0342d9052fff78ce32fceea",
238 | "df5e7adb20adae6c120b04e7cafb15a0",
239 | "0c39b828636367fc6e22b7be8c803c74",
240 | "0d410939c9e80980cf0430772567dfb4",
241 | "da871a1ac933724a6678bd89949b19c7",
242 | "4d5b5dd4e263d780a5dfe7ac8b8ac98c",
243 | "6ac41c39b6087f6e059f31903ffc003e",
244 | "3be29bee1806b097fc68621eb45f2e37",
245 | "cbc666087db2f339192b13a0e14327d3",
246 | "7e19cd5486b5d6dc1ef90e671ba52ae0",
247 | "82787f3fcc9e392fa214f5ac4ea4a3d8",
248 | "993c45489aac7a71f27112ba2ab4f74c",
249 | "9eabab0dc683ac153d5b5a44df59424d",
250 | "87ec3fc103b3c58a25de92fd65519387",
251 | "ee5bae7fa46b3195869c285ecbb4619e",
252 | "7ce90d712fab09421b7f2cf955b9a4c8",
253 | "8057ea424bd9adc90a3a14c3b8a49e7c",
254 | "4698d387cdde58a95c8dc7f8d198cb48",
255 | "4acc63ae1aa498456019c1887c018adb",
256 | "a31ea6a86d8ac934807ac59b6d47f631",
257 | "a0fde053889106001f4d0a0886b68a3a",
258 | "f5f02434742f6ed71e70f5d663164d68",
259 | "803993dc11765d89aee137f29aa05d3a",
260 | "1a25cc6d27889cbacea4304090c0393e",
261 | "a44d5abad6e86cff4e34d9f0839535c9",
262 | "b1b1d33e0655e841d4fd8467359c58d0",
263 | "142b65f8017f52852471e8828fe245d4",
264 | "3d15ecbcdfdee239682d03745ba774c5",
265 | "b8845ca2bbcec95c5b75b6fc6fae888b",
266 | "088f6feed2e81974292d52d9e8a78bda",
267 | "6acbc27c14ce19bf80cdee68f690ebed",
268 | "1f1a3879e40c9418252a5aec3aed31b2",
269 | "cac992bb300ed4f3ed5c2a6049e552f9",
270 | "2eed5e5190a11b8d09ba8d8e5d8d85d4",
271 | "acd4b5803e806bf0ed70299f15cd6d18",
272 | "e90b9d197aba32907c5fffcbff76c511",
273 | "c831c273b825c5a8d819da38e1bcb047",
274 | "ddf2d42eac63eb87e1542fc218dbfc86",
275 | "41e3a9fab9e827d582caf8b2464140d5",
276 | "75ce4d061e0ce19b8822ba0989c05153",
277 | "efc09baeb94ed440b185710062c8956d",
278 | "269f43c0d8844d51ec4d30eb44c8f1f6",
279 | "c1a119fe2178489fc477c22341f82ea0",
280 | "a2c5ba13b63528adb1c33da777b94059",
281 | "fcb052cb03de0357fc30978d9434bcb4",
282 | "d0ca2bf32bda9e9ea8c4473ffc3aaa0d",
283 | "ef61ab3fe775e6680aac9aed797109d0",
284 | "3c57b3ae4d8aae5b0b91a8cdad57d7cd",
285 | "408ba7659b4dd2a06b84395bb131514f",
286 | "e7c5b25cc6a66344d4bdae461a9129ec",
287 | "c15e7a20088305ac8506450c7bfe1a68",
288 | "0bf208eebdab7c5d16152f70a1ee837f",
289 | "2943f34247ca25eccc991601db613c49",
290 | "4c36f7481ec8ed0dc5f286c10eb71a9e",
291 | "d4be9b0fd15ec79f4448ae4efe024086",
292 | "41584ebec5f7cce92b9d3c457c1d597e",
293 | "220ff3473d2618ba6e1e44231b0cb23d",
294 | "9c6983ca04de773395d9ba10fc8764c6",
295 | "4897e757fa3fb2ac92f5526f84b4da1e",
296 | "bc4ab438f7a4ce1c406aadc688427f2c",
297 | "574c4f5686429ae6f4d99bf5780a2f9b",
298 | "b8dfc1ccaac89ecc4cff77f83998789c",
299 | "2fd431f6446b992e9e16d01a876feb14",
300 | "c6858f4b8ec263c8c3c58759494e926a",
301 | "8caa0afdae1a934c30a1998472c63134",
302 | "8069ee33e582a295a2910f14afcb0360",
303 | "ed461b57d889532a73520fef5c53651f",
304 | "43d562dc983b5383de922d6078477e78",
305 | "04281fcaba85633878f9a451a2e7c4f7",
306 | "ce3033c7dc1f173892cf2eec0d8e0795",
307 | "6af915d3c6aa4ad30bbad43d8035fe10",
308 | "8fda72730ed1dc7b35d166c41514e806",
309 | "2c80e1b0837eec76d38d4f7fa1c15e87",
310 | "6bfdb8a95751d6380ee01472d680f036",
311 | "da6055905b93eb438e6c4827e9dd5279",
312 | "befd819b3fced8c6bd3dba7e633dd068",
313 | "76f4202a12832ed4c47be7d7ca984e01"
314 | ]
315 |
316 | var COLORS = {
317 | "body": 0x000000,
318 | "face": 0xffc09f,
319 | "feature": 0xae433b,
320 | "water": 0x62e3ff,
321 | "reflection": 0x45b0ff
322 | };
323 |
324 | function Cube(pixel, gravatarID) {
325 | this.mesh = null;
326 | this.pixelcatX = pixel.x;
327 | this.pixelcatY = pixel.y;
328 | this.type = pixel.type;
329 | this.gravatarID = gravatarID;
330 | }
331 |
332 | Cube.prototype = {
333 |
334 | createMesh : function() {
335 | var geometry = new THREE.CubeGeometry(100, 100, 100);
336 | var material = new THREE.MeshPhongMaterial({
337 | ambient : 0x444444,
338 | color : COLORS[this.type],
339 | shininess : 100,
340 | specular : 0xaaaaaa,
341 | shading : THREE.SmoothShading,
342 | });
343 | var avatar = this.gravatarID ?
344 | new THREE.MeshLambertMaterial(
345 | {map: THREE.ImageUtils.loadTexture('https://secure.gravatar.com/avatar/'+this.gravatarID + '?s=200')}) :
346 | new THREE.MeshLambertMaterial({color: 0x000000});
347 | geometry.materials = [avatar, material];
348 | geometry.faces[0].materialIndex = 1;
349 | geometry.faces[1].materialIndex = 1;
350 | geometry.faces[2].materialIndex = 1;
351 | geometry.faces[3].materialIndex = 1;
352 | geometry.faces[4].materialIndex = 0;
353 | geometry.faces[5].materialIndex = 1;
354 |
355 | this.mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
356 | this.mesh.position.x = this.pixelcatX * 100;
357 | this.mesh.position.y = -this.pixelcatY * 100;
358 | this.mesh.position.z = 2000;
359 |
360 | scene.add(this.mesh);
361 | },
362 |
363 | flyIn : function() {
364 | var tween = new TWEEN.Tween(this.mesh.position);
365 | tween.to({z : 0}, 2000);
366 | tween.easing(TWEEN.Easing.Sinusoidal.Out);
367 | tween.delay(_.random(0, 4000));
368 | // tween.onUpdate(function() {
369 | // camera.position.z += 0.09;
370 | // });
371 | tween.start();
372 | },
373 |
374 | pushOut : function() {
375 | if ((this.pixelcatX % 2 === 0 && this.pixelcatY % 2 === 0) ||
376 | (this.pixelcatX % 2 !== 0 && this.pixelcatY % 2 !== 0)) {
377 | var tween = new TWEEN.Tween(this.mesh.position);
378 | tween.to({z : 200}, 100);
379 | tween.start();
380 | }
381 | },
382 |
383 | flip : function() {
384 | var tween = new TWEEN.Tween(this.mesh.rotation);
385 | if ((this.pixelcatX % 2 === 0 && this.pixelcatY % 2 === 0) ||
386 | (this.pixelcatX % 2 !== 0 && this.pixelcatY % 2 !== 0)) {
387 | tween.to({y : 180 * Math.PI / 180}, 300);
388 | }
389 | else {
390 | tween.to({y : -180 * Math.PI / 180}, 300);
391 | }
392 | tween.start();
393 | },
394 |
395 | pushIn : function() {
396 | var tween = new TWEEN.Tween(this.mesh.position);
397 | tween.to({z : 0}, 100);
398 | tween.start();
399 | }
400 | }
401 |
402 | init();
403 | animate();
404 |
405 | function init() {
406 | scene = new THREE.Scene();
407 | initLights();
408 |
409 | camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
410 | camera.position.x = 770;
411 | camera.position.y = -900;
412 | camera.position.z = 1500;
413 | // camera.position.z = 200;
414 |
415 | createGroundPlane();
416 | createCubes();
417 | animateCubes();
418 |
419 | renderer = new THREE.WebGLRenderer();
420 | renderer.setSize(window.innerWidth, window.innerHeight);
421 | renderer.shadowMapEnabled = true;
422 | renderer.shadowMapSoft = true;
423 |
424 | document.body.appendChild(renderer.domElement);
425 | window.addEventListener( 'resize', onWindowResize, false );
426 | }
427 |
428 | function initLights() {
429 | var light = new THREE.DirectionalLight(0xd1e6f5, 0.5);
430 | light.position.set(300, -500, 2000);
431 | scene.add( light );
432 |
433 | var light = new THREE.SpotLight(0xd1e6f5, 0.6);
434 | light.position.set(500, 100, 1000);
435 | light.target.position.set(300, -200, 100 );
436 | light.shadowCameraNear = 0.01;
437 | light.castShadow = true;
438 | light.shadowDarkness = 0.5;
439 | // light.shadowCameraVisible = true;
440 | scene.add(light);
441 |
442 | var light = new THREE.SpotLight(0xd1e6f5, 1);
443 | light.position.set(1300, -2000, 1000);
444 | light.target.position.set(600, -600, 100 );
445 | light.shadowCameraNear = 0.01;
446 | light.castShadow = true;
447 | light.shadowDarkness = 0.5;
448 | // light.shadowCameraVisible = true;
449 | scene.add(light);
450 | }
451 |
452 | function createGroundPlane() {
453 | // ground
454 | var geometry = new THREE.CubeGeometry(40000, 1, 4000);
455 | var material = new THREE.MeshPhongMaterial({
456 | ambient : 0x444444,
457 | color : 0x286693,
458 | shininess : 100,
459 | specular : 0x00000,
460 | shading : THREE.SmoothShading,
461 | });
462 | var mesh = new THREE.Mesh(geometry, material);
463 | mesh.position.x = 0;
464 | mesh.position.y = -2000;
465 | // scene.add(mesh);
466 |
467 | // back wall
468 | var geometry = new THREE.CubeGeometry(40000, 40000, 1);
469 | var material = new THREE.MeshPhongMaterial({
470 | ambient : 0x444444,
471 | color : 0x3b96d9,
472 | shininess : 100,
473 | specular : 0x00000,
474 | shading : THREE.SmoothShading,
475 | });
476 | var mesh = new THREE.Mesh(geometry, material);
477 | mesh.position.z = -500;
478 | scene.add(mesh);
479 | }
480 |
481 | function createCubes() {
482 | gravatars = _.shuffle(gravatars);
483 | _.each(pixels, function(pixel, index) {
484 | var cube = new Cube(pixel, gravatars[index]);
485 | cube.createMesh();
486 | cubes.push(cube);
487 | });
488 | }
489 |
490 | function animateCubes() {
491 | _.each(cubes, function(cube, index) {
492 | _.bindAll(cube, 'flyIn', 'pushOut', 'flip', 'pushIn');
493 | _.delay(cube.flyIn, 1000);
494 | _.delay(cube.pushOut, 8000);
495 | _.delay(cube.flip, 8500);
496 | _.delay(cube.pushIn, 9000);
497 | });
498 | }
499 |
500 | function onWindowResize() {
501 | camera.aspect = window.innerWidth / window.innerHeight;
502 | camera.updateProjectionMatrix();
503 | renderer.setSize( window.innerWidth, window.innerHeight );
504 | }
505 |
506 | function animate() {
507 | renderer.render(scene, camera);
508 | requestAnimationFrame(animate);
509 |
510 | TWEEN.update();
511 | }
--------------------------------------------------------------------------------