theend: comparison web/static/res/js/incmosaic.js

Mercurial Mercurial > theend / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

web/static/res/js/incmosaic.js

changeset 32	6b23f677b621
parent 30	6d5b46559bd9
child 36	6cd5bc3dc7a2

equal deleted inserted replaced

-:0e185eeea3e1
+:6b23f677b621
 	this.squareX;
 	this.squareY;
 	this.effects = [];
 	this.squareEffects = [];
+	// Time
+	this.startTime;
 	this.noEffectinfo = new IncEffectInfo();
 	this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
 	this.noEffectinfo.alpha = 1;
 	// --------------------------------------------------------------------------------------------------------------------
 		// Set a random pair images
 		this.setRandomPairImages();
 		// Set random effect on the squares
 		this.setRandomSquareEffect();
+		// Time
+		this.startTime = new Date().getTime();
 		// Main loop
 		this.loopCallback();
 	};
 	this.registerEffects = function()
 	{
 		// No effect
 		//-----------------------------------
-		var noEffect = new IncSquareEffect_NoEffet()
+		//var noEffect = new IncSquareEffect_NoEffet()
-		var fullEffect0 = new IncFullEffect(0, 0, noEffect);
+		//var fullEffect0 = new IncFullEffect(0, 0, noEffect);
-		this.effects.push(fullEffect0);
+		//this.effects.push(fullEffect0);
-		// Alpha
+		// Create semi random effects
-		//-----------------------------------
+		for (var i = 0; i < 20; ++i) {
-		{
+			var time1 = this.randomInt(3000, 10000);
-			var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000);
+			var time2 = this.randomInt(3000, 10000);
-			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);
+			var c1 = this.randomInt(0, 128);
-			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 effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
-			var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);
+			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
-			this.effects.push(fullEffect1);
-		}
+			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);
-		// Alpha 2
-		//-----------------------------------
+			var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
-		{
-			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()
 			// 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
+		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];
+				var effectInfo = fullEffect.effectInfos[j];
-				if (effect !== undefined) {
+				if (effectInfo !== null) {
 					// Draw square
-					self.drawSquare(fullEffect, self.pairImages[j], effect, time);
+					self.drawSquare(fullEffect, self.pairImages[j], effectInfo);
 				}
 			}
 		}
 		// Loop
 		requestAnimationFrame(self.loopCallback);
 	};
-	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;
 		this.ctx.save();
 {
 	this.color;
 	this.alpha;
 }
-function IncEffectParams(color, colorAnim, alpha, alphaAnim, time)
+function IncEffectParams(color, colorAnim, alpha, alphaAnim)
 {
 	// 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);
 	};
 	};
 }
 function IncSquareEffect_NoEffet()
 {
-	this.update = function(fullEffect, time)
+	this.update = function(time)
 	{
 		return incMosaic.noEffectinfo;
 	}
 }
 	// Tween functions
 	this.tweenColorFunc = tweenColorFunc;
 	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
 		var newColorValue = this.effectParms.computeColorAnimValue(elapsedTime, this.tweenColorFunc);
 		info.color = this.effectParms.color.copy();
 		return info;
 	};
 }
-function IncFullEffect(x, y, effect1, effect2)
+function IncFullEffect(effect1, effect2, totalTime1, totalTime2)
 {
 	// Position
-	this.x = x;
+	this.x = 0;
-	this.y = y;
+	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);
+			}
+		}
 	};
 }
 // --------------------------------------------------------------------------------------------------------------------
 // Tools

theend