--- a/web/static/res/js/incmosaic.js Fri Nov 09 18:34:47 2012 +0100
+++ b/web/static/res/js/incmosaic.js Tue Nov 13 17:59:26 2012 +0100
@@ -25,6 +25,9 @@
this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
this.noEffectinfo.alpha = 1;
+ // Debug
+ this.lastTime;
+
// --------------------------------------------------------------------------------------------------------------------
// Functions
// --------------------------------------------------------------------------------------------------------------------
@@ -56,7 +59,7 @@
this.setRandomSquareEffect();
// Main loop
- this.loopCallback();
+ this.loopCallback2();
};
this.init = function(canvasId)
@@ -73,29 +76,19 @@
// No effect
//-----------------------------------
var noEffect = new IncSquareEffect_NoEffet()
- var fullEffect0 = new IncFullEffect(0, 0, noEffect);
- this.effects.push(fullEffect0);
+ var fullEffect0 = new IncFullEffect(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);
- }
+ 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);
- // 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);
- this.effects.push(fullEffect1);
+ 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);
+
+ this.effects.push(new IncFullEffect(effect1, effect2));
}
}
@@ -110,14 +103,36 @@
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[this.randomInt(0, this.effects.length)].copy();
+ var fullEffect = this.effects[0].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()
@@ -146,15 +161,49 @@
var effect = fullEffect.effects[j];
if (effect !== undefined) {
// Draw square
- self.drawSquare(fullEffect, self.pairImages[j], effect, time);
+ self.drawSquare(fullEffect, self.pairImages[j], effect, time);
}
}
}
+ //console.log(time - this.lastTime);
+ this.lastTime = time;
+
// Loop
requestAnimationFrame(self.loopCallback);
};
+ this.loopCallback2 = function()
+ {
+ 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)
{
@@ -184,6 +233,50 @@
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
// --------------------------------------------------------------------------------------------------------------------
@@ -307,7 +400,12 @@
fullEffect.startTime = time;
}
- var elapsedTime = time - fullEffect.startTime;
+ if ((time - fullEffect.startTime) > this.effectParms.time) {
+ return null;
+ }
+
+ var elapsedTime = this.waitTime ? (time - fullEffect.waitTime) : (time - fullEffect.startTime);
+ console.log(elapsedTime);
var info = new IncEffectInfo();
// Compute new color
@@ -324,11 +422,11 @@
};
}
-function IncFullEffect(x, y, effect1, effect2)
+function IncFullEffect(effect1, effect2)
{
// Position
- this.x = x;
- this.y = y;
+ this.x = 0;
+ this.y = 0;
// Effect
this.effects = [effect1, effect2];
@@ -338,7 +436,7 @@
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]);
};
}
