The End - @todo

# HG changeset patch # User Edwin Razafimahatratra # Date 1350900233 -7200 # Node ID 45b05706b516a764d15a8bf595fe12f02583ef52 # Parent 9f8db096d8f7ffb35dcea31d37e7358af21815f7 mosaic effect js first test diff -r 9f8db096d8f7 -r 45b05706b516 web/index2.html --- a/web/index2.html Mon Oct 08 19:41:11 2012 +0200 +++ b/web/index2.html Mon Oct 22 12:03:53 2012 +0200 @@ -36,7 +36,7 @@

- void + void diff -r 9f8db096d8f7 -r 45b05706b516 web/index3.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/index3.html Mon Oct 22 12:03:53 2012 +0200 @@ -0,0 +1,30 @@ + + + + + The End - @todo + + + + + +

+ + + + + + + + + + + + diff -r 9f8db096d8f7 -r 45b05706b516 web/static/res/img/mosaic1.png Binary file web/static/res/img/mosaic1.png has changed diff -r 9f8db096d8f7 -r 45b05706b516 web/static/res/img/mosaic2.png Binary file web/static/res/img/mosaic2.png has changed diff -r 9f8db096d8f7 -r 45b05706b516 web/static/res/img/mosaic3.png Binary file web/static/res/img/mosaic3.png has changed diff -r 9f8db096d8f7 -r 45b05706b516 web/static/res/js/Ease.js --- /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.
+ *
+ * Most methods on Ease can be passed directly as easing functions:
+ * Tween.get(target).to({x:100}, 500, Ease.linear);
+ *
+ * However, methods beginning with "get" will return an easing function based on parameter values:
+ * Tween.get(target).to({y:200}, 500, Ease.getPowIn(2.2));
+ *
+ * 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; +}()); diff -r 9f8db096d8f7 -r 45b05706b516 web/static/res/js/incmosaic.js --- /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(); +