--- 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;
};
}