--- a/web/static/res/js/incmosaic.js Fri Nov 16 12:53:58 2012 +0100
+++ b/web/static/res/js/incmosaic.js Sun Dec 09 19:59:03 2012 +0100
@@ -5,29 +5,31 @@
// --------------------------------------------------------------------------------------------------------------------
// Canvas
+ this.canvasId;
this.canvas;
- this.context;
+ this.ctx;
+ this.imageData;
/// Images
this.pairUrl = [];
this.pairImages = [];
this.imagesLoaded = 0;
+ this.imageWidth;
+ this.imageHeight;
// Effect
- this.countX;
- this.countY;
- this.squareX;
- this.squareY;
+ this.squareCountX;
+ this.squareCountY;
+ this.srcSquareWidth;
+ this.srcSquareHeight;
+ this.squareWidth;
+ this.squareHeight;
this.effects = [];
this.squareEffects = [];
// Time
this.startTime;
- this.noEffectinfo = new IncEffectInfo();
- this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
- this.noEffectinfo.alpha = 1;
-
// --------------------------------------------------------------------------------------------------------------------
// Functions
// --------------------------------------------------------------------------------------------------------------------
@@ -38,20 +40,21 @@
this.pairUrl.push(urls);
};
- this.start = function(canvasId, countX, countY)
+ this.start = function(canvasId, squareCountX, squareCountY)
{
+ // Canvas ID
+ this.canvasId = canvasId;
+
+ // Set square count
+ this.squareCountX = squareCountX;
+ this.squareCountY = (squareCountY === undefined) ? squareCountX: squareCountY;
+
// Init the canvas objects
- this.init(canvasId);
+ this.init();
// Register effects
this.registerEffects();
- // Count, square`
- this.countX = countX;
- this.countY = (countY === undefined) ? countX: countY;
- this.squareX = Math.floor(this.canvas.width / this.countX);
- this.squareY = Math.floor(this.canvas.height / this.countY);
-
// Set a random pair images
this.setRandomPairImages();
@@ -65,39 +68,30 @@
this.loopCallback();
};
- this.init = function(canvasId)
+ this.init = function()
{
// Init canvas objects
- this.canvas = document.getElementById(canvasId);
+ this.canvas = document.getElementById(this.canvasId );
this.ctx = this.canvas.getContext('2d');
this.ctx.fillStyle = "#000000";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
};
- this.registerEffects = function()
+ this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight)
{
- // No effect
- //-----------------------------------
- //var noEffect = new IncSquareEffect_NoEffet()
- //var fullEffect0 = new IncFullEffect(0, 0, noEffect);
- //this.effects.push(fullEffect0);
+ //incMosaic.imageData = incMosaic.ctx.getImageData(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY);
+ };
- // 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);
+ this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight)
+ {
+ // Recalculate the size of the mosaic squares
+ incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX);
+ incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY);
- 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);
- }
- }
+ //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()
{
@@ -110,8 +104,8 @@
this.setRandomSquareEffect = function()
{
- for (var i = 0; i < this.countX; ++i) {
- for (var j = 0; j < this.countY; ++j) {
+ 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();
fullEffect.x = i;
fullEffect.y = j;
@@ -124,68 +118,127 @@
{
var self = incMosaic;
- if (self.imagesLoaded != 2) {
- // Images are not loaded yet
- requestAnimationFrame(self.loopCallback);
- return;
+ if (self.imagesLoaded == 2) {
+ // Redraw
+ self.redraw();
}
+ // Loop
+ requestAnimationFrame(self.loopCallback);
+ };
+
+ this.redraw = function()
+ {
// Get time
var time = new Date().getTime();
- if (time < self.startTime + 3000) {
+ if (time < this.startTime + 3000) {
// Draw the first image
- self.ctx.drawImage(self.pairImages[0], 0, 0);
- requestAnimationFrame(self.loopCallback);
+ 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;
}
- // 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) {
-
+ for (var i = 0; i < this.squareEffects.length; ++i) {
// Update
- var fullEffect = self.squareEffects[i];
+ var fullEffect = this.squareEffects[i];
fullEffect.update(time);
for (var j = 0; j < 2; ++j) {
var effectInfo = fullEffect.effectInfos[j];
if (effectInfo !== null) {
// Draw square
- self.drawSquare(fullEffect, self.pairImages[j], effectInfo);
+ this.drawSquare(fullEffect, this.pairImages[j], effectInfo);
}
}
- }
-
- // Loop
- requestAnimationFrame(self.loopCallback);
+ }
};
-
this.drawSquare = function(fullEffect, image, effectInfo)
{
- // Compute square position
- var posX = fullEffect.x * this.squareX;
- var posY = fullEffect.y * this.squareY;
-
this.ctx.save();
// Global alpha
- this.ctx.globalAlpha = effectInfo.alpha;
+ this.ctx.globalAlpha = effectInfo.alpha;
+
+ // Compute src and dest square position
+ var srcPosX = fullEffect.x * this.srcSquareWidth;
+ var srcPosY = fullEffect.y * this.srcSquareHeight;
+ var destPosX = fullEffect.x * this.squareWidth;
+ var destPosY = fullEffect.y * this.squareHeight;
// Draw colored rectangle
this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")";
- this.ctx.fillRect(posX, posY, this.squareX, this.squareY);
+ this.ctx.fillRect(destPosX, destPosY, this.squareWidth, this.squareHeight);
// Draw image
- this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
+ this.ctx.drawImage(image, srcPosX, srcPosY, this.srcSquareWidth, this.srcSquareHeight, destPosX, destPosY, this.squareWidth, this.squareHeight);
this.ctx.restore();
};
+ this.registerEffects = function()
+ {
+ var count = 7;
+ var color = 64;
+
+ // Create semi random effects
+ var range1 = 3000;
+ var range2 = 7000;
+
+ 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);
+
+ 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 = 10000;
+ range2 = 25000;
+ 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);
+ }
+
+ // Create semi random effects
+ range1 = 25000;
+ range2 = 30000;
+ 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
// --------------------------------------------------------------------------------------------------------------------
@@ -202,9 +255,23 @@
this.getImageFromUrl = function(url)
{
+ var self = incMosaic;
var image = new Image();
image.onload = function() {
- incMosaic.imagesLoaded += 1;
+ // When the first image is loaded we can get the image dimention and init the autoresize of the canvas
+ if (self.imagesLoaded === 0) {
+ // Set some image size related vars
+ self.imageWidth = image.width;
+ self.imageHeight = image.height;
+ self.srcSquareWidth = image.width / self.squareCountX;
+ self.srcSquareHeight = image.height / self.squareCountY;
+
+ // Call the resize object
+ if (incResize !== undefined) {
+ incResize.resizeElements();
+ }
+ }
+ self.imagesLoaded += 1;
};
image.src = url;
return image;
@@ -276,14 +343,6 @@
};
}
-function IncSquareEffect_NoEffet()
-{
- this.update = function(time)
- {
- return incMosaic.noEffectinfo;
- }
-}
-
function IncSquareEffect_Alpha(effectParms, tweenColorFunc, tweenAlphaFunc, waitTime)
{
// Effect parameters
@@ -335,7 +394,7 @@
this.update = function(time)
{
- if (this.startTime[0] == 0) {
+ if (this.startTime[0] === 0) {
this.startTime[0] = time;
this.startTime[1] = time;
return;