--- a/web/static/res/js/incmosaic.js Tue Nov 13 17:59:26 2012 +0100
+++ b/web/static/res/js/incmosaic.js Tue Nov 13 22:18:07 2012 +0100
@@ -21,13 +21,13 @@
this.effects = [];
this.squareEffects = [];
+ // Time
+ this.startTime;
+
this.noEffectinfo = new IncEffectInfo();
this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
this.noEffectinfo.alpha = 1;
- // Debug
- this.lastTime;
-
// --------------------------------------------------------------------------------------------------------------------
// Functions
// --------------------------------------------------------------------------------------------------------------------
@@ -57,9 +57,12 @@
// Set random effect on the squares
this.setRandomSquareEffect();
+
+ // Time
+ this.startTime = new Date().getTime();
// Main loop
- this.loopCallback2();
+ this.loopCallback();
};
this.init = function(canvasId)
@@ -75,20 +78,24 @@
{
// No effect
//-----------------------------------
- var noEffect = new IncSquareEffect_NoEffet()
- var fullEffect0 = new IncFullEffect(noEffect);
+ //var noEffect = new IncSquareEffect_NoEffet()
+ //var fullEffect0 = new IncFullEffect(0, 0, noEffect);
//this.effects.push(fullEffect0);
- // Alpha
- //-----------------------------------
- {
- var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 5000);
- var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadInOut, createjs.Ease.quadInOut);
+ // Create semi random effects
+ for (var i = 0; i < 20; ++i) {
+ var time1 = this.randomInt(3000, 10000);
+ var time2 = this.randomInt(3000, 10000);
+ var c1 = this.randomInt(0, 128);
- var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 7000), 8000);
- var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadInOut, createjs.Ease.quadInOut, 5000);
+ var effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
+ var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
+
+ var effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
+ var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
- this.effects.push(new IncFullEffect(effect1, effect2));
+ var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
+ this.effects.push(fullEffect1);
}
}
@@ -103,36 +110,14 @@
this.setRandomSquareEffect = function()
{
- /*
for (var i = 0; i < this.countX; ++i) {
for (var j = 0; j < this.countY; ++j) {
- //var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();
- var fullEffect = this.effects[0].copy();
+ var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();
fullEffect.x = i;
fullEffect.y = j;
this.squareEffects.push(fullEffect);
}
- }*/
- {
- var e1 = this.effects[0].copy();
- e1.x = 2;
- e1.y = 1;
- this.squareEffects.push(e1);
}
- /*
- {
- var e1 = this.effects[1].copy();
- e1.x = 3;
- e1.y = 0;
- this.squareEffects.push(e1);
- }
- {
- var e1 = this.effects[2].copy();
- e1.x = 2;
- e1.y = 1;
- this.squareEffects.push(e1);
- }
- */
};
this.loopCallback = function()
@@ -145,75 +130,43 @@
return;
}
- // Clear canvas
- self.ctx.fillStyle = "#ffffff";
- self.ctx.fillStyle = "#000000";
- self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
-
// Get time
var time = new Date().getTime();
- // Update effect
+ if (time < self.startTime + 3000) {
+ // Draw the first image
+ self.ctx.drawImage(self.pairImages[0], 0, 0);
+ requestAnimationFrame(self.loopCallback);
+ return;
+ }
+
+ // Clear canvas
+ //self.ctx.fillStyle = "#000000";
+ //self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
+
+ // Update effects
for (var i = 0; i < self.squareEffects.length; ++i) {
+
+ // Update
var fullEffect = self.squareEffects[i];
+ fullEffect.update(time);
for (var j = 0; j < 2; ++j) {
- var effect = fullEffect.effects[j];
- if (effect !== undefined) {
+ var effectInfo = fullEffect.effectInfos[j];
+ if (effectInfo !== null) {
// Draw square
- self.drawSquare(fullEffect, self.pairImages[j], effect, time);
+ self.drawSquare(fullEffect, self.pairImages[j], effectInfo);
}
}
}
- //console.log(time - this.lastTime);
- this.lastTime = time;
-
// Loop
requestAnimationFrame(self.loopCallback);
};
- this.loopCallback2 = function()
+
+ this.drawSquare = function(fullEffect, image, effectInfo)
{
- var self = incMosaic;
-
- if (self.imagesLoaded != 2) {
- // Images are not loaded yet
- requestAnimationFrame(self.loopCallback2);
- return;
- }
-
- // Clear canvas
- self.ctx.fillStyle = "#ffffff";
- self.ctx.fillStyle = "#000000";
- self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
-
- // Get time
- var time = new Date().getTime();
-
- // Update effect
- for (var i = 0; i < self.squareEffects.length; ++i) {
- // Draw square
- var fullEffect = self.squareEffects[i];
- self.drawSquare2(fullEffect, time);
- }
-
- //console.log(time - this.lastTime);
- this.lastTime = time;
-
- // Loop
- requestAnimationFrame(self.loopCallback2);
- };
-
- this.drawSquare = function(fullEffect, image, effect, time)
- {
- // Update effect
- var effectInfo = effect.update(fullEffect, time);
-
- if (effectInfo === null) {
- return;
- }
-
// Compute square position
var posX = fullEffect.x * this.squareX;
var posY = fullEffect.y * this.squareY;
@@ -233,50 +186,6 @@
this.ctx.restore();
};
- this.drawSquare2 = function(fullEffect, time)
- {
- // Update effect
- var effectInfo1 = fullEffect.effects[0].update(fullEffect, time);
- var effectInfo2 = (fullEffect.effects[1] !== undefined) ? fullEffect.effects[1].update(fullEffect, time) : null;
-
- // Compute square position
- var posX = fullEffect.x * this.squareX;
- var posY = fullEffect.y * this.squareY;
-
- this.ctx.save();
-
- if (effectInfo1 !== null) {
- this.ctx.globalAlpha = effectInfo1.alpha;
- this.ctx.drawImage(this.pairImages[0], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
-
- if (effectInfo2 !== null) {
- var image1 = this.ctx.getImageData(posX, posY, this.squareX, this.squareY);
- var imageData1 = image1.data;
-
- this.ctx.globalAlpha = effectInfo2.alpha;
- this.ctx.drawImage(this.pairImages[1], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
- var image2 = this.ctx.getImageData(posX, posY, this.squareX, this.squareY);
- var imageData2 = image2.data;
-
- var pixels = 4 * this.squareX * this.squareY;
- while (pixels--) {
- imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
- //imageData1[pixels] = imageData1[pixels] * effectInfo1.alpha + imageData2[pixels] * effectInfo1.alpha;;
- }
-
- this.ctx.putImageData(image1, posX, posY);
- }
-
-
- } else if (effectInfo2 !== null) {
- console.log(effectInfo2.alpha);
- this.ctx.globalAlpha = effectInfo2.alpha;
- this.ctx.drawImage(this.pairImages[1], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
- }
-
- this.ctx.restore();
- };
-
// --------------------------------------------------------------------------------------------------------------------
// Tools
// --------------------------------------------------------------------------------------------------------------------
@@ -337,7 +246,7 @@
this.alpha;
}
-function IncEffectParams(color, colorAnim, alpha, alphaAnim, time)
+function IncEffectParams(color, colorAnim, alpha, alphaAnim)
{
// Color
this.color = color;
@@ -347,9 +256,6 @@
this.alpha = alpha;
this.alphaAnim = alphaAnim;
- // Time
- this.time = time;
-
this.computeColorAnimValue = function(elapsedTime, easeFunc)
{
return this.computeAnimValue(this.colorAnim, elapsedTime, easeFunc);
@@ -372,7 +278,7 @@
function IncSquareEffect_NoEffet()
{
- this.update = function(fullEffect, time)
+ this.update = function(time)
{
return incMosaic.noEffectinfo;
}
@@ -388,24 +294,10 @@
this.tweenAlphaFunc = tweenAlphaFunc;
// Time
- this.waitTime = (waitTime!==undefined) ? (new Date().getTime() + waitTime) : 0;
-
- this.update = function(fullEffect, time)
- {
- if (this.waitTime > time) {
- return null;
- }
+ this.waitTime = (waitTime!==undefined) ? waitTime : 0;
- if (fullEffect.startTime == 0) {
- fullEffect.startTime = time;
- }
-
- if ((time - fullEffect.startTime) > this.effectParms.time) {
- return null;
- }
-
- var elapsedTime = this.waitTime ? (time - fullEffect.waitTime) : (time - fullEffect.startTime);
- console.log(elapsedTime);
+ this.update = function(elapsedTime)
+ {
var info = new IncEffectInfo();
// Compute new color
@@ -422,7 +314,7 @@
};
}
-function IncFullEffect(effect1, effect2)
+function IncFullEffect(effect1, effect2, totalTime1, totalTime2)
{
// Position
this.x = 0;
@@ -430,13 +322,32 @@
// Effect
this.effects = [effect1, effect2];
+ this.effectInfos = [null, null];
// Time
- this.startTime = 0;
+ this.startTime = [0, 0];
+ this.totalTime = [totalTime1, totalTime2];
this.copy = function()
{
- return new IncFullEffect(this.effects[0], this.effects[1]);
+ return new IncFullEffect(this.effects[0], this.effects[1], this.totalTime[0], this.totalTime[1]);
+ };
+
+ this.update = function(time)
+ {
+ if (this.startTime[0] == 0) {
+ this.startTime[0] = time;
+ this.startTime[1] = time;
+ return;
+ }
+
+ 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) {
+ this.effectInfos[i] = this.effects[i].update(time - waitTime);
+ }
+ }
};
}