23 |
23 |
24 this.noEffectinfo = new IncEffectInfo(); |
24 this.noEffectinfo = new IncEffectInfo(); |
25 this.noEffectinfo.color = new IncColor(255, 255, 255, 1) |
25 this.noEffectinfo.color = new IncColor(255, 255, 255, 1) |
26 this.noEffectinfo.alpha = 1; |
26 this.noEffectinfo.alpha = 1; |
27 |
27 |
|
28 // Debug |
|
29 this.lastTime; |
|
30 |
28 // -------------------------------------------------------------------------------------------------------------------- |
31 // -------------------------------------------------------------------------------------------------------------------- |
29 // Functions |
32 // Functions |
30 // -------------------------------------------------------------------------------------------------------------------- |
33 // -------------------------------------------------------------------------------------------------------------------- |
31 |
34 |
32 this.addPairImages = function(url1, url2) |
35 this.addPairImages = function(url1, url2) |
71 this.registerEffects = function() |
74 this.registerEffects = function() |
72 { |
75 { |
73 // No effect |
76 // No effect |
74 //----------------------------------- |
77 //----------------------------------- |
75 var noEffect = new IncSquareEffect_NoEffet() |
78 var noEffect = new IncSquareEffect_NoEffet() |
76 var fullEffect0 = new IncFullEffect(0, 0, noEffect); |
79 var fullEffect0 = new IncFullEffect(noEffect); |
77 this.effects.push(fullEffect0); |
80 //this.effects.push(fullEffect0); |
78 |
81 |
79 // Alpha |
82 // Alpha |
80 //----------------------------------- |
83 //----------------------------------- |
81 { |
84 { |
82 var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000); |
85 var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 5000); |
83 var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear); |
86 var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadInOut, createjs.Ease.quadInOut); |
84 var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000); |
87 |
85 var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500); |
88 var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 7000), 8000); |
86 var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1); |
89 var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadInOut, createjs.Ease.quadInOut, 5000); |
87 this.effects.push(fullEffect1); |
90 |
88 } |
91 this.effects.push(new IncFullEffect(effect1, effect2)); |
89 |
|
90 // Alpha 2 |
|
91 //----------------------------------- |
|
92 { |
|
93 var effectParam1 = new IncEffectParams(new IncColor(32, 32, 32, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000); |
|
94 var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear); |
|
95 var effectParam2 = new IncEffectParams(new IncColor(32, 32, 32, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000); |
|
96 var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500); |
|
97 var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1); |
|
98 this.effects.push(fullEffect1); |
|
99 } |
92 } |
100 } |
93 } |
101 |
94 |
102 this.setRandomPairImages = function() |
95 this.setRandomPairImages = function() |
103 { |
96 { |
108 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2)); |
101 this.pairImages.push(this.getImageFromUrl(pairUrl.imageUrl2)); |
109 }; |
102 }; |
110 |
103 |
111 this.setRandomSquareEffect = function() |
104 this.setRandomSquareEffect = function() |
112 { |
105 { |
|
106 /* |
113 for (var i = 0; i < this.countX; ++i) { |
107 for (var i = 0; i < this.countX; ++i) { |
114 for (var j = 0; j < this.countY; ++j) { |
108 for (var j = 0; j < this.countY; ++j) { |
115 var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); |
109 //var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy(); |
|
110 var fullEffect = this.effects[0].copy(); |
116 fullEffect.x = i; |
111 fullEffect.x = i; |
117 fullEffect.y = j; |
112 fullEffect.y = j; |
118 this.squareEffects.push(fullEffect); |
113 this.squareEffects.push(fullEffect); |
119 } |
114 } |
120 } |
115 }*/ |
|
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 */ |
121 }; |
136 }; |
122 |
137 |
123 this.loopCallback = function() |
138 this.loopCallback = function() |
124 { |
139 { |
125 var self = incMosaic; |
140 var self = incMosaic; |
144 |
159 |
145 for (var j = 0; j < 2; ++j) { |
160 for (var j = 0; j < 2; ++j) { |
146 var effect = fullEffect.effects[j]; |
161 var effect = fullEffect.effects[j]; |
147 if (effect !== undefined) { |
162 if (effect !== undefined) { |
148 // Draw square |
163 // Draw square |
149 self.drawSquare(fullEffect, self.pairImages[j], effect, time); |
164 self.drawSquare(fullEffect, self.pairImages[j], effect, time); |
150 } |
165 } |
151 } |
166 } |
152 } |
167 } |
153 |
168 |
|
169 //console.log(time - this.lastTime); |
|
170 this.lastTime = time; |
|
171 |
154 // Loop |
172 // Loop |
155 requestAnimationFrame(self.loopCallback); |
173 requestAnimationFrame(self.loopCallback); |
156 }; |
174 }; |
157 |
175 |
|
176 this.loopCallback2 = function() |
|
177 { |
|
178 var self = incMosaic; |
|
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 }; |
158 |
207 |
159 this.drawSquare = function(fullEffect, image, effect, time) |
208 this.drawSquare = function(fullEffect, image, effect, time) |
160 { |
209 { |
161 // Update effect |
210 // Update effect |
162 var effectInfo = effect.update(fullEffect, time); |
211 var effectInfo = effect.update(fullEffect, time); |
178 this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")"; |
227 this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")"; |
179 this.ctx.fillRect(posX, posY, this.squareX, this.squareY); |
228 this.ctx.fillRect(posX, posY, this.squareX, this.squareY); |
180 |
229 |
181 // Draw image |
230 // Draw image |
182 this.ctx.drawImage(image, posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY); |
231 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 } |
183 |
276 |
184 this.ctx.restore(); |
277 this.ctx.restore(); |
185 }; |
278 }; |
186 |
279 |
187 // -------------------------------------------------------------------------------------------------------------------- |
280 // -------------------------------------------------------------------------------------------------------------------- |
305 |
398 |
306 if (fullEffect.startTime == 0) { |
399 if (fullEffect.startTime == 0) { |
307 fullEffect.startTime = time; |
400 fullEffect.startTime = time; |
308 } |
401 } |
309 |
402 |
310 var elapsedTime = time - fullEffect.startTime; |
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); |
311 var info = new IncEffectInfo(); |
409 var info = new IncEffectInfo(); |
312 |
410 |
313 // Compute new color |
411 // Compute new color |
314 var newColorValue = this.effectParms.computeColorAnimValue(elapsedTime, this.tweenColorFunc); |
412 var newColorValue = this.effectParms.computeColorAnimValue(elapsedTime, this.tweenColorFunc); |
315 info.color = this.effectParms.color.copy(); |
413 info.color = this.effectParms.color.copy(); |