diff -r e5421b704368 -r 6cd5bc3dc7a2 web/static/res/js/incmosaic.js --- a/web/static/res/js/incmosaic.js Fri Nov 16 12:53:58 2012 +0100 +++ b/web/static/res/js/incmosaic.js Sun Dec 09 19:59:03 2012 +0100 @@ -5,29 +5,31 @@ // -------------------------------------------------------------------------------------------------------------------- // Canvas + this.canvasId; this.canvas; - this.context; + this.ctx; + this.imageData; /// Images this.pairUrl = []; this.pairImages = []; this.imagesLoaded = 0; + this.imageWidth; + this.imageHeight; // Effect - this.countX; - this.countY; - this.squareX; - this.squareY; + this.squareCountX; + this.squareCountY; + this.srcSquareWidth; + this.srcSquareHeight; + this.squareWidth; + this.squareHeight; this.effects = []; this.squareEffects = []; // Time this.startTime; - this.noEffectinfo = new IncEffectInfo(); - this.noEffectinfo.color = new IncColor(255, 255, 255, 1) - this.noEffectinfo.alpha = 1; - // -------------------------------------------------------------------------------------------------------------------- // Functions // -------------------------------------------------------------------------------------------------------------------- @@ -38,20 +40,21 @@ this.pairUrl.push(urls); }; - this.start = function(canvasId, countX, countY) + this.start = function(canvasId, squareCountX, squareCountY) { + // Canvas ID + this.canvasId = canvasId; + + // Set square count + this.squareCountX = squareCountX; + this.squareCountY = (squareCountY === undefined) ? squareCountX: squareCountY; + // Init the canvas objects - this.init(canvasId); + this.init(); // 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(); @@ -65,39 +68,30 @@ this.loopCallback(); }; - this.init = function(canvasId) + this.init = function() { // Init canvas objects - this.canvas = document.getElementById(canvasId); + this.canvas = document.getElementById(this.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() + this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight) { - // No effect - //----------------------------------- - //var noEffect = new IncSquareEffect_NoEffet() - //var fullEffect0 = new IncFullEffect(0, 0, noEffect); - //this.effects.push(fullEffect0); + //incMosaic.imageData = incMosaic.ctx.getImageData(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY); + }; - // Create semi random effects - for (var i = 0; i < 20; ++i) { - var time1 = this.randomInt(3000, 10000); - var time2 = this.randomInt(3000, 10000); - var c1 = this.randomInt(0, 128); + this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight) + { + // Recalculate the size of the mosaic squares + incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX); + incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY); - var effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); - var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); - - var effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); - var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); - - var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); - this.effects.push(fullEffect1); - } - } + //incMosaic.ctx.fillStyle = "#000000"; + //incMosaic.ctx.fillRect(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY); + //incMosaic.ctx.putImageData(incMosaic.imageData, 0, 0); + }; this.setRandomPairImages = function() { @@ -110,8 +104,8 @@ this.setRandomSquareEffect = function() { - for (var i = 0; i < this.countX; ++i) { - for (var j = 0; j < this.countY; ++j) { + for (var i = 0; i < this.squareCountX; ++i) { + for (var j = 0; j < this.squareCountY; ++j) { var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); fullEffect.x = i; fullEffect.y = j; @@ -124,68 +118,127 @@ { var self = incMosaic; - if (self.imagesLoaded != 2) { - // Images are not loaded yet - requestAnimationFrame(self.loopCallback); - return; + if (self.imagesLoaded == 2) { + // Redraw + self.redraw(); } + // Loop + requestAnimationFrame(self.loopCallback); + }; + + this.redraw = function() + { // Get time var time = new Date().getTime(); - if (time < self.startTime + 3000) { + if (time < this.startTime + 3000) { // Draw the first image - self.ctx.drawImage(self.pairImages[0], 0, 0); - requestAnimationFrame(self.loopCallback); + this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY); return; } - // Clear canvas - //self.ctx.fillStyle = "#000000"; - //self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height); - // Update effects - for (var i = 0; i < self.squareEffects.length; ++i) { - + for (var i = 0; i < this.squareEffects.length; ++i) { // Update - var fullEffect = self.squareEffects[i]; + var fullEffect = this.squareEffects[i]; fullEffect.update(time); for (var j = 0; j < 2; ++j) { var effectInfo = fullEffect.effectInfos[j]; if (effectInfo !== null) { // Draw square - self.drawSquare(fullEffect, self.pairImages[j], effectInfo); + this.drawSquare(fullEffect, this.pairImages[j], effectInfo); } } - } - - // Loop - requestAnimationFrame(self.loopCallback); + } }; - this.drawSquare = function(fullEffect, image, effectInfo) { - // 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; + this.ctx.globalAlpha = effectInfo.alpha; + + // Compute src and dest square position + var srcPosX = fullEffect.x * this.srcSquareWidth; + var srcPosY = fullEffect.y * this.srcSquareHeight; + var destPosX = fullEffect.x * this.squareWidth; + var destPosY = fullEffect.y * this.squareHeight; // 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); + this.ctx.fillRect(destPosX, destPosY, this.squareWidth, this.squareHeight); // Draw image - this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY); + this.ctx.drawImage(image, srcPosX, srcPosY, this.srcSquareWidth, this.srcSquareHeight, destPosX, destPosY, this.squareWidth, this.squareHeight); this.ctx.restore(); }; + this.registerEffects = function() + { + var count = 7; + var color = 64; + + // Create semi random effects + var range1 = 3000; + var range2 = 7000; + + var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1; + for (i = 0; i < count; ++i) { + time1 = this.randomInt(range1, range2); + time2 = this.randomInt(range1, range2); + c1 = this.randomInt(0, color); + + effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); + effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); + + effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); + effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); + + fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); + this.effects.push(fullEffect1); + } + + // Create semi random effects + range1 = 10000; + range2 = 25000; + for (i = 0; i < count; ++i) { + time1 = this.randomInt(range1, range2); + time2 = this.randomInt(range1, range2); + c1 = this.randomInt(0, color); + + effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); + effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); + + effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); + effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); + + fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); + this.effects.push(fullEffect1); + } + + // Create semi random effects + range1 = 25000; + range2 = 30000; + for (i = 0; i < count; ++i) { + time1 = this.randomInt(range1, range2); + time2 = this.randomInt(range1, range2); + c1 = this.randomInt(0, color); + + effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); + effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); + + effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); + effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); + + fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); + this.effects.push(fullEffect1); + } + }; + // -------------------------------------------------------------------------------------------------------------------- // Tools // -------------------------------------------------------------------------------------------------------------------- @@ -202,9 +255,23 @@ this.getImageFromUrl = function(url) { + var self = incMosaic; var image = new Image(); image.onload = function() { - incMosaic.imagesLoaded += 1; + // When the first image is loaded we can get the image dimention and init the autoresize of the canvas + if (self.imagesLoaded === 0) { + // Set some image size related vars + self.imageWidth = image.width; + self.imageHeight = image.height; + self.srcSquareWidth = image.width / self.squareCountX; + self.srcSquareHeight = image.height / self.squareCountY; + + // Call the resize object + if (incResize !== undefined) { + incResize.resizeElements(); + } + } + self.imagesLoaded += 1; }; image.src = url; return image; @@ -276,14 +343,6 @@ }; } -function IncSquareEffect_NoEffet() -{ - this.update = function(time) - { - return incMosaic.noEffectinfo; - } -} - function IncSquareEffect_Alpha(effectParms, tweenColorFunc, tweenAlphaFunc, waitTime) { // Effect parameters @@ -335,7 +394,7 @@ this.update = function(time) { - if (this.startTime[0] == 0) { + if (this.startTime[0] === 0) { this.startTime[0] = time; this.startTime[1] = time; return;