diff -r 1f10a9688c1b -r cdbb56b876c9 web/static/res/js/incmosaic.js --- a/web/static/res/js/incmosaic.js Mon Dec 10 19:48:28 2012 +0100 +++ b/web/static/res/js/incmosaic.js Mon Dec 10 20:55:18 2012 +0100 @@ -55,6 +55,15 @@ // Register effects this.registerEffects(); + // Set a new effect transition between 2 images + this.SetNewEffect(); + + // Main loop + this.loopCallback(); + }; + + this.SetNewEffect = function() + { // Set a random pair images this.setRandomPairImages(); @@ -62,11 +71,8 @@ this.setRandomSquareEffect(); // Time - this.startTime = new Date().getTime(); - - // Main loop - this.loopCallback(); - }; + this.startTime = new Date().getTime(); + } this.init = function() { @@ -79,7 +85,6 @@ this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight) { - //incMosaic.imageData = incMosaic.ctx.getImageData(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY); }; this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight) @@ -87,10 +92,6 @@ // Recalculate the size of the mosaic squares incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX); incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY); - - //incMosaic.ctx.fillStyle = "#000000"; - //incMosaic.ctx.fillRect(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY); - //incMosaic.ctx.putImageData(incMosaic.imageData, 0, 0); }; this.setRandomPairImages = function() @@ -98,12 +99,15 @@ this.imagesLoaded = 0; var randInd = this.randomInt(0, this.pairUrl.length); var pairUrl = this.pairUrl[randInd]; + + this.pairImages.length = 0; this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl1)); this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2)); }; this.setRandomSquareEffect = function() { + this.squareEffects.length = 0; for (var i = 0; i < this.squareCountX; ++i) { for (var j = 0; j < this.squareCountY; ++j) { var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); @@ -139,10 +143,11 @@ } // Update effects + var effectsContinue = false; for (var i = 0; i < this.squareEffects.length; ++i) { // Update var fullEffect = this.squareEffects[i]; - fullEffect.update(time); + effectsContinue = fullEffect.update(time) || effectsContinue; for (var j = 0; j < 2; ++j) { var effectInfo = fullEffect.effectInfos[j]; @@ -151,7 +156,12 @@ this.drawSquare(fullEffect, this.pairImages[j], effectInfo); } } - } + } + + if (!effectsContinue) { + console.log("Effect finished !!!!!"); + this.SetNewEffect(); + } }; this.drawSquare = function(fullEffect, image, effectInfo) @@ -184,7 +194,7 @@ // Create semi random effects var range1 = 3000; - var range2 = 7000; + var range2 = 5000; var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1; for (i = 0; i < count; ++i) { @@ -203,8 +213,8 @@ } // Create semi random effects - range1 = 10000; - range2 = 25000; + range1 = 7000; + range2 = 15000; for (i = 0; i < count; ++i) { time1 = this.randomInt(range1, range2); time2 = this.randomInt(range1, range2); @@ -221,8 +231,8 @@ } // Create semi random effects - range1 = 25000; - range2 = 30000; + range1 = 17000; + range2 = 23000; for (i = 0; i < count; ++i) { time1 = this.randomInt(range1, range2); time2 = this.randomInt(range1, range2); @@ -397,16 +407,24 @@ if (this.startTime[0] === 0) { this.startTime[0] = time; this.startTime[1] = time; - return; + return true; } 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) { + var updateEffect = time < this.totalTime[i] + waitTime; + if (time > waitTime && updateEffect) { this.effectInfos[i] = this.effects[i].update(time - waitTime); } + + if (i == 1 && !updateEffect) { + // The effect is done + return false; + } } + + return true; }; }