web/static/res/js/incmosaic.js
changeset 38 cdbb56b876c9
parent 36 6cd5bc3dc7a2
child 39 6605de5fe0bd
--- a/web/static/res/js/incmosaic.js	Mon Dec 10 19:48:28 2012 +0100
+++ b/web/static/res/js/incmosaic.js	Mon Dec 10 20:55:18 2012 +0100
@@ -55,6 +55,15 @@
 		// Register effects
 		this.registerEffects();
 
+		// Set a new effect transition between 2 images
+		this.SetNewEffect();
+										
+		// Main loop
+		this.loopCallback();
+	};
+
+	this.SetNewEffect = function()
+	{
 		// Set a random pair images
 		this.setRandomPairImages();
 
@@ -62,11 +71,8 @@
 		this.setRandomSquareEffect();
 
 		// Time
-		this.startTime = new Date().getTime();
-										
-		// Main loop
-		this.loopCallback();
-	};
+		this.startTime = new Date().getTime();		
+	}
 
 	this.init = function()
 	{
@@ -79,7 +85,6 @@
 
 	this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight)
 	{
-		//incMosaic.imageData = incMosaic.ctx.getImageData(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY);
 	};
 
 	this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight)
@@ -87,10 +92,6 @@
 		// Recalculate the size of the mosaic squares
 		incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX);
 		incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY);
-
-		//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()
@@ -98,12 +99,15 @@
 		this.imagesLoaded = 0;
 		var randInd = this.randomInt(0, this.pairUrl.length);
 		var pairUrl = this.pairUrl[randInd];
+
+		this.pairImages.length = 0;
 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl1));
 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2));
 	};
 
 	this.setRandomSquareEffect = function()
 	{
+		this.squareEffects.length = 0;
 		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();
@@ -139,10 +143,11 @@
 		}
 
 		// Update effects
+		var effectsContinue = false;
 		for (var i = 0; i < this.squareEffects.length; ++i) {			
 			// Update
 			var fullEffect = this.squareEffects[i];
-			fullEffect.update(time);
+			effectsContinue = fullEffect.update(time) || effectsContinue;
 
 			for (var j = 0; j < 2; ++j) {
 				var effectInfo = fullEffect.effectInfos[j];
@@ -151,7 +156,12 @@
 					this.drawSquare(fullEffect, this.pairImages[j], effectInfo);	
 				}
 			}
-		}		
+		}
+
+		if (!effectsContinue) {
+			console.log("Effect finished !!!!!");
+			this.SetNewEffect();
+		}	
 	};
 
 	this.drawSquare = function(fullEffect, image, effectInfo)
@@ -184,7 +194,7 @@
 
 		// Create semi random effects
 		var range1 = 3000;
-		var range2 = 7000;
+		var range2 = 5000;
 
 		var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1;
 		for (i = 0; i < count; ++i) {
@@ -203,8 +213,8 @@
 		}
 
 		// Create semi random effects
-		range1 = 10000;
-		range2 = 25000;
+		range1 = 7000;
+		range2 = 15000;
 		for (i = 0; i < count; ++i) {
 			time1 = this.randomInt(range1, range2);
 			time2 = this.randomInt(range1, range2);
@@ -221,8 +231,8 @@
 		}
 
 		// Create semi random effects
-		range1 = 25000;
-		range2 = 30000;
+		range1 = 17000;
+		range2 = 23000;
 		for (i = 0; i < count; ++i) {
 			time1 = this.randomInt(range1, range2);
 			time2 = this.randomInt(range1, range2);
@@ -397,16 +407,24 @@
 		if (this.startTime[0] === 0) {
 			this.startTime[0] = time;
 			this.startTime[1] = time;
-			return;
+			return true;
 		}
 
 		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) {
+			var updateEffect = time < this.totalTime[i] + waitTime;
+			if (time > waitTime && updateEffect) {
 				this.effectInfos[i] = this.effects[i].update(time - waitTime);
 			}
+
+			if (i == 1 && !updateEffect) {
+				// The effect is done
+				return false;
+			}
 		}
+
+		return true;
 	};	
 }