Mercurial Mercurial > theend / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
web/static/res/js/incmosaic.js
changeset 36 6cd5bc3dc7a2
parent 30 6d5b46559bd9
child 38 cdbb56b876c9
equal deleted inserted replaced
35:e5421b704368 36:6cd5bc3dc7a2 
     3 	// --------------------------------------------------------------------------------------------------------------------
 
     3 	// --------------------------------------------------------------------------------------------------------------------
 
     4 	// Members
 
     4 	// Members
 
     5 	// --------------------------------------------------------------------------------------------------------------------
 
     5 	// --------------------------------------------------------------------------------------------------------------------
 
     6 	
     6 	
     7 	// Canvas
 
     7 	// Canvas
 
       
     8 	this.canvasId;
 
     8 	this.canvas;
 
     9 	this.canvas;
 
     9 	this.context;
 
    10 	this.ctx;
 
       
    11 	this.imageData;
 
    10 
    12 
    11 	/// Images
 
    13 	/// Images
 
    12 	this.pairUrl = [];
 
    14 	this.pairUrl = [];
 
    13 	this.pairImages = [];
 
    15 	this.pairImages = [];
 
    14 	this.imagesLoaded = 0;
 
    16 	this.imagesLoaded = 0;
 
       
    17 	this.imageWidth;
 
       
    18 	this.imageHeight;
 
    15 
    19 
    16 	// Effect
 
    20 	// Effect
 
    17 	this.countX;
 
    21 	this.squareCountX;
 
    18 	this.countY;
 
    22 	this.squareCountY;
 
    19 	this.squareX;
 
    23 	this.srcSquareWidth;
 
    20 	this.squareY;
 
    24 	this.srcSquareHeight;
 
       
    25 	this.squareWidth;
 
       
    26 	this.squareHeight;
 
    21 	this.effects = [];
 
    27 	this.effects = [];
 
    22 	this.squareEffects = [];
 
    28 	this.squareEffects = [];
 
    23 
    29 
    24 	// Time
 
    30 	// Time
 
    25 	this.startTime;
 
    31 	this.startTime;
 
    26 
    32 
    27 	this.noEffectinfo = new IncEffectInfo();
 
       
    28 	this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
 
       
    29 	this.noEffectinfo.alpha = 1;
 
       
    30 
       
    31 	// --------------------------------------------------------------------------------------------------------------------
 
    33 	// --------------------------------------------------------------------------------------------------------------------
 
    32 	// Functions
 
    34 	// Functions
 
    33 	// --------------------------------------------------------------------------------------------------------------------
 
    35 	// --------------------------------------------------------------------------------------------------------------------
 
    34 
    36 
    35 	this.addPairImages = function(url1, url2)
 
    37 	this.addPairImages = function(url1, url2)
 
    36 	{
 
    38 	{
 
    37 		var urls = new IncPairUrl(url1, url2);
 
    39 		var urls = new IncPairUrl(url1, url2);
 
    38 		this.pairUrl.push(urls);
 
    40 		this.pairUrl.push(urls);
 
    39 	};
 
    41 	};
 
    40 
    42 
    41 	this.start = function(canvasId, countX, countY)
 
    43 	this.start = function(canvasId, squareCountX, squareCountY)
 
    42 	{
 
    44 	{
 
       
    45 		// Canvas ID
 
       
    46 		this.canvasId = canvasId;
 
       
    47 
       
    48 		// Set square count
 
       
    49 		this.squareCountX = squareCountX;
 
       
    50 		this.squareCountY = (squareCountY === undefined) ? squareCountX: squareCountY;
 
       
    51 
    43 		// Init the canvas objects
 
    52 		// Init the canvas objects
 
    44 		this.init(canvasId);
 
    53 		this.init();
 
    45 
    54 
    46 		// Register effects
 
    55 		// Register effects
 
    47 		this.registerEffects();
 
    56 		this.registerEffects();
 
    48 
       
    49 		// Count, square`
 
       
    50 		this.countX = countX;
 
       
    51 		this.countY = (countY === undefined) ? countX: countY;
 
       
    52 		this.squareX = Math.floor(this.canvas.width / this.countX);
 
       
    53 		this.squareY = Math.floor(this.canvas.height / this.countY);
 
       
    54 
    57 
    55 		// Set a random pair images
 
    58 		// Set a random pair images
 
    56 		this.setRandomPairImages();
 
    59 		this.setRandomPairImages();
 
    57 
    60 
    58 		// Set random effect on the squares
 
    61 		// Set random effect on the squares
 
    63 										
    66 										
    64 		// Main loop
 
    67 		// Main loop
 
    65 		this.loopCallback();
 
    68 		this.loopCallback();
 
    66 	};
 
    69 	};
 
    67 
    70 
    68 	this.init = function(canvasId)
 
    71 	this.init = function()
 
    69 	{
 
    72 	{
 
    70 		// Init canvas objects
 
    73 		// Init canvas objects
 
    71 		this.canvas = document.getElementById(canvasId);
 
    74 		this.canvas = document.getElementById(this.canvasId );
 
    72 		this.ctx = this.canvas.getContext('2d');
 
    75 		this.ctx = this.canvas.getContext('2d');
 
    73 		this.ctx.fillStyle = "#000000";
 
    76 		this.ctx.fillStyle = "#000000";
 
    74 		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
    77 		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
    75 	};
 
    78 	};
 
    76 
    79 
    77 	this.registerEffects = function()
 
    80 	this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight)
 
    78 	{
 
    81 	{
 
    79 		// No effect 
    82 		//incMosaic.imageData = incMosaic.ctx.getImageData(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY);
 
    80 		//-----------------------------------
 
    83 	};
 
    81 		//var noEffect = new IncSquareEffect_NoEffet()
 
    84 
    82 		//var fullEffect0 = new IncFullEffect(0, 0, noEffect);
 
    85 	this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight)
 
    83 		//this.effects.push(fullEffect0);
 
    86 	{
 
    84 
    87 		// Recalculate the size of the mosaic squares
 
    85 		// Create semi random effects
 
    88 		incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX);
 
    86 		for (var i = 0; i < 20; ++i) {
 
    89 		incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY);
 
    87 			var time1 = this.randomInt(3000, 10000);
 
    90 
    88 			var time2 = this.randomInt(3000, 10000);
 
    91 		//incMosaic.ctx.fillStyle = "#000000";
 
    89 			var c1 = this.randomInt(0, 128);
 
    92 		//incMosaic.ctx.fillRect(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY);	
    90 
    93 		//incMosaic.ctx.putImageData(incMosaic.imageData, 0, 0);
 
    91 			var effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
 
    94 	};
 
    92 			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
 
       
    93 			
       
    94 			var effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
 
       
    95 			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
 
       
    96 
       
    97 			var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
 
       
    98 			this.effects.push(fullEffect1);
 
       
    99 		}
 
       
   100 	}
 
       
   101 
    95 
   102 	this.setRandomPairImages = function()
 
    96 	this.setRandomPairImages = function()
 
   103 	{
 
    97 	{
 
   104 		this.imagesLoaded = 0;
 
    98 		this.imagesLoaded = 0;
 
   105 		var randInd = this.randomInt(0, this.pairUrl.length);
 
    99 		var randInd = this.randomInt(0, this.pairUrl.length);
 
   108 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2));
 
   102 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2));
 
   109 	};
 
   103 	};
 
   110 
   104 
   111 	this.setRandomSquareEffect = function()
 
   105 	this.setRandomSquareEffect = function()
 
   112 	{
 
   106 	{
 
   113 		for (var i = 0; i < this.countX; ++i) {
 
   107 		for (var i = 0; i < this.squareCountX; ++i) {
 
   114 			for (var j = 0; j < this.countY; ++j) {
 
   108 			for (var j = 0; j < this.squareCountY; ++j) {
 
   115 				var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();
 
   109 				var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();
 
   116 				fullEffect.x = i;
 
   110 				fullEffect.x = i;
 
   117 				fullEffect.y = j;
 
   111 				fullEffect.y = j;
 
   118 				this.squareEffects.push(fullEffect);				
   112 				this.squareEffects.push(fullEffect);				
   119 			}			
   113 			}			
   122 		
   116 		
   123 	this.loopCallback = function()
 
   117 	this.loopCallback = function()
 
   124 	{
 
   118 	{
 
   125 		var self = incMosaic;
 
   119 		var self = incMosaic;
 
   126 
   120 
   127 		if (self.imagesLoaded != 2) {
 
   121 		if (self.imagesLoaded == 2) {
 
   128 			// Images are not loaded yet
 
   122 			// Redraw
 
   129 			requestAnimationFrame(self.loopCallback);
 
   123 			self.redraw();
 
   130 			return;
 
   124 		}
 
   131 		}
 
   125 
   132 
   126 		// Loop
 
       
   127 		requestAnimationFrame(self.loopCallback);
 
       
   128 	};
 
       
   129 
       
   130 	this.redraw = function()
 
       
   131 	{
 
   133 		// Get time
 
   132 		// Get time
 
   134 		var time = new Date().getTime();
 
   133 		var time = new Date().getTime();
 
   135 
   134 
   136 		if (time < self.startTime + 3000) {
 
   135 		if (time < this.startTime + 3000) {
 
   137 			// Draw the first image
 
   136 			// Draw the first image
 
   138 			self.ctx.drawImage(self.pairImages[0], 0, 0);
 
   137 			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);
 
   139 			requestAnimationFrame(self.loopCallback);
 
       
   140 			return;
 
   138 			return;
 
   141 		}
 
   139 		}
 
   142 
   140 
   143 		// Clear canvas
 
       
   144 		//self.ctx.fillStyle = "#000000";
 
       
   145 		//self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);	
       
   146 
       
   147 		// Update effects
 
   141 		// Update effects
 
   148 		for (var i = 0; i < self.squareEffects.length; ++i) {
 
   142 		for (var i = 0; i < this.squareEffects.length; ++i) {			
   149 			
       
   150 			// Update
 
   143 			// Update
 
   151 			var fullEffect = self.squareEffects[i];
 
   144 			var fullEffect = this.squareEffects[i];
 
   152 			fullEffect.update(time);
 
   145 			fullEffect.update(time);
 
   153 
   146 
   154 			for (var j = 0; j < 2; ++j) {
 
   147 			for (var j = 0; j < 2; ++j) {
 
   155 				var effectInfo = fullEffect.effectInfos[j];
 
   148 				var effectInfo = fullEffect.effectInfos[j];
 
   156 				if (effectInfo !== null) {
 
   149 				if (effectInfo !== null) {
 
   157 					// Draw square
 
   150 					// Draw square
 
   158 					self.drawSquare(fullEffect, self.pairImages[j], effectInfo);	
   151 					this.drawSquare(fullEffect, this.pairImages[j], effectInfo);	
   159 				}
 
   152 				}
 
   160 			}
 
   153 			}
 
   161 		}
 
   154 		}		
   162 
   155 	};
 
   163 		// Loop
 
       
   164 		requestAnimationFrame(self.loopCallback);
 
       
   165 	};
 
       
   166 
       
   167 
   156 
   168 	this.drawSquare = function(fullEffect, image, effectInfo)
 
   157 	this.drawSquare = function(fullEffect, image, effectInfo)
 
   169 	{
 
   158 	{
 
   170 		// Compute square position
 
       
   171 		var posX = fullEffect.x * this.squareX;
 
       
   172 		var posY = fullEffect.y * this.squareY;
 
       
   173 
       
   174 		this.ctx.save();
 
   159 		this.ctx.save();
 
   175 
   160 
   176 		// Global alpha
 
   161 		// Global alpha
 
   177 		this.ctx.globalAlpha = effectInfo.alpha;	
   162 		this.ctx.globalAlpha = effectInfo.alpha;
 
       
   163 
       
   164 		// Compute src and dest square position
 
       
   165 		var srcPosX = fullEffect.x * this.srcSquareWidth;
 
       
   166 		var srcPosY = fullEffect.y * this.srcSquareHeight;		
       
   167 		var destPosX = fullEffect.x * this.squareWidth;
 
       
   168 		var destPosY = fullEffect.y * this.squareHeight;		
   178 
   169 
   179 		// Draw colored rectangle
 
   170 		// Draw colored rectangle
 
   180 		this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")";
 
   171 		this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")";
 
   181 		this.ctx.fillRect(posX, posY, this.squareX, this.squareY);
 
   172 		this.ctx.fillRect(destPosX, destPosY, this.squareWidth, this.squareHeight);
 
   182 
   173 
   183 		// Draw image
 
   174 		// Draw image
 
   184 		this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
 
   175 		this.ctx.drawImage(image, srcPosX, srcPosY, this.srcSquareWidth, this.srcSquareHeight, destPosX, destPosY, this.squareWidth, this.squareHeight);
 
   185 
   176 
   186 		this.ctx.restore();
 
   177 		this.ctx.restore();
 
   187 	};
 
   178 	};
 
   188 
   179 
       
   180 	this.registerEffects = function()
 
       
   181 	{
 
       
   182 		var count = 7;
 
       
   183 		var color = 64;
 
       
   184 
       
   185 		// Create semi random effects
 
       
   186 		var range1 = 3000;
 
       
   187 		var range2 = 7000;
 
       
   188 
       
   189 		var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1;
 
       
   190 		for (i = 0; i < count; ++i) {
 
       
   191 			time1 = this.randomInt(range1, range2);
 
       
   192 			time2 = this.randomInt(range1, range2);
 
       
   193 			c1 = this.randomInt(0, color);
 
       
   194 
       
   195 			effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
 
       
   196 			effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
 
       
   197 			
       
   198 			effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
 
       
   199 			effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
 
       
   200 
       
   201 			fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
 
       
   202 			this.effects.push(fullEffect1);
 
       
   203 		}
 
       
   204 
       
   205 		// Create semi random effects
 
       
   206 		range1 = 10000;
 
       
   207 		range2 = 25000;
 
       
   208 		for (i = 0; i < count; ++i) {
 
       
   209 			time1 = this.randomInt(range1, range2);
 
       
   210 			time2 = this.randomInt(range1, range2);
 
       
   211 			c1 = this.randomInt(0, color);
 
       
   212 
       
   213 			effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
 
       
   214 			effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
 
       
   215 			
       
   216 			effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
 
       
   217 			effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
 
       
   218 
       
   219 			fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
 
       
   220 			this.effects.push(fullEffect1);
 
       
   221 		}
 
       
   222 
       
   223 		// Create semi random effects
 
       
   224 		range1 = 25000;
 
       
   225 		range2 = 30000;
 
       
   226 		for (i = 0; i < count; ++i) {
 
       
   227 			time1 = this.randomInt(range1, range2);
 
       
   228 			time2 = this.randomInt(range1, range2);
 
       
   229 			c1 = this.randomInt(0, color);
 
       
   230 
       
   231 			effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
 
       
   232 			effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
 
       
   233 			
       
   234 			effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
 
       
   235 			effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
 
       
   236 
       
   237 			fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
 
       
   238 			this.effects.push(fullEffect1);
 
       
   239 		}
 
       
   240 	};	
       
   241 
   189 	// --------------------------------------------------------------------------------------------------------------------
 
   242 	// --------------------------------------------------------------------------------------------------------------------
 
   190 	// Tools
 
   243 	// Tools
 
   191 	// --------------------------------------------------------------------------------------------------------------------
 
   244 	// --------------------------------------------------------------------------------------------------------------------
 
   192 
   245 
   193 	this.randomInt = function(min, max)
 
   246 	this.randomInt = function(min, max)
 
   200 		return Math.random() * (max - min) + min;
 
   253 		return Math.random() * (max - min) + min;
 
   201 	};
 
   254 	};
 
   202 
   255 
   203 	this.getImageFromUrl = function(url)
 
   256 	this.getImageFromUrl = function(url)
 
   204 	{
 
   257 	{
 
       
   258 		var self = incMosaic;
 
   205 		var image = new Image();
 
   259 		var image = new Image();
 
   206 		image.onload = function() {
 
   260 		image.onload = function() {
 
   207 			incMosaic.imagesLoaded += 1;
 
   261 			// When the first image is loaded we can get the image dimention and init the autoresize of the canvas
 
       
   262 			if (self.imagesLoaded === 0) {
 
       
   263 				// Set some image size related vars
 
       
   264 				self.imageWidth = image.width;
 
       
   265 				self.imageHeight = image.height;
 
       
   266 				self.srcSquareWidth = image.width / self.squareCountX;
 
       
   267 				self.srcSquareHeight = image.height / self.squareCountY;
 
       
   268 
       
   269 				// Call the resize object
 
       
   270 				if (incResize !== undefined) {
 
       
   271 					incResize.resizeElements();
 
       
   272 				}
 
       
   273 			}			
       
   274 			self.imagesLoaded += 1;
 
   208 		};
 
   275 		};
 
   209 		image.src = url;
 
   276 		image.src = url;
 
   210 		return image;
 
   277 		return image;
 
   211 	};
 
   278 	};
 
   212 }
 
   279 }
 
   274 		}
 
   341 		}
 
   275 		return anim.value;
 
   342 		return anim.value;
 
   276 	};	
   343 	};	
   277 }
 
   344 }
 
   278 
   345 
   279 function IncSquareEffect_NoEffet()
 
       
   280 {
 
       
   281 	this.update = function(time)
 
       
   282 	{
 
       
   283 		return incMosaic.noEffectinfo;
 
       
   284 	}
 
       
   285 }
 
       
   286 
       
   287 function IncSquareEffect_Alpha(effectParms, tweenColorFunc, tweenAlphaFunc, waitTime)
 
   346 function IncSquareEffect_Alpha(effectParms, tweenColorFunc, tweenAlphaFunc, waitTime)
 
   288 {
 
   347 {
 
   289 	// Effect parameters
 
   348 	// Effect parameters
 
   290 	this.effectParms = effectParms;
 
   349 	this.effectParms = effectParms;
 
   291 
   350 
   333 		return new IncFullEffect(this.effects[0], this.effects[1], this.totalTime[0], this.totalTime[1]);
 
   392 		return new IncFullEffect(this.effects[0], this.effects[1], this.totalTime[0], this.totalTime[1]);
 
   334 	};
 
   393 	};
 
   335 
   394 
   336 	this.update = function(time)
 
   395 	this.update = function(time)
 
   337 	{
 
   396 	{
 
   338 		if (this.startTime[0] == 0) {
 
   397 		if (this.startTime[0] === 0) {
 
   339 			this.startTime[0] = time;
 
   398 			this.startTime[0] = time;
 
   340 			this.startTime[1] = time;
 
   399 			this.startTime[1] = time;
 
   341 			return;
 
   400 			return;
 
   342 		}
 
   401 		}
 
   343 
   402
theend