19 this.squareX; |
19 this.squareX; |
20 this.squareY; |
20 this.squareY; |
21 this.effects = []; |
21 this.effects = []; |
22 this.squareEffects = []; |
22 this.squareEffects = []; |
23 |
23 |
|
24 // Time |
|
25 this.startTime; |
|
26 |
24 this.noEffectinfo = new IncEffectInfo(); |
27 this.noEffectinfo = new IncEffectInfo(); |
25 this.noEffectinfo.color = new IncColor(255, 255, 255, 1) |
28 this.noEffectinfo.color = new IncColor(255, 255, 255, 1) |
26 this.noEffectinfo.alpha = 1; |
29 this.noEffectinfo.alpha = 1; |
27 |
|
28 // Debug |
|
29 this.lastTime; |
|
30 |
30 |
31 // -------------------------------------------------------------------------------------------------------------------- |
31 // -------------------------------------------------------------------------------------------------------------------- |
32 // Functions |
32 // Functions |
33 // -------------------------------------------------------------------------------------------------------------------- |
33 // -------------------------------------------------------------------------------------------------------------------- |
34 |
34 |
73 |
76 |
74 this.registerEffects = function() |
77 this.registerEffects = function() |
75 { |
78 { |
76 // No effect |
79 // No effect |
77 //----------------------------------- |
80 //----------------------------------- |
78 var noEffect = new IncSquareEffect_NoEffet() |
81 //var noEffect = new IncSquareEffect_NoEffet() |
79 var fullEffect0 = new IncFullEffect(noEffect); |
82 //var fullEffect0 = new IncFullEffect(0, 0, noEffect); |
80 //this.effects.push(fullEffect0); |
83 //this.effects.push(fullEffect0); |
81 |
84 |
82 // Alpha |
85 // Create semi random effects |
83 //----------------------------------- |
86 for (var i = 0; i < 20; ++i) { |
84 { |
87 var time1 = this.randomInt(3000, 10000); |
85 var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 5000); |
88 var time2 = this.randomInt(3000, 10000); |
86 var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadInOut, createjs.Ease.quadInOut); |
89 var c1 = this.randomInt(0, 128); |
87 |
90 |
88 var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 7000), 8000); |
91 var effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1)); |
89 var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadInOut, createjs.Ease.quadInOut, 5000); |
92 var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut); |
90 |
93 |
91 this.effects.push(new IncFullEffect(effect1, effect2)); |
94 var effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2)); |
|
95 var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5); |
|
96 |
|
97 var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2); |
|
98 this.effects.push(fullEffect1); |
92 } |
99 } |
93 } |
100 } |
94 |
101 |
95 this.setRandomPairImages = function() |
102 this.setRandomPairImages = function() |
96 { |
103 { |
101 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2)); |
108 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2)); |
102 }; |
109 }; |
103 |
110 |
104 this.setRandomSquareEffect = function() |
111 this.setRandomSquareEffect = function() |
105 { |
112 { |
106 /* |
|
107 for (var i = 0; i < this.countX; ++i) { |
113 for (var i = 0; i < this.countX; ++i) { |
108 for (var j = 0; j < this.countY; ++j) { |
114 for (var j = 0; j < this.countY; ++j) { |
109 //var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); |
115 var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); |
110 var fullEffect = this.effects[0].copy(); |
|
111 fullEffect.x = i; |
116 fullEffect.x = i; |
112 fullEffect.y = j; |
117 fullEffect.y = j; |
113 this.squareEffects.push(fullEffect); |
118 this.squareEffects.push(fullEffect); |
114 } |
119 } |
115 }*/ |
120 } |
116 { |
|
117 var e1 = this.effects[0].copy(); |
|
118 e1.x = 2; |
|
119 e1.y = 1; |
|
120 this.squareEffects.push(e1); |
|
121 } |
|
122 /* |
|
123 { |
|
124 var e1 = this.effects[1].copy(); |
|
125 e1.x = 3; |
|
126 e1.y = 0; |
|
127 this.squareEffects.push(e1); |
|
128 } |
|
129 { |
|
130 var e1 = this.effects[2].copy(); |
|
131 e1.x = 2; |
|
132 e1.y = 1; |
|
133 this.squareEffects.push(e1); |
|
134 } |
|
135 */ |
|
136 }; |
121 }; |
137 |
122 |
138 this.loopCallback = function() |
123 this.loopCallback = function() |
139 { |
124 { |
140 var self = incMosaic; |
125 var self = incMosaic; |
143 // Images are not loaded yet |
128 // Images are not loaded yet |
144 requestAnimationFrame(self.loopCallback); |
129 requestAnimationFrame(self.loopCallback); |
145 return; |
130 return; |
146 } |
131 } |
147 |
132 |
148 // Clear canvas |
|
149 self.ctx.fillStyle = "#ffffff"; |
|
150 self.ctx.fillStyle = "#000000"; |
|
151 self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height); |
|
152 |
|
153 // Get time |
133 // Get time |
154 var time = new Date().getTime(); |
134 var time = new Date().getTime(); |
155 |
135 |
156 // Update effect |
136 if (time < self.startTime + 3000) { |
|
137 // Draw the first image |
|
138 self.ctx.drawImage(self.pairImages[0], 0, 0); |
|
139 requestAnimationFrame(self.loopCallback); |
|
140 return; |
|
141 } |
|
142 |
|
143 // Clear canvas |
|
144 //self.ctx.fillStyle = "#000000"; |
|
145 //self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height); |
|
146 |
|
147 // Update effects |
157 for (var i = 0; i < self.squareEffects.length; ++i) { |
148 for (var i = 0; i < self.squareEffects.length; ++i) { |
|
149 |
|
150 // Update |
158 var fullEffect = self.squareEffects[i]; |
151 var fullEffect = self.squareEffects[i]; |
|
152 fullEffect.update(time); |
159 |
153 |
160 for (var j = 0; j < 2; ++j) { |
154 for (var j = 0; j < 2; ++j) { |
161 var effect = fullEffect.effects[j]; |
155 var effectInfo = fullEffect.effectInfos[j]; |
162 if (effect !== undefined) { |
156 if (effectInfo !== null) { |
163 // Draw square |
157 // Draw square |
164 self.drawSquare(fullEffect, self.pairImages[j], effect, time); |
158 self.drawSquare(fullEffect, self.pairImages[j], effectInfo); |
165 } |
159 } |
166 } |
160 } |
167 } |
161 } |
168 |
162 |
169 //console.log(time - this.lastTime); |
|
170 this.lastTime = time; |
|
171 |
|
172 // Loop |
163 // Loop |
173 requestAnimationFrame(self.loopCallback); |
164 requestAnimationFrame(self.loopCallback); |
174 }; |
165 }; |
175 |
166 |
176 this.loopCallback2 = function() |
167 |
177 { |
168 this.drawSquare = function(fullEffect, image, effectInfo) |
178 var self = incMosaic; |
169 { |
179 |
|
180 if (self.imagesLoaded != 2) { |
|
181 // Images are not loaded yet |
|
182 requestAnimationFrame(self.loopCallback2); |
|
183 return; |
|
184 } |
|
185 |
|
186 // Clear canvas |
|
187 self.ctx.fillStyle = "#ffffff"; |
|
188 self.ctx.fillStyle = "#000000"; |
|
189 self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height); |
|
190 |
|
191 // Get time |
|
192 var time = new Date().getTime(); |
|
193 |
|
194 // Update effect |
|
195 for (var i = 0; i < self.squareEffects.length; ++i) { |
|
196 // Draw square |
|
197 var fullEffect = self.squareEffects[i]; |
|
198 self.drawSquare2(fullEffect, time); |
|
199 } |
|
200 |
|
201 //console.log(time - this.lastTime); |
|
202 this.lastTime = time; |
|
203 |
|
204 // Loop |
|
205 requestAnimationFrame(self.loopCallback2); |
|
206 }; |
|
207 |
|
208 this.drawSquare = function(fullEffect, image, effect, time) |
|
209 { |
|
210 // Update effect |
|
211 var effectInfo = effect.update(fullEffect, time); |
|
212 |
|
213 if (effectInfo === null) { |
|
214 return; |
|
215 } |
|
216 |
|
217 // Compute square position |
170 // Compute square position |
218 var posX = fullEffect.x * this.squareX; |
171 var posX = fullEffect.x * this.squareX; |
219 var posY = fullEffect.y * this.squareY; |
172 var posY = fullEffect.y * this.squareY; |
220 |
173 |
221 this.ctx.save(); |
174 this.ctx.save(); |
227 this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")"; |
180 this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")"; |
228 this.ctx.fillRect(posX, posY, this.squareX, this.squareY); |
181 this.ctx.fillRect(posX, posY, this.squareX, this.squareY); |
229 |
182 |
230 // Draw image |
183 // Draw image |
231 this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY); |
184 this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY); |
232 |
|
233 this.ctx.restore(); |
|
234 }; |
|
235 |
|
236 this.drawSquare2 = function(fullEffect, time) |
|
237 { |
|
238 // Update effect |
|
239 var effectInfo1 = fullEffect.effects[0].update(fullEffect, time); |
|
240 var effectInfo2 = (fullEffect.effects[1] !== undefined) ? fullEffect.effects[1].update(fullEffect, time) : null; |
|
241 |
|
242 // Compute square position |
|
243 var posX = fullEffect.x * this.squareX; |
|
244 var posY = fullEffect.y * this.squareY; |
|
245 |
|
246 this.ctx.save(); |
|
247 |
|
248 if (effectInfo1 !== null) { |
|
249 this.ctx.globalAlpha = effectInfo1.alpha; |
|
250 this.ctx.drawImage(this.pairImages[0], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY); |
|
251 |
|
252 if (effectInfo2 !== null) { |
|
253 var image1 = this.ctx.getImageData(posX, posY, this.squareX, this.squareY); |
|
254 var imageData1 = image1.data; |
|
255 |
|
256 this.ctx.globalAlpha = effectInfo2.alpha; |
|
257 this.ctx.drawImage(this.pairImages[1], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY); |
|
258 var image2 = this.ctx.getImageData(posX, posY, this.squareX, this.squareY); |
|
259 var imageData2 = image2.data; |
|
260 |
|
261 var pixels = 4 * this.squareX * this.squareY; |
|
262 while (pixels--) { |
|
263 imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5; |
|
264 //imageData1[pixels] = imageData1[pixels] * effectInfo1.alpha + imageData2[pixels] * effectInfo1.alpha;; |
|
265 } |
|
266 |
|
267 this.ctx.putImageData(image1, posX, posY); |
|
268 } |
|
269 |
|
270 |
|
271 } else if (effectInfo2 !== null) { |
|
272 console.log(effectInfo2.alpha); |
|
273 this.ctx.globalAlpha = effectInfo2.alpha; |
|
274 this.ctx.drawImage(this.pairImages[1], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY); |
|
275 } |
|
276 |
185 |
277 this.ctx.restore(); |
186 this.ctx.restore(); |
278 }; |
187 }; |
279 |
188 |
280 // -------------------------------------------------------------------------------------------------------------------- |
189 // -------------------------------------------------------------------------------------------------------------------- |
335 { |
244 { |
336 this.color; |
245 this.color; |
337 this.alpha; |
246 this.alpha; |
338 } |
247 } |
339 |
248 |
340 function IncEffectParams(color, colorAnim, alpha, alphaAnim, time) |
249 function IncEffectParams(color, colorAnim, alpha, alphaAnim) |
341 { |
250 { |
342 // Color |
251 // Color |
343 this.color = color; |
252 this.color = color; |
344 this.colorAnim = colorAnim; |
253 this.colorAnim = colorAnim; |
345 |
254 |
346 // Alpha |
255 // Alpha |
347 this.alpha = alpha; |
256 this.alpha = alpha; |
348 this.alphaAnim = alphaAnim; |
257 this.alphaAnim = alphaAnim; |
349 |
258 |
350 // Time |
|
351 this.time = time; |
|
352 |
|
353 this.computeColorAnimValue = function(elapsedTime, easeFunc) |
259 this.computeColorAnimValue = function(elapsedTime, easeFunc) |
354 { |
260 { |
355 return this.computeAnimValue(this.colorAnim, elapsedTime, easeFunc); |
261 return this.computeAnimValue(this.colorAnim, elapsedTime, easeFunc); |
356 }; |
262 }; |
357 |
263 |
386 // Tween functions |
292 // Tween functions |
387 this.tweenColorFunc = tweenColorFunc; |
293 this.tweenColorFunc = tweenColorFunc; |
388 this.tweenAlphaFunc = tweenAlphaFunc; |
294 this.tweenAlphaFunc = tweenAlphaFunc; |
389 |
295 |
390 // Time |
296 // Time |
391 this.waitTime = (waitTime!==undefined) ? (new Date().getTime() + waitTime) : 0; |
297 this.waitTime = (waitTime!==undefined) ? waitTime : 0; |
392 |
298 |
393 this.update = function(fullEffect, time) |
299 this.update = function(elapsedTime) |
394 { |
300 { |
395 if (this.waitTime > time) { |
|
396 return null; |
|
397 } |
|
398 |
|
399 if (fullEffect.startTime == 0) { |
|
400 fullEffect.startTime = time; |
|
401 } |
|
402 |
|
403 if ((time - fullEffect.startTime) > this.effectParms.time) { |
|
404 return null; |
|
405 } |
|
406 |
|
407 var elapsedTime = this.waitTime ? (time - fullEffect.waitTime) : (time - fullEffect.startTime); |
|
408 console.log(elapsedTime); |
|
409 var info = new IncEffectInfo(); |
301 var info = new IncEffectInfo(); |
410 |
302 |
411 // Compute new color |
303 // Compute new color |
412 var newColorValue = this.effectParms.computeColorAnimValue(elapsedTime, this.tweenColorFunc); |
304 var newColorValue = this.effectParms.computeColorAnimValue(elapsedTime, this.tweenColorFunc); |
413 info.color = this.effectParms.color.copy(); |
305 info.color = this.effectParms.color.copy(); |
420 |
312 |
421 return info; |
313 return info; |
422 }; |
314 }; |
423 } |
315 } |
424 |
316 |
425 function IncFullEffect(effect1, effect2) |
317 function IncFullEffect(effect1, effect2, totalTime1, totalTime2) |
426 { |
318 { |
427 // Position |
319 // Position |
428 this.x = 0; |
320 this.x = 0; |
429 this.y = 0; |
321 this.y = 0; |
430 |
322 |
431 // Effect |
323 // Effect |
432 this.effects = [effect1, effect2]; |
324 this.effects = [effect1, effect2]; |
|
325 this.effectInfos = [null, null]; |
433 |
326 |
434 // Time |
327 // Time |
435 this.startTime = 0; |
328 this.startTime = [0, 0]; |
|
329 this.totalTime = [totalTime1, totalTime2]; |
436 |
330 |
437 this.copy = function() |
331 this.copy = function() |
438 { |
332 { |
439 return new IncFullEffect(this.effects[0], this.effects[1]); |
333 return new IncFullEffect(this.effects[0], this.effects[1], this.totalTime[0], this.totalTime[1]); |
|
334 }; |
|
335 |
|
336 this.update = function(time) |
|
337 { |
|
338 if (this.startTime[0] == 0) { |
|
339 this.startTime[0] = time; |
|
340 this.startTime[1] = time; |
|
341 return; |
|
342 } |
|
343 |
|
344 for (var i = 0; i < 2; ++i) { |
|
345 // If we are in the good time range we update the effect |
|
346 var waitTime = this.startTime[i] + this.effects[i].waitTime; |
|
347 if (time > waitTime && time < this.totalTime[i] + waitTime) { |
|
348 this.effectInfos[i] = this.effects[i].update(time - waitTime); |
|
349 } |
|
350 } |
440 }; |
351 }; |
441 } |
352 } |
442 |
353 |
443 // -------------------------------------------------------------------------------------------------------------------- |
354 // -------------------------------------------------------------------------------------------------------------------- |
444 // Tools |
355 // Tools |