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 42	01415303372e
parent 39	6605de5fe0bd
child 43	21a791340354

equal deleted inserted replaced

-:f2123b4487e9
+:01415303372e
 	this.imagesLoaded = 0;
 	this.imageWidth;
 	this.imageHeight;
 	// Effect
+	this.waitStartEffectTime = 3000;
+	this.waitStartEffectGo;
+	this.effectSpeed;
 	this.squareCountX;
 	this.squareCountY;
 	this.srcSquareWidth;
 	this.srcSquareHeight;
 	this.squareWidth;
 	this.squareHeight;
 	this.effects = [];
 	this.squareEffects = [];
+	this.loop;
+	this.endEffecFunc;
 	// Time
 	this.startTime;
 	// --------------------------------------------------------------------------------------------------------------------
 	this.addImageUrl = function(url)
 	{
 		this.imageUrls.push(url);
 	};
-	this.start = function(canvasId, squareCountX, squareCountY)
+	this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc)
 	{
 		// Canvas ID
 		this.canvasId = canvasId;
+		// Speed
+		this.effectSpeed = 1 / effectSpeed;
 		// Set square count
 		this.squareCountX = squareCountX;
 		this.squareCountY = (squareCountY === undefined) ? squareCountX: squareCountY;
+		// End effect behavior
+		this.loop = loop;
+		this.endEffecFunc = endEffecFunc;
+		// Does the effect wait for go
+		this.waitStartEffectGo = waitStartEffectGo;
 		// Init the canvas objects
 		this.init();
 		// Register effects
 		this.registerEffects();
 		// Set a new effect transition between 2 images
-		this.SetNewEffect();
+		this.setNewEffect();
 		// Main loop
 		this.loopCallback();
 	};
-	this.SetNewEffect = function()
+	this.setNewEffect = function()
 	{
 		// Set a random pair images
 		this.setRandomPairImages();
 		// Set random effect on the squares
 		this.setRandomSquareEffect();
 		// Time
 		this.startTime = new Date().getTime();
-	}
+	};
+	this.goEffect = function()
+	{
+		this.waitStartEffectGo = false;
+	};
 	this.init = function()
 	{
 		// Init canvas objects
 		this.canvas = document.getElementById(this.canvasId );
 	this.redraw = function()
 	{
 		// Get time
 		var time = new Date().getTime();
-		if (time < this.startTime + 3000) {
+		var timeToWait = (this.startTime + this.waitStartEffectTime)*this.effectSpeed;
+		if (time < timeToWait || this.waitStartEffectGo) {
 			// Draw the first image
 			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;
 		}
 				}
 			}
 		}
 		if (!effectsContinue) {
-			console.log("Effect finished !!!!!");
+			if (this.loop) {
-			this.SetNewEffect();
+				// The effect loop
+				this.setNewEffect();
+			} else if (this.endEffecFunc != undefined && this.endEffecFunc != null) {
+				// Call the end callback
+				this.endEffecFunc();
+			}
 		}
 	};
 	this.drawSquare = function(fullEffect, image, effectInfo)
 	{
 	this.registerEffects = function()
 	{
 		var count = 7;
 		var color = 64;
+		var speed = this.effectSpeed;
 		// Create semi random effects
-		var range1 = 3000;
+		var range1 = 3000 * speed;
-		var range2 = 5000;
+		var range2 = 5000 * speed;
+		this.registerEffectsTime(count, color, range1, range2);
-		var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1;
-		for (i = 0; i < count; ++i) {
+		// Create semi random effects
-			time1 = this.randomInt(range1, range2);
+		range1 = 7000 * speed;
-			time2 = this.randomInt(range1, range2);
+		range2 = 15000 * speed;
-			c1 = this.randomInt(0, color);
+		this.registerEffectsTime(count, color, range1, range2);
-			effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
+		// Create semi random effects
-			effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
+		range1 = 17000 * speed;
+		range2 = 23000 * speed;
+		this.registerEffectsTime(count, color, range1, range2);
+	};
+	this.registerEffectsTime = function(count, color, range1, range2)
+	{
+		for (var i = 0; i < count; ++i) {
+			var time1 = this.randomInt(range1, range2);
+			var time2 = this.randomInt(range1, range2);
+			var c1 = this.randomInt(0, color);
+			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);
-			effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
+			var 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);
+			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
-			fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
+			var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
 			this.effects.push(fullEffect1);
 		}
+	};
-		// Create semi random effects
-		range1 = 7000;
-		range2 = 15000;
-		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 = 17000;
-		range2 = 23000;
-		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
 	// --------------------------------------------------------------------------------------------------------------------

theend