53 this.init(); |
53 this.init(); |
54 |
54 |
55 // Register effects |
55 // Register effects |
56 this.registerEffects(); |
56 this.registerEffects(); |
57 |
57 |
58 // Set a random pair images |
58 // Set a new effect transition between 2 images |
59 this.setRandomPairImages(); |
59 this.SetNewEffect(); |
60 |
|
61 // Set random effect on the squares |
|
62 this.setRandomSquareEffect(); |
|
63 |
|
64 // Time |
|
65 this.startTime = new Date().getTime(); |
|
66 |
60 |
67 // Main loop |
61 // Main loop |
68 this.loopCallback(); |
62 this.loopCallback(); |
69 }; |
63 }; |
|
64 |
|
65 this.SetNewEffect = function() |
|
66 { |
|
67 // Set a random pair images |
|
68 this.setRandomPairImages(); |
|
69 |
|
70 // Set random effect on the squares |
|
71 this.setRandomSquareEffect(); |
|
72 |
|
73 // Time |
|
74 this.startTime = new Date().getTime(); |
|
75 } |
70 |
76 |
71 this.init = function() |
77 this.init = function() |
72 { |
78 { |
73 // Init canvas objects |
79 // Init canvas objects |
74 this.canvas = document.getElementById(this.canvasId ); |
80 this.canvas = document.getElementById(this.canvasId ); |
77 this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); |
83 this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); |
78 }; |
84 }; |
79 |
85 |
80 this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight) |
86 this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight) |
81 { |
87 { |
82 //incMosaic.imageData = incMosaic.ctx.getImageData(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY); |
|
83 }; |
88 }; |
84 |
89 |
85 this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight) |
90 this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight) |
86 { |
91 { |
87 // Recalculate the size of the mosaic squares |
92 // Recalculate the size of the mosaic squares |
88 incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX); |
93 incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX); |
89 incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY); |
94 incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY); |
90 |
|
91 //incMosaic.ctx.fillStyle = "#000000"; |
|
92 //incMosaic.ctx.fillRect(0, 0, incMosaic.srcSquareWidth*incMosaic.squareCountX, incMosaic.srcSquareHeight*incMosaic.squareCountY); |
|
93 //incMosaic.ctx.putImageData(incMosaic.imageData, 0, 0); |
|
94 }; |
95 }; |
95 |
96 |
96 this.setRandomPairImages = function() |
97 this.setRandomPairImages = function() |
97 { |
98 { |
98 this.imagesLoaded = 0; |
99 this.imagesLoaded = 0; |
99 var randInd = this.randomInt(0, this.pairUrl.length); |
100 var randInd = this.randomInt(0, this.pairUrl.length); |
100 var pairUrl = this.pairUrl[randInd]; |
101 var pairUrl = this.pairUrl[randInd]; |
|
102 |
|
103 this.pairImages.length = 0; |
101 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl1)); |
104 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl1)); |
102 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2)); |
105 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2)); |
103 }; |
106 }; |
104 |
107 |
105 this.setRandomSquareEffect = function() |
108 this.setRandomSquareEffect = function() |
106 { |
109 { |
|
110 this.squareEffects.length = 0; |
107 for (var i = 0; i < this.squareCountX; ++i) { |
111 for (var i = 0; i < this.squareCountX; ++i) { |
108 for (var j = 0; j < this.squareCountY; ++j) { |
112 for (var j = 0; j < this.squareCountY; ++j) { |
109 var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); |
113 var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); |
110 fullEffect.x = i; |
114 fullEffect.x = i; |
111 fullEffect.y = j; |
115 fullEffect.y = j; |
137 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); |
141 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); |
138 return; |
142 return; |
139 } |
143 } |
140 |
144 |
141 // Update effects |
145 // Update effects |
|
146 var effectsContinue = false; |
142 for (var i = 0; i < this.squareEffects.length; ++i) { |
147 for (var i = 0; i < this.squareEffects.length; ++i) { |
143 // Update |
148 // Update |
144 var fullEffect = this.squareEffects[i]; |
149 var fullEffect = this.squareEffects[i]; |
145 fullEffect.update(time); |
150 effectsContinue = fullEffect.update(time) || effectsContinue; |
146 |
151 |
147 for (var j = 0; j < 2; ++j) { |
152 for (var j = 0; j < 2; ++j) { |
148 var effectInfo = fullEffect.effectInfos[j]; |
153 var effectInfo = fullEffect.effectInfos[j]; |
149 if (effectInfo !== null) { |
154 if (effectInfo !== null) { |
150 // Draw square |
155 // Draw square |
151 this.drawSquare(fullEffect, this.pairImages[j], effectInfo); |
156 this.drawSquare(fullEffect, this.pairImages[j], effectInfo); |
152 } |
157 } |
153 } |
158 } |
154 } |
159 } |
|
160 |
|
161 if (!effectsContinue) { |
|
162 console.log("Effect finished !!!!!"); |
|
163 this.SetNewEffect(); |
|
164 } |
155 }; |
165 }; |
156 |
166 |
157 this.drawSquare = function(fullEffect, image, effectInfo) |
167 this.drawSquare = function(fullEffect, image, effectInfo) |
158 { |
168 { |
159 this.ctx.save(); |
169 this.ctx.save(); |
182 var count = 7; |
192 var count = 7; |
183 var color = 64; |
193 var color = 64; |
184 |
194 |
185 // Create semi random effects |
195 // Create semi random effects |
186 var range1 = 3000; |
196 var range1 = 3000; |
187 var range2 = 7000; |
197 var range2 = 5000; |
188 |
198 |
189 var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1; |
199 var i, time1, time2, effectParam1, effect1, effectParam2, effect2, fullEffect1; |
190 for (i = 0; i < count; ++i) { |
200 for (i = 0; i < count; ++i) { |
191 time1 = this.randomInt(range1, range2); |
201 time1 = this.randomInt(range1, range2); |
192 time2 = this.randomInt(range1, range2); |
202 time2 = this.randomInt(range1, range2); |
201 fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); |
211 fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); |
202 this.effects.push(fullEffect1); |
212 this.effects.push(fullEffect1); |
203 } |
213 } |
204 |
214 |
205 // Create semi random effects |
215 // Create semi random effects |
206 range1 = 10000; |
216 range1 = 7000; |
207 range2 = 25000; |
217 range2 = 15000; |
208 for (i = 0; i < count; ++i) { |
218 for (i = 0; i < count; ++i) { |
209 time1 = this.randomInt(range1, range2); |
219 time1 = this.randomInt(range1, range2); |
210 time2 = this.randomInt(range1, range2); |
220 time2 = this.randomInt(range1, range2); |
211 c1 = this.randomInt(0, color); |
221 c1 = this.randomInt(0, color); |
212 |
222 |
219 fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); |
229 fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); |
220 this.effects.push(fullEffect1); |
230 this.effects.push(fullEffect1); |
221 } |
231 } |
222 |
232 |
223 // Create semi random effects |
233 // Create semi random effects |
224 range1 = 25000; |
234 range1 = 17000; |
225 range2 = 30000; |
235 range2 = 23000; |
226 for (i = 0; i < count; ++i) { |
236 for (i = 0; i < count; ++i) { |
227 time1 = this.randomInt(range1, range2); |
237 time1 = this.randomInt(range1, range2); |
228 time2 = this.randomInt(range1, range2); |
238 time2 = this.randomInt(range1, range2); |
229 c1 = this.randomInt(0, color); |
239 c1 = this.randomInt(0, color); |
230 |
240 |
395 this.update = function(time) |
405 this.update = function(time) |
396 { |
406 { |
397 if (this.startTime[0] === 0) { |
407 if (this.startTime[0] === 0) { |
398 this.startTime[0] = time; |
408 this.startTime[0] = time; |
399 this.startTime[1] = time; |
409 this.startTime[1] = time; |
400 return; |
410 return true; |
401 } |
411 } |
402 |
412 |
403 for (var i = 0; i < 2; ++i) { |
413 for (var i = 0; i < 2; ++i) { |
404 // If we are in the good time range we update the effect |
414 // If we are in the good time range we update the effect |
405 var waitTime = this.startTime[i] + this.effects[i].waitTime; |
415 var waitTime = this.startTime[i] + this.effects[i].waitTime; |
406 if (time > waitTime && time < this.totalTime[i] + waitTime) { |
416 var updateEffect = time < this.totalTime[i] + waitTime; |
|
417 if (time > waitTime && updateEffect) { |
407 this.effectInfos[i] = this.effects[i].update(time - waitTime); |
418 this.effectInfos[i] = this.effects[i].update(time - waitTime); |
408 } |
419 } |
409 } |
420 |
|
421 if (i == 1 && !updateEffect) { |
|
422 // The effect is done |
|
423 return false; |
|
424 } |
|
425 } |
|
426 |
|
427 return true; |
410 }; |
428 }; |
411 } |
429 } |
412 |
430 |
413 // -------------------------------------------------------------------------------------------------------------------- |
431 // -------------------------------------------------------------------------------------------------------------------- |
414 // Tools |
432 // Tools |