web/static/res/js/incmosaic.js
changeset 39 6605de5fe0bd
parent 38 cdbb56b876c9
child 42 01415303372e
equal deleted inserted replaced
38:cdbb56b876c9 39:6605de5fe0bd
     9 	this.canvas;
     9 	this.canvas;
    10 	this.ctx;
    10 	this.ctx;
    11 	this.imageData;
    11 	this.imageData;
    12 
    12 
    13 	/// Images
    13 	/// Images
    14 	this.pairUrl = [];
    14 	this.imageUrls = [];
       
    15 	this.listeUrls = [];	// The images list to blend
    15 	this.pairImages = [];
    16 	this.pairImages = [];
    16 	this.imagesLoaded = 0;
    17 	this.imagesLoaded = 0;
    17 	this.imageWidth;
    18 	this.imageWidth;
    18 	this.imageHeight;
    19 	this.imageHeight;
    19 
    20 
    32 
    33 
    33 	// --------------------------------------------------------------------------------------------------------------------
    34 	// --------------------------------------------------------------------------------------------------------------------
    34 	// Functions
    35 	// Functions
    35 	// --------------------------------------------------------------------------------------------------------------------
    36 	// --------------------------------------------------------------------------------------------------------------------
    36 
    37 
    37 	this.addPairImages = function(url1, url2)
    38 	this.addImageUrl = function(url)
    38 	{
    39 	{
    39 		var urls = new IncPairUrl(url1, url2);
    40 		this.imageUrls.push(url);
    40 		this.pairUrl.push(urls);
       
    41 	};
    41 	};
    42 
    42 
    43 	this.start = function(canvasId, squareCountX, squareCountY)
    43 	this.start = function(canvasId, squareCountX, squareCountY)
    44 	{
    44 	{
    45 		// Canvas ID
    45 		// Canvas ID
    92 		// Recalculate the size of the mosaic squares
    92 		// Recalculate the size of the mosaic squares
    93 		incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX);
    93 		incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX);
    94 		incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY);
    94 		incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY);
    95 	};
    95 	};
    96 
    96 
       
    97 	this.fillListUrl = function()
       
    98 	{
       
    99 		var urls = [];
       
   100 		for (var i = 1; i < this.imageUrls.length; ++i) {
       
   101 			urls.push(this.imageUrls[i]);
       
   102 		}
       
   103 
       
   104 		// Set random url
       
   105 
       
   106 		// The first images is always the first in this array 
       
   107 		this.listeUrls.push(this.imageUrls[0]);
       
   108 
       
   109 		while (urls.length > 0) {
       
   110 			var randInd = this.randomInt(0, urls.length);
       
   111 			this.listeUrls.push(urls[randInd]);
       
   112 			urls.remove(randInd);
       
   113 		}
       
   114 	};
       
   115 
    97 	this.setRandomPairImages = function()
   116 	this.setRandomPairImages = function()
    98 	{
   117 	{
    99 		this.imagesLoaded = 0;
   118 		if (this.listeUrls.length == 0) {
   100 		var randInd = this.randomInt(0, this.pairUrl.length);
   119 			this.fillListUrl();
   101 		var pairUrl = this.pairUrl[randInd];
   120 		}
   102 
   121 
   103 		this.pairImages.length = 0;
   122 		if (this.pairImages.length == 0) {
   104 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl1));
   123 			this.imagesLoaded = 0;
   105 		this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2));
   124 			this.pairImages.push(this.getImageFromUrl(this.listeUrls[0]));
       
   125 			this.pairImages.push(this.getImageFromUrl(this.listeUrls[1]));
       
   126 			this.listeUrls.remove(0);
       
   127 		} else {
       
   128 			this.imagesLoaded = 1;
       
   129 			this.pairImages[0] = this.pairImages[1]; // Swap
       
   130 			this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0])
       
   131 		}
       
   132 		this.listeUrls.remove(0);
       
   133 
       
   134 		// Todo preload the next image
   106 	};
   135 	};
   107 
   136 
   108 	this.setRandomSquareEffect = function()
   137 	this.setRandomSquareEffect = function()
   109 	{
   138 	{
   110 		this.squareEffects.length = 0;
   139 		this.squareEffects.length = 0;
   286 		image.src = url;
   315 		image.src = url;
   287 		return image;
   316 		return image;
   288 	};
   317 	};
   289 }
   318 }
   290 
   319 
   291 function IncPairUrl(url1, url2)
       
   292 {
       
   293 	this.imageUrl1 = url1;
       
   294 	this.imageUrl2 = url2;
       
   295 }
       
   296 
       
   297 // --------------------------------------------------------------------------------------------------------------------
   320 // --------------------------------------------------------------------------------------------------------------------
   298 // Effects
   321 // Effects
   299 // --------------------------------------------------------------------------------------------------------------------
   322 // --------------------------------------------------------------------------------------------------------------------
   300 
   323 
   301 function IncColor(r, v, b, a)
   324 function IncColor(r, v, b, a)
   441 		function(callback, element){ 			// Fallback function
   464 		function(callback, element){ 			// Fallback function
   442 		   window.setTimeout(callback, 20);                
   465 		   window.setTimeout(callback, 20);                
   443 		};    
   466 		};    
   444 })();
   467 })();
   445 
   468 
       
   469 Array.prototype.remove = function(from, to) {
       
   470   var rest = this.slice((to || from) + 1 || this.length);
       
   471   this.length = from < 0 ? this.length + from : from;
       
   472   return this.push.apply(this, rest);
       
   473 };
       
   474 
   446 var incMosaic = new IncMosaic();
   475 var incMosaic = new IncMosaic();
   447 
   476