--- a/web/static/res/js/incmosaic.js Thu Nov 15 00:31:10 2012 +0100
+++ b/web/static/res/js/incmosaic.js Thu Nov 15 00:33:25 2012 +0100
@@ -21,6 +21,9 @@
this.effects = [];
this.squareEffects = [];
+ // Time
+ this.startTime;
+
this.noEffectinfo = new IncEffectInfo();
this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
this.noEffectinfo.alpha = 1;
@@ -54,6 +57,9 @@
// Set random effect on the squares
this.setRandomSquareEffect();
+
+ // Time
+ this.startTime = new Date().getTime();
// Main loop
this.loopCallback();
@@ -72,29 +78,23 @@
{
// No effect
//-----------------------------------
- var noEffect = new IncSquareEffect_NoEffet()
- var fullEffect0 = new IncFullEffect(0, 0, noEffect);
- this.effects.push(fullEffect0);
+ //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), 8000);
- var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);
- var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);
- var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);
- var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);
- this.effects.push(fullEffect1);
- }
+ // 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);
- // Alpha 2
- //-----------------------------------
- {
- var effectParam1 = new IncEffectParams(new IncColor(32, 32, 32, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000);
- var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);
- var effectParam2 = new IncEffectParams(new IncColor(32, 32, 32, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);
- var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);
- var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);
+ 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);
+
+ var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
this.effects.push(fullEffect1);
}
}
@@ -130,23 +130,32 @@
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);
}
}
}
@@ -156,15 +165,8 @@
};
- this.drawSquare = function(fullEffect, image, effect, time)
+ this.drawSquare = function(fullEffect, image, effectInfo)
{
- // 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;
@@ -244,7 +246,7 @@
this.alpha;
}
-function IncEffectParams(color, colorAnim, alpha, alphaAnim, time)
+function IncEffectParams(color, colorAnim, alpha, alphaAnim)
{
// Color
this.color = color;
@@ -254,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);
@@ -279,7 +278,7 @@
function IncSquareEffect_NoEffet()
{
- this.update = function(fullEffect, time)
+ this.update = function(time)
{
return incMosaic.noEffectinfo;
}
@@ -295,19 +294,10 @@
this.tweenAlphaFunc = tweenAlphaFunc;
// Time
- this.waitTime = (waitTime!==undefined) ? (new Date().getTime() + waitTime) : 0;
+ this.waitTime = (waitTime!==undefined) ? waitTime : 0;
- this.update = function(fullEffect, time)
+ this.update = function(elapsedTime)
{
- if (this.waitTime > time) {
- return null;
- }
-
- if (fullEffect.startTime == 0) {
- fullEffect.startTime = time;
- }
-
- var elapsedTime = time - fullEffect.startTime;
var info = new IncEffectInfo();
// Compute new color
@@ -324,21 +314,40 @@
};
}
-function IncFullEffect(x, y, effect1, effect2)
+function IncFullEffect(effect1, effect2, totalTime1, totalTime2)
{
// Position
- this.x = x;
- this.y = y;
+ this.x = 0;
+ this.y = 0;
// 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.x, this.y, this.effects[0], this.effects.length > 1 ? this.effects[1] : undefined);
+ 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);
+ }
+ }
};
}
