1 function IncMosaic()

     2 {

     3 	// --------------------------------------------------------------------------------------------------------------------

     4 	// Members

     5 	// --------------------------------------------------------------------------------------------------------------------

     6 	

     7 	// Canvas

     8 	this.canvas;

     9 	this.context;

    10 

    11 	/// Images

    12 	this.pairUrl = [];

    13 	this.pairImages = [];

    14 	this.imagesLoaded = 0;

    15 

    16 	// Effect

    17 	this.countX;

    18 	this.countY;

    19 	this.squareX;

    20 	this.squareY;

    21 	this.effects = [];

    22 	this.squareEffects = [];

    23 

    24 	this.noEffectinfo = new IncEffectInfo();

    25 	this.noEffectinfo.color = new IncColor(255, 255, 255, 1)

    26 	this.noEffectinfo.alpha = 1;

    27 

    28 	// --------------------------------------------------------------------------------------------------------------------

    29 	// Functions

    30 	// --------------------------------------------------------------------------------------------------------------------

    31 

    32 	this.addPairImages = function(url1, url2)

    33 	{

    34 		var urls = new IncPairUrl(url1, url2);

    35 		this.pairUrl.push(urls);

    36 	};

    37 

    38 	this.start = function(canvasId, countX, countY)

    39 	{

    40 		// Init the canvas objects

    41 		this.init(canvasId);

    42 

    43 		// Register effects

    44 		this.registerEffects();

    45 

    46 		// Count, square`

    47 		this.countX = countX;

    48 		this.countY = (countY === undefined) ? countX: countY;

    49 		this.squareX = Math.floor(this.canvas.width / this.countX);

    50 		this.squareY = Math.floor(this.canvas.height / this.countY);

    51 

    52 		// Set a random pair images

    53 		this.setRandomPairImages();

    54 

    55 		// Set random effect on the squares

    56 		this.setRandomSquareEffect();

    57 										

    58 		// Main loop

    59 		this.loopCallback();

    60 	};

    61 

    62 	this.init = function(canvasId)

    63 	{

    64 		// Init canvas objects

    65 		this.canvas = document.getElementById(canvasId);

    66 		this.ctx = this.canvas.getContext('2d');

    67 		this.ctx.fillStyle = "#000000";

    68 		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

    69 	};

    70 

    71 	this.registerEffects = function()

    72 	{

    73 		// No effect 

    74 		//-----------------------------------

    75 		var noEffect = new IncSquareEffect_NoEffet()

    76 		var fullEffect0 = new IncFullEffect(0, 0, noEffect);

    77 		this.effects.push(fullEffect0);

    78 

    79 		// Alpha 

    80 		//-----------------------------------

    81 		{

    82 			var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000);

    83 			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);

    84 			var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);

    85 			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);

    86 			var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);

    87 			this.effects.push(fullEffect1);

    88 		}

    89 

    90 		// Alpha 2

    91 		//-----------------------------------

    92 		{

    93 			var effectParam1 = new IncEffectParams(new IncColor(32, 32, 32, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000);

    94 			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);

    95 			var effectParam2 = new IncEffectParams(new IncColor(32, 32, 32, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);

    96 			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);

    97 			var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);

    98 			this.effects.push(fullEffect1);

    99 		}

   100 	}

   101 

   102 	this.setRandomPairImages = function()

   103 	{

   104 		this.imagesLoaded = 0;

   105 		var randInd = this.randomInt(0, this.pairUrl.length);

   106 		var pairUrl = this.pairUrl[randInd];

   107 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl1));

   108 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2));

   109 	};

   110 

   111 	this.setRandomSquareEffect = function()

   112 	{

   113 		for (var i = 0; i < this.countX; ++i) {

   114 			for (var j = 0; j < this.countY; ++j) {

   115 				var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();

   116 				fullEffect.x = i;

   117 				fullEffect.y = j;

   118 				this.squareEffects.push(fullEffect);				

   119 			}			

   120 		}

   121 	};	

   122 		

   123 	this.loopCallback = function()

   124 	{

   125 		var self = incMosaic;

   126 

   127 		if (self.imagesLoaded != 2) {

   128 			// Images are not loaded yet

   129 			requestAnimationFrame(self.loopCallback);

   130 			return;

   131 		}

   132 

   133 		// Clear canvas

   134 		self.ctx.fillStyle = "#ffffff";

   135 		self.ctx.fillStyle = "#000000";

   136 		self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);	

   137 

   138 		// Get time

   139 		var time = new Date().getTime();

   140 

   141 		// Update effect

   142 		for (var i = 0; i < self.squareEffects.length; ++i) {

   143 			var fullEffect = self.squareEffects[i];

   144 

   145 			for (var j = 0; j < 2; ++j) {

   146 				var effect = fullEffect.effects[j];

   147 				if (effect !== undefined) {

   148 					// Draw square

   149 					self.drawSquare(fullEffect, self.pairImages[j], effect, time);									

   150 				}

   151 			}

   152 		}

   153 

   154 		// Loop

   155 		requestAnimationFrame(self.loopCallback);

   156 	};

   157 

   158 

   159 	this.drawSquare = function(fullEffect, image, effect, time)

   160 	{

   161 		// Update effect

   162 		var effectInfo = effect.update(fullEffect, time);

   163 

   164 		if (effectInfo === null) {

   165 			return;

   166 		}

   167 

   168 		// Compute square position

   169 		var posX = fullEffect.x * this.squareX;

   170 		var posY = fullEffect.y * this.squareY;

   171 

   172 		this.ctx.save();

   173 

   174 		// Global alpha

   175 		this.ctx.globalAlpha = effectInfo.alpha;	

   176 

   177 		// Draw colored rectangle

   178 		this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")";

   179 		this.ctx.fillRect(posX, posY, this.squareX, this.squareY);

   180 

   181 		// Draw image

   182 		this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);

   183 

   184 		this.ctx.restore();

   185 	};

   186 

   187 	// --------------------------------------------------------------------------------------------------------------------

   188 	// Tools

   189 	// --------------------------------------------------------------------------------------------------------------------

   190 

   191 	this.randomInt = function(min, max)

   192 	{

   193 		return Math.floor(this.randomFloat(min, max));

   194 	};

   195 

   196 	this.randomFloat = function(min, max)

   197 	{

   198 		return Math.random() * (max - min) + min;

   199 	};

   200 

   201 	this.getImageFromUrl = function(url)

   202 	{

   203 		var image = new Image();

   204 		image.onload = function() {

   205 			incMosaic.imagesLoaded += 1;

   206 		};

   207 		image.src = url;

   208 		return image;

   209 	};

   210 }

   211 

   212 function IncPairUrl(url1, url2)

   213 {

   214 	this.imageUrl1 = url1;

   215 	this.imageUrl2 = url2;

   216 }

   217 

   218 // --------------------------------------------------------------------------------------------------------------------

   219 // Effects

   220 // --------------------------------------------------------------------------------------------------------------------

   221 

   222 function IncColor(r, v, b, a)

   223 {

   224 	this.r = r;

   225 	this.v = v;

   226 	this.b = b;

   227 	this.a = a;

   228 

   229 	this.copy = function()

   230 	{

   231 		return new IncColor(this.r, this.v, this.b, this.a);

   232 	};

   233 }

   234 

   235 function IncAnim(value, time)

   236 {

   237 	this.value = value;

   238 	this.time = time;

   239 }

   240 

   241 function IncEffectInfo()

   242 {

   243 	this.color;

   244 	this.alpha;

   245 }

   246 

   247 function IncEffectParams(color, colorAnim, alpha, alphaAnim, time)

   248 {

   249 	// Color

   250 	this.color = color;

   251 	this.colorAnim = colorAnim;

   252 

   253 	// Alpha

   254 	this.alpha = alpha;

   255 	this.alphaAnim = alphaAnim;

   256 

   257 	// Time

   258 	this.time = time;

   259 

   260 	this.computeColorAnimValue = function(elapsedTime, easeFunc)

   261 	{

   262 		return this.computeAnimValue(this.colorAnim, elapsedTime, easeFunc);

   263 	};

   264 

   265 	this.computeAlphaAnimValue = function(elapsedTime, easeFunc)

   266 	{

   267 		return this.computeAnimValue(this.alphaAnim, elapsedTime, easeFunc);

   268 	};

   269 

   270 	this.computeAnimValue = function(anim, elapsedTime, easeFunc)

   271 	{

   272 		// Compute color alpha anim

   273 		if (elapsedTime < anim.time) {

   274 			return easeFunc(elapsedTime/anim.time) * anim.value;			

   275 		}

   276 		return anim.value;

   277 	};	

   278 }

   279 

   280 function IncSquareEffect_NoEffet()

   281 {

   282 	this.update = function(fullEffect, time)

   283 	{

   284 		return incMosaic.noEffectinfo;

   285 	}

   286 }

   287 

   288 function IncSquareEffect_Alpha(effectParms, tweenColorFunc, tweenAlphaFunc, waitTime)

   289 {

   290 	// Effect parameters

   291 	this.effectParms = effectParms;

   292 

   293 	// Tween functions

   294 	this.tweenColorFunc = tweenColorFunc;

   295 	this.tweenAlphaFunc = tweenAlphaFunc;

   296 

   297 	// Time

   298 	this.waitTime = (waitTime!==undefined) ? (new Date().getTime() + waitTime) : 0; 

   299 

   300 	this.update = function(fullEffect, time)

   301 	{

   302 		if (this.waitTime > time) {

   303 			return null;

   304 		}

   305 

   306 		if (fullEffect.startTime == 0) {

   307 			fullEffect.startTime = time;			

   308 		}

   309 

   310 		var elapsedTime = time - fullEffect.startTime;		

   311 		var info = new IncEffectInfo();

   312 

   313 		// Compute new color

   314 		var newColorValue = this.effectParms.computeColorAnimValue(elapsedTime, this.tweenColorFunc);

   315 		info.color = this.effectParms.color.copy();

   316 		info.color.a += newColorValue;

   317 

   318 		// Compute alpha anim

   319 		var newAlphaValue = this.effectParms.computeAlphaAnimValue(elapsedTime, this.tweenAlphaFunc);

   320 		info.alpha = this.effectParms.alpha;

   321 		info.alpha += newAlphaValue;

   322 

   323 		return info;

   324 	};

   325 }

   326 

   327 function IncFullEffect(x, y, effect1, effect2)

   328 {

   329 	// Position

   330 	this.x = x;

   331 	this.y = y;

   332 

   333 	// Effect	

   334 	this.effects = [effect1, effect2];

   335 

   336 	// Time

   337 	this.startTime = 0;	

   338 

   339 	this.copy = function()

   340 	{

   341 		return new IncFullEffect(this.x, this.y, this.effects[0], this.effects.length > 1 ? this.effects[1] : undefined);

   342 	};	

   343 }

   344 

   345 // --------------------------------------------------------------------------------------------------------------------

   346 // Tools

   347 // --------------------------------------------------------------------------------------------------------------------

   348 

   349 window.requestAnimationFrame = (function() {              

   350 	return window.requestAnimationFrame    ||  	// Chromium 

   351 		window.webkitRequestAnimationFrame ||  	// Webkit

   352 		window.mozRequestAnimationFrame    || 	// Mozilla Geko

   353 		window.oRequestAnimationFrame      || 	// Opera Presto

   354 		window.msRequestAnimationFrame     || 	// IE Trident?

   355 		function(callback, element){ 			// Fallback function

   356 		   window.setTimeout(callback, 20);                

   357 		};    

   358 })();

   359 

   360 var incMosaic = new IncMosaic();

   361