--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/static/res/js/Ease.js Mon Oct 22 12:03:53 2012 +0200
@@ -0,0 +1,394 @@
+/*
+* Ease
+* Visit http://createjs.com/ for documentation, updates and examples.
+*
+* Copyright (c) 2010 gskinner.com, inc.
+*
+* Permission is hereby granted, free of charge, to any person
+* obtaining a copy of this software and associated documentation
+* files (the "Software"), to deal in the Software without
+* restriction, including without limitation the rights to use,
+* copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the
+* Software is furnished to do so, subject to the following
+* conditions:
+*
+* The above copyright notice and this permission notice shall be
+* included in all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+* OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+// namespace:
+this.createjs = this.createjs||{};
+
+(function() {
+
+// constructor:
+/**
+ * The Ease class provides a collection of easing functions for use with TweenJS.
+ * It does not use the standard 4 param easing signature. Instead it uses a single param
+ * which indicates the current linear ratio (0 to 1) of the tween.<br/>
+ * <br/>
+ * Most methods on Ease can be passed directly as easing functions:<br/>
+ * Tween.get(target).to({x:100}, 500, Ease.linear);<br/>
+ * <br/>
+ * However, methods beginning with "get" will return an easing function based on parameter values:<br/>
+ * Tween.get(target).to({y:200}, 500, Ease.getPowIn(2.2));<br/>
+ * <br/>
+ * Equations derived from work by Robert Penner.
+ * @class Ease
+ * @static
+ **/
+var Ease = function() {
+ throw "Ease cannot be instantiated.";
+}
+
+// public static methods:
+ /**
+ * @method linear
+ * @static
+ **/
+ Ease.linear = function(t) { return t; }
+
+ /**
+ * Identical to linear.
+ * @method none
+ * @static
+ **/
+ Ease.none = Ease.linear;
+
+ /**
+ * Mimics the simple -100 to 100 easing in Flash Pro.
+ * @method get
+ * @param amount A value from -1 (ease in) to 1 (ease out) indicating the strength and direction of the ease.
+ * @static
+ **/
+ Ease.get = function(amount) {
+ if (amount < -1) { amount = -1; }
+ if (amount > 1) { amount = 1; }
+ return function(t) {
+ if (amount==0) { return t; }
+ if (amount<0) { return t*(t*-amount+1+amount); }
+ return t*((2-t)*amount+(1-amount));
+ }
+ }
+
+ /**
+ * Configurable exponential ease.
+ * @method getPowIn
+ * @param pow The exponent to use (ex. 3 would return a cubic ease).
+ * @static
+ **/
+ Ease.getPowIn = function(pow) {
+ return function(t) {
+ return Math.pow(t,pow);
+ }
+ }
+
+
+ /**
+ * Configurable exponential ease.
+ * @method getPowOut
+ * @param pow The exponent to use (ex. 3 would return a cubic ease).
+ * @static
+ **/
+ Ease.getPowOut = function(pow) {
+ return function(t) {
+ return 1-Math.pow(1-t,pow);
+ }
+ }
+
+
+ /**
+ * Configurable exponential ease.
+ * @method getPowInOut
+ * @param pow The exponent to use (ex. 3 would return a cubic ease).
+ * @static
+ **/
+ Ease.getPowInOut = function(pow) {
+ return function(t) {
+ if ((t*=2)<1) return 0.5*Math.pow(t,pow);
+ return 1-0.5*Math.abs(Math.pow(2-t,pow));
+ }
+ }
+
+
+ /**
+ * @method quadIn
+ * @static
+ **/
+ Ease.quadIn = Ease.getPowIn(2);
+ /**
+ * @method quadOut
+ * @static
+ **/
+ Ease.quadOut = Ease.getPowOut(2);
+ /**
+ * @method quadInOut
+ * @static
+ **/
+ Ease.quadInOut = Ease.getPowInOut(2);
+
+
+ /**
+ * @method cubicIn
+ * @static
+ **/
+ Ease.cubicIn = Ease.getPowIn(3);
+ /**
+ * @method cubicOut
+ * @static
+ **/
+ Ease.cubicOut = Ease.getPowOut(3);
+ /**
+ * @method cubicInOut
+ * @static
+ **/
+ Ease.cubicInOut = Ease.getPowInOut(3);
+
+
+ /**
+ * @method quartIn
+ * @static
+ **/
+ Ease.quartIn = Ease.getPowIn(4);
+ /**
+ * @method quartOut
+ * @static
+ **/
+ Ease.quartOut = Ease.getPowOut(4);
+ /**
+ * @method quartInOut
+ * @static
+ **/
+ Ease.quartInOut = Ease.getPowInOut(4);
+
+
+ /**
+ * @method quintIn
+ * @static
+ **/
+ Ease.quintIn = Ease.getPowIn(5);
+ /**
+ * @method quintOut
+ * @static
+ **/
+ Ease.quintOut = Ease.getPowOut(5);
+ /**
+ * @method quintInOut
+ * @static
+ **/
+ Ease.quintInOut = Ease.getPowInOut(5);
+
+
+ /**
+ * @method sineIn
+ * @static
+ **/
+ Ease.sineIn = function(t) {
+ return 1-Math.cos(t*Math.PI/2);
+ }
+
+ /**
+ * @method sineOut
+ * @static
+ **/
+ Ease.sineOut = function(t) {
+ return Math.sin(t*Math.PI/2);
+ }
+
+ /**
+ * @method sineInOut
+ * @static
+ **/
+ Ease.sineInOut = function(t) {
+ return -0.5*(Math.cos(Math.PI*t) - 1)
+ }
+
+
+ /**
+ * Configurable "back in" ease.
+ * @method getBackIn
+ * @param amount The strength of the ease.
+ * @static
+ **/
+ Ease.getBackIn = function(amount) {
+ return function(t) {
+ return t*t*((amount+1)*t-amount);
+ }
+ }
+ /**
+ * @method backIn
+ * @static
+ **/
+ Ease.backIn = Ease.getBackIn(1.7);
+
+ /**
+ * Configurable "back out" ease.
+ * @method getBackOut
+ * @param amount The strength of the ease.
+ * @static
+ **/
+ Ease.getBackOut = function(amount) {
+ return function(t) {
+ return (--t*t*((amount+1)*t + amount) + 1);
+ }
+ }
+ /**
+ * @method backOut
+ * @static
+ **/
+ Ease.backOut = Ease.getBackOut(1.7);
+
+ /**
+ * Configurable "back in out" ease.
+ * @method getBackInOut
+ * @param amount The strength of the ease.
+ * @static
+ **/
+ Ease.getBackInOut = function(amount) {
+ amount*=1.525;
+ return function(t) {
+ if ((t*=2)<1) return 0.5*(t*t*((amount+1)*t-amount));
+ return 0.5*((t-=2)*t*((amount+1)*t+amount)+2);
+ }
+ }
+ /**
+ * @method backInOut
+ * @static
+ **/
+ Ease.backInOut = Ease.getBackInOut(1.7);
+
+
+ /**
+ * @method circIn
+ * @static
+ **/
+ Ease.circIn = function(t) {
+ return -(Math.sqrt(1-t*t)- 1);
+ }
+
+ /**
+ * @method circOut
+ * @static
+ **/
+ Ease.circOut = function(t) {
+ return Math.sqrt(1-(--t)*t);
+ }
+
+ /**
+ * @method circInOut
+ * @static
+ **/
+ Ease.circInOut = function(t) {
+ if ((t*=2) < 1) return -0.5*(Math.sqrt(1-t*t)-1);
+ return 0.5*(Math.sqrt(1-(t-=2)*t)+1);
+ }
+
+ /**
+ * @method bounceIn
+ * @static
+ **/
+ Ease.bounceIn = function(t) {
+ return 1-Ease.bounceOut(1-t);
+ }
+
+ /**
+ * @method bounceOut
+ * @static
+ **/
+ Ease.bounceOut = function(t) {
+ if (t < 1/2.75) {
+ return (7.5625*t*t);
+ } else if (t < 2/2.75) {
+ return (7.5625*(t-=1.5/2.75)*t+0.75);
+ } else if (t < 2.5/2.75) {
+ return (7.5625*(t-=2.25/2.75)*t+0.9375);
+ } else {
+ return (7.5625*(t-=2.625/2.75)*t +0.984375);
+ }
+ }
+
+ /**
+ * @method bounceInOut
+ * @static
+ **/
+ Ease.bounceInOut = function(t) {
+ if (t<0.5) return Ease.bounceIn (t*2) * .5;
+ return Ease.bounceOut(t*2-1)*0.5+0.5;
+ }
+
+
+ /**
+ * Configurable elastic ease.
+ * @method getElasticIn
+ * @param amplitude
+ * @param period
+ * @static
+ **/
+ Ease.getElasticIn = function(amplitude,period) {
+ var pi2 = Math.PI*2;
+ return function(t) {
+ if (t==0 || t==1) return t;
+ var s = period/pi2*Math.asin(1/amplitude);
+ return -(amplitude*Math.pow(2,10*(t-=1))*Math.sin((t-s)*pi2/period));
+ }
+ }
+ /**
+ * @method elasticIn
+ * @static
+ **/
+ Ease.elasticIn = Ease.getElasticIn(1,0.3);
+
+ /**
+ * Configurable elastic ease.
+ * @method getElasticOut
+ * @param amplitude
+ * @param period
+ * @static
+ **/
+ Ease.getElasticOut = function(amplitude,period) {
+ var pi2 = Math.PI*2;
+ return function(t) {
+ if (t==0 || t==1) return t;
+ var s = period/pi2 * Math.asin(1/amplitude);
+ return (amplitude*Math.pow(2,-10*t)*Math.sin((t-s)*pi2/period )+1);
+ }
+ }
+ /**
+ * @method elasticOut
+ * @static
+ **/
+ Ease.elasticOut = Ease.getElasticOut(1,0.3);
+
+ /**
+ * Configurable elastic ease.
+ * @method getElasticInOut
+ * @param amplitude
+ * @param period
+ * @static
+ **/
+ Ease.getElasticInOut = function(amplitude,period) {
+ var pi2 = Math.PI*2;
+ return function(t) {
+ var s = period/pi2 * Math.asin(1/amplitude);
+ if ((t*=2)<1) return -0.5*(amplitude*Math.pow(2,10*(t-=1))*Math.sin( (t-s)*pi2/period ));
+ return amplitude*Math.pow(2,-10*(t-=1))*Math.sin((t-s)*pi2/period)*0.5+1;
+ }
+ }
+ /**
+ * @method elasticInOut
+ * @static
+ **/
+ Ease.elasticInOut = Ease.getElasticInOut(1,0.3*1.5);
+
+createjs.Ease = Ease;
+}());
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/static/res/js/incmosaic.js Mon Oct 22 12:03:53 2012 +0200
@@ -0,0 +1,361 @@
+function IncMosaic()
+{
+ // --------------------------------------------------------------------------------------------------------------------
+ // Members
+ // --------------------------------------------------------------------------------------------------------------------
+
+ // Canvas
+ this.canvas;
+ this.context;
+
+ /// Images
+ this.pairUrl = [];
+ this.pairImages = [];
+ this.imagesLoaded = 0;
+
+ // Effect
+ this.countX;
+ this.countY;
+ this.squareX;
+ this.squareY;
+ this.effects = [];
+ this.squareEffects = [];
+
+ this.noEffectinfo = new IncEffectInfo();
+ this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
+ this.noEffectinfo.alpha = 1;
+
+ // --------------------------------------------------------------------------------------------------------------------
+ // Functions
+ // --------------------------------------------------------------------------------------------------------------------
+
+ this.addPairImages = function(url1, url2)
+ {
+ var urls = new IncPairUrl(url1, url2);
+ this.pairUrl.push(urls);
+ };
+
+ this.start = function(canvasId, countX, countY)
+ {
+ // Init the canvas objects
+ this.init(canvasId);
+
+ // Register effects
+ this.registerEffects();
+
+ // Count, square`
+ this.countX = countX;
+ this.countY = (countY === undefined) ? countX: countY;
+ this.squareX = Math.floor(this.canvas.width / this.countX);
+ this.squareY = Math.floor(this.canvas.height / this.countY);
+
+ // Set a random pair images
+ this.setRandomPairImages();
+
+ // Set random effect on the squares
+ this.setRandomSquareEffect();
+
+ // Main loop
+ this.loopCallback();
+ };
+
+ this.init = function(canvasId)
+ {
+ // Init canvas objects
+ this.canvas = document.getElementById(canvasId);
+ this.ctx = this.canvas.getContext('2d');
+ this.ctx.fillStyle = "#000000";
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+ };
+
+ this.registerEffects = function()
+ {
+ // No effect
+ //-----------------------------------
+ var noEffect = new IncSquareEffect_NoEffet()
+ var fullEffect0 = new IncFullEffect(0, 0, noEffect);
+ this.effects.push(fullEffect0);
+
+ // Alpha
+ //-----------------------------------
+ {
+ var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000);
+ var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);
+ var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);
+ var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);
+ var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);
+ this.effects.push(fullEffect1);
+ }
+
+ // Alpha 2
+ //-----------------------------------
+ {
+ var effectParam1 = new IncEffectParams(new IncColor(32, 32, 32, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000);
+ var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);
+ var effectParam2 = new IncEffectParams(new IncColor(32, 32, 32, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);
+ var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);
+ var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);
+ this.effects.push(fullEffect1);
+ }
+ }
+
+ this.setRandomPairImages = function()
+ {
+ this.imagesLoaded = 0;
+ var randInd = this.randomInt(0, this.pairUrl.length);
+ var pairUrl = this.pairUrl[randInd];
+ this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl1));
+ this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2));
+ };
+
+ this.setRandomSquareEffect = function()
+ {
+ for (var i = 0; i < this.countX; ++i) {
+ for (var j = 0; j < this.countY; ++j) {
+ var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();
+ fullEffect.x = i;
+ fullEffect.y = j;
+ this.squareEffects.push(fullEffect);
+ }
+ }
+ };
+
+ this.loopCallback = function()
+ {
+ var self = incMosaic;
+
+ if (self.imagesLoaded != 2) {
+ // Images are not loaded yet
+ requestAnimationFrame(self.loopCallback);
+ return;
+ }
+
+ // Clear canvas
+ self.ctx.fillStyle = "#ffffff";
+ self.ctx.fillStyle = "#000000";
+ self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
+
+ // Get time
+ var time = new Date().getTime();
+
+ // Update effect
+ for (var i = 0; i < self.squareEffects.length; ++i) {
+ var fullEffect = self.squareEffects[i];
+
+ for (var j = 0; j < 2; ++j) {
+ var effect = fullEffect.effects[j];
+ if (effect !== undefined) {
+ // Draw square
+ self.drawSquare(fullEffect, self.pairImages[j], effect, time);
+ }
+ }
+ }
+
+ // Loop
+ requestAnimationFrame(self.loopCallback);
+ };
+
+
+ this.drawSquare = function(fullEffect, image, effect, time)
+ {
+ // Update effect
+ var effectInfo = effect.update(fullEffect, time);
+
+ if (effectInfo === null) {
+ return;
+ }
+
+ // Compute square position
+ var posX = fullEffect.x * this.squareX;
+ var posY = fullEffect.y * this.squareY;
+
+ this.ctx.save();
+
+ // Global alpha
+ this.ctx.globalAlpha = effectInfo.alpha;
+
+ // Draw colored rectangle
+ this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")";
+ this.ctx.fillRect(posX, posY, this.squareX, this.squareY);
+
+ // Draw image
+ this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
+
+ this.ctx.restore();
+ };
+
+ // --------------------------------------------------------------------------------------------------------------------
+ // Tools
+ // --------------------------------------------------------------------------------------------------------------------
+
+ this.randomInt = function(min, max)
+ {
+ return Math.floor(this.randomFloat(min, max));
+ };
+
+ this.randomFloat = function(min, max)
+ {
+ return Math.random() * (max - min) + min;
+ };
+
+ this.getImageFromUrl = function(url)
+ {
+ var image = new Image();
+ image.onload = function() {
+ incMosaic.imagesLoaded += 1;
+ };
+ image.src = url;
+ return image;
+ };
+}
+
+function IncPairUrl(url1, url2)
+{
+ this.imageUrl1 = url1;
+ this.imageUrl2 = url2;
+}
+
+// --------------------------------------------------------------------------------------------------------------------
+// Effects
+// --------------------------------------------------------------------------------------------------------------------
+
+function IncColor(r, v, b, a)
+{
+ this.r = r;
+ this.v = v;
+ this.b = b;
+ this.a = a;
+
+ this.copy = function()
+ {
+ return new IncColor(this.r, this.v, this.b, this.a);
+ };
+}
+
+function IncAnim(value, time)
+{
+ this.value = value;
+ this.time = time;
+}
+
+function IncEffectInfo()
+{
+ this.color;
+ this.alpha;
+}
+
+function IncEffectParams(color, colorAnim, alpha, alphaAnim, time)
+{
+ // Color
+ this.color = color;
+ this.colorAnim = colorAnim;
+
+ // Alpha
+ this.alpha = alpha;
+ this.alphaAnim = alphaAnim;
+
+ // Time
+ this.time = time;
+
+ this.computeColorAnimValue = function(elapsedTime, easeFunc)
+ {
+ return this.computeAnimValue(this.colorAnim, elapsedTime, easeFunc);
+ };
+
+ this.computeAlphaAnimValue = function(elapsedTime, easeFunc)
+ {
+ return this.computeAnimValue(this.alphaAnim, elapsedTime, easeFunc);
+ };
+
+ this.computeAnimValue = function(anim, elapsedTime, easeFunc)
+ {
+ // Compute color alpha anim
+ if (elapsedTime < anim.time) {
+ return easeFunc(elapsedTime/anim.time) * anim.value;
+ }
+ return anim.value;
+ };
+}
+
+function IncSquareEffect_NoEffet()
+{
+ this.update = function(fullEffect, time)
+ {
+ return incMosaic.noEffectinfo;
+ }
+}
+
+function IncSquareEffect_Alpha(effectParms, tweenColorFunc, tweenAlphaFunc, waitTime)
+{
+ // Effect parameters
+ this.effectParms = effectParms;
+
+ // Tween functions
+ this.tweenColorFunc = tweenColorFunc;
+ this.tweenAlphaFunc = tweenAlphaFunc;
+
+ // Time
+ this.waitTime = (waitTime!==undefined) ? (new Date().getTime() + waitTime) : 0;
+
+ this.update = function(fullEffect, time)
+ {
+ if (this.waitTime > time) {
+ return null;
+ }
+
+ if (fullEffect.startTime == 0) {
+ fullEffect.startTime = time;
+ }
+
+ var elapsedTime = time - fullEffect.startTime;
+ var info = new IncEffectInfo();
+
+ // Compute new color
+ var newColorValue = this.effectParms.computeColorAnimValue(elapsedTime, this.tweenColorFunc);
+ info.color = this.effectParms.color.copy();
+ info.color.a += newColorValue;
+
+ // Compute alpha anim
+ var newAlphaValue = this.effectParms.computeAlphaAnimValue(elapsedTime, this.tweenAlphaFunc);
+ info.alpha = this.effectParms.alpha;
+ info.alpha += newAlphaValue;
+
+ return info;
+ };
+}
+
+function IncFullEffect(x, y, effect1, effect2)
+{
+ // Position
+ this.x = x;
+ this.y = y;
+
+ // Effect
+ this.effects = [effect1, effect2];
+
+ // Time
+ this.startTime = 0;
+
+ this.copy = function()
+ {
+ return new IncFullEffect(this.x, this.y, this.effects[0], this.effects.length > 1 ? this.effects[1] : undefined);
+ };
+}
+
+// --------------------------------------------------------------------------------------------------------------------
+// Tools
+// --------------------------------------------------------------------------------------------------------------------
+
+window.requestAnimationFrame = (function() {
+ return window.requestAnimationFrame || // Chromium
+ window.webkitRequestAnimationFrame || // Webkit
+ window.mozRequestAnimationFrame || // Mozilla Geko
+ window.oRequestAnimationFrame || // Opera Presto
+ window.msRequestAnimationFrame || // IE Trident?
+ function(callback, element){ // Fallback function
+ window.setTimeout(callback, 20);
+ };
+})();
+
+var incMosaic = new IncMosaic();
+
