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(); +