--- a/web/static/res/js/incmosaic.js Tue Dec 11 13:13:44 2012 +0100
+++ b/web/static/res/js/incmosaic.js Tue Dec 11 17:39:04 2012 +0100
@@ -19,6 +19,9 @@
this.imageHeight;
// Effect
+ this.waitStartEffectTime = 3000;
+ this.waitStartEffectGo;
+ this.effectSpeed;
this.squareCountX;
this.squareCountY;
this.srcSquareWidth;
@@ -27,6 +30,8 @@
this.squareHeight;
this.effects = [];
this.squareEffects = [];
+ this.loop;
+ this.endEffecFunc;
// Time
this.startTime;
@@ -40,15 +45,25 @@
this.imageUrls.push(url);
};
- this.start = function(canvasId, squareCountX, squareCountY)
+ this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc)
{
// Canvas ID
this.canvasId = canvasId;
+ // Speed
+ this.effectSpeed = 1 / effectSpeed;
+
// Set square count
this.squareCountX = squareCountX;
this.squareCountY = (squareCountY === undefined) ? squareCountX: squareCountY;
+ // End effect behavior
+ this.loop = loop;
+ this.endEffecFunc = endEffecFunc;
+
+ // Does the effect wait for go
+ this.waitStartEffectGo = waitStartEffectGo;
+
// Init the canvas objects
this.init();
@@ -56,13 +71,13 @@
this.registerEffects();
// Set a new effect transition between 2 images
- this.SetNewEffect();
+ this.setNewEffect();
// Main loop
this.loopCallback();
};
- this.SetNewEffect = function()
+ this.setNewEffect = function()
{
// Set a random pair images
this.setRandomPairImages();
@@ -72,7 +87,12 @@
// Time
this.startTime = new Date().getTime();
- }
+ };
+
+ this.goEffect = function()
+ {
+ this.waitStartEffectGo = false;
+ };
this.init = function()
{
@@ -165,7 +185,8 @@
// Get time
var time = new Date().getTime();
- if (time < this.startTime + 3000) {
+ var timeToWait = (this.startTime + this.waitStartEffectTime)*this.effectSpeed;
+ if (time < timeToWait || this.waitStartEffectGo) {
// Draw the first image
this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY);
return;
@@ -188,8 +209,13 @@
}
if (!effectsContinue) {
- console.log("Effect finished !!!!!");
- this.SetNewEffect();
+ if (this.loop) {
+ // The effect loop
+ this.setNewEffect();
+ } else if (this.endEffecFunc != undefined && this.endEffecFunc != null) {
+ // Call the end callback
+ this.endEffecFunc();
+ }
}
};
@@ -220,63 +246,41 @@
{
var count = 7;
var color = 64;
+ var speed = this.effectSpeed;
// Create semi random effects
- var range1 = 3000;
- var range2 = 5000;
-
- var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1;
- for (i = 0; i < count; ++i) {
- time1 = this.randomInt(range1, range2);
- time2 = this.randomInt(range1, range2);
- c1 = this.randomInt(0, color);
+ var range1 = 3000 * speed;
+ var range2 = 5000 * speed;
+ this.registerEffectsTime(count, color, range1, range2);
- effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
- effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
-
- effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
- effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
-
- fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
- this.effects.push(fullEffect1);
- }
+ // Create semi random effects
+ range1 = 7000 * speed;
+ range2 = 15000 * speed;
+ this.registerEffectsTime(count, color, range1, range2);
// Create semi random effects
- range1 = 7000;
- range2 = 15000;
- for (i = 0; i < count; ++i) {
- time1 = this.randomInt(range1, range2);
- time2 = this.randomInt(range1, range2);
- c1 = this.randomInt(0, color);
+ range1 = 17000 * speed;
+ range2 = 23000 * speed;
+ this.registerEffectsTime(count, color, range1, range2);
+ };
- effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
- effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
+ this.registerEffectsTime = function(count, color, range1, range2)
+ {
+ for (var i = 0; i < count; ++i) {
+ var time1 = this.randomInt(range1, range2);
+ var time2 = this.randomInt(range1, range2);
+ var c1 = this.randomInt(0, color);
+
+ 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);
- effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
- effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
+ 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);
- fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
+ var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
this.effects.push(fullEffect1);
}
-
- // Create semi random effects
- range1 = 17000;
- range2 = 23000;
- for (i = 0; i < count; ++i) {
- time1 = this.randomInt(range1, range2);
- time2 = this.randomInt(range1, range2);
- c1 = this.randomInt(0, color);
-
- effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
- effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
-
- effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
- effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
-
- fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
- this.effects.push(fullEffect1);
- }
- };
+ };
// --------------------------------------------------------------------------------------------------------------------
// Tools