# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1352936005 -3600
# Node ID 6b23f677b62139d4d0233c1157f8213f9fc5176a
# Parent  0e185eeea3e10967b64cea5618118665e8e91e79# Parent  6d5b46559bd9a12834d983edb09d0f99038c2855
Merge with 6d5b46559bd9a12834d983edb09d0f99038c2855

diff -r 0e185eeea3e1 -r 6b23f677b621 web/index3.html
--- a/web/index3.html	Thu Nov 15 00:31:10 2012 +0100
+++ b/web/index3.html	Thu Nov 15 00:33:25 2012 +0100
@@ -19,10 +19,10 @@
         <script src="static/res/js/incmosaic.js"></script>
         <script>        
             $(function() {
-                incMosaic.addPairImages("static/res/img/mosaic1.png", "static/res/img/mosaic2.png");
-                incMosaic.addPairImages("static/res/img/mosaic2.png", "static/res/img/mosaic3.png");                
-                incMosaic.addPairImages("static/res/img/mosaic1.png", "static/res/img/mosaic3.png");                
-                incMosaic.start("mosaic", 16, 8);
+                incMosaic.addPairImages("static/res/img/ACC_0.jpg", "static/res/img/ACC_1.jpg");
+                incMosaic.addPairImages("static/res/img/ACC_2.jpg", "static/res/img/ACC_3.jpg");
+                incMosaic.addPairImages("static/res/img/ACC_4.jpg", "static/res/img/ACC_5.jpg");
+                incMosaic.start("mosaic", 9, 5);
             });
         </script>
 
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/ACC_0.jpg
Binary file web/static/res/img/ACC_0.jpg has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/ACC_1.jpg
Binary file web/static/res/img/ACC_1.jpg has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/ACC_2.jpg
Binary file web/static/res/img/ACC_2.jpg has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/ACC_3.jpg
Binary file web/static/res/img/ACC_3.jpg has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/ACC_4.jpg
Binary file web/static/res/img/ACC_4.jpg has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/ACC_5.jpg
Binary file web/static/res/img/ACC_5.jpg has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/mosaic1.png
Binary file web/static/res/img/mosaic1.png has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/mosaic2.png
Binary file web/static/res/img/mosaic2.png has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/img/mosaic3.png
Binary file web/static/res/img/mosaic3.png has changed
diff -r 0e185eeea3e1 -r 6b23f677b621 web/static/res/js/incmosaic.js
--- a/web/static/res/js/incmosaic.js	Thu Nov 15 00:31:10 2012 +0100
+++ b/web/static/res/js/incmosaic.js	Thu Nov 15 00:33:25 2012 +0100
@@ -21,6 +21,9 @@
 	this.effects = [];
 	this.squareEffects = [];
 
+	// Time
+	this.startTime;
+
 	this.noEffectinfo = new IncEffectInfo();
 	this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
 	this.noEffectinfo.alpha = 1;
@@ -54,6 +57,9 @@
 
 		// Set random effect on the squares
 		this.setRandomSquareEffect();
+
+		// Time
+		this.startTime = new Date().getTime();
 										
 		// Main loop
 		this.loopCallback();
@@ -72,29 +78,23 @@
 	{
 		// No effect 
 		//-----------------------------------
-		var noEffect = new IncSquareEffect_NoEffet()
-		var fullEffect0 = new IncFullEffect(0, 0, noEffect);
-		this.effects.push(fullEffect0);
+		//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);
-		}
+		// 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);
 
-		// 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);
+			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);
 		}
 	}
@@ -130,23 +130,32 @@
 			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
+		if (time < self.startTime + 3000) {
+			// Draw the first image
+			self.ctx.drawImage(self.pairImages[0], 0, 0);
+			requestAnimationFrame(self.loopCallback);
+			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) {
+			
+			// Update
 			var fullEffect = self.squareEffects[i];
+			fullEffect.update(time);
 
 			for (var j = 0; j < 2; ++j) {
-				var effect = fullEffect.effects[j];
-				if (effect !== undefined) {
+				var effectInfo = fullEffect.effectInfos[j];
+				if (effectInfo !== null) {
 					// Draw square
-					self.drawSquare(fullEffect, self.pairImages[j], effect, time);									
+					self.drawSquare(fullEffect, self.pairImages[j], effectInfo);	
 				}
 			}
 		}
@@ -156,15 +165,8 @@
 	};
 
 
-	this.drawSquare = function(fullEffect, image, effect, time)
+	this.drawSquare = function(fullEffect, image, effectInfo)
 	{
-		// 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;
@@ -244,7 +246,7 @@
 	this.alpha;
 }
 
-function IncEffectParams(color, colorAnim, alpha, alphaAnim, time)
+function IncEffectParams(color, colorAnim, alpha, alphaAnim)
 {
 	// Color
 	this.color = color;
@@ -254,9 +256,6 @@
 	this.alpha = alpha;
 	this.alphaAnim = alphaAnim;
 
-	// Time
-	this.time = time;
-
 	this.computeColorAnimValue = function(elapsedTime, easeFunc)
 	{
 		return this.computeAnimValue(this.colorAnim, elapsedTime, easeFunc);
@@ -279,7 +278,7 @@
 
 function IncSquareEffect_NoEffet()
 {
-	this.update = function(fullEffect, time)
+	this.update = function(time)
 	{
 		return incMosaic.noEffectinfo;
 	}
@@ -295,19 +294,10 @@
 	this.tweenAlphaFunc = tweenAlphaFunc;
 
 	// Time
-	this.waitTime = (waitTime!==undefined) ? (new Date().getTime() + waitTime) : 0; 
+	this.waitTime = (waitTime!==undefined) ? waitTime : 0; 
 
-	this.update = function(fullEffect, time)
+	this.update = function(elapsedTime)
 	{
-		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
@@ -324,21 +314,40 @@
 	};
 }
 
-function IncFullEffect(x, y, effect1, effect2)
+function IncFullEffect(effect1, effect2, totalTime1, totalTime2)
 {
 	// Position
-	this.x = x;
-	this.y = y;
+	this.x = 0;
+	this.y = 0;
 
 	// Effect	
 	this.effects = [effect1, effect2];
+	this.effectInfos = [null, null];
 
 	// Time
-	this.startTime = 0;	
+	this.startTime = [0, 0];	
+	this.totalTime = [totalTime1, totalTime2];	
 
 	this.copy = function()
 	{
-		return new IncFullEffect(this.x, this.y, this.effects[0], this.effects.length > 1 ? this.effects[1] : undefined);
+		return new IncFullEffect(this.effects[0], this.effects[1], this.totalTime[0], this.totalTime[1]);
+	};
+
+	this.update = function(time)
+	{
+		if (this.startTime[0] == 0) {
+			this.startTime[0] = time;
+			this.startTime[1] = time;
+			return;
+		}
+
+		for (var i = 0; i < 2; ++i) {
+			// If we are in the good time range we update the effect
+			var waitTime = this.startTime[i] + this.effects[i].waitTime;
+			if (time > waitTime && time < this.totalTime[i] + waitTime) {
+				this.effectInfos[i] = this.effects[i].update(time - waitTime);
+			}
+		}
 	};	
 }