13 /// Images |
13 /// Images |
14 this.imageUrls = []; |
14 this.imageUrls = []; |
15 this.listeUrls = []; // The images list to blend |
15 this.listeUrls = []; // The images list to blend |
16 this.pairImages = []; |
16 this.pairImages = []; |
17 this.imagesLoaded = 0; |
17 this.imagesLoaded = 0; |
|
18 this.imageLoadedIndex = -1; |
18 this.imageWidth; |
19 this.imageWidth; |
19 this.imageHeight; |
20 this.imageHeight; |
|
21 this.postFirstImageCallback; |
20 |
22 |
21 // Effect |
23 // Effect |
22 this.waitStartEffectTime = 3000; |
24 this.waitStartEffectTime = 3000; |
23 this.waitStartEffectGo; |
25 this.waitStartEffectGo; |
24 this.effectSpeed; |
26 this.effectSpeed; |
43 this.addImageUrl = function(url) |
45 this.addImageUrl = function(url) |
44 { |
46 { |
45 this.imageUrls.push(url); |
47 this.imageUrls.push(url); |
46 }; |
48 }; |
47 |
49 |
48 this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc) |
50 this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc, postFirstImageCallback) |
49 { |
51 { |
50 // Canvas ID |
52 // Canvas ID |
51 this.canvasId = canvasId; |
53 this.canvasId = canvasId; |
52 |
54 |
53 // Speed |
55 // Speed |
61 this.loop = loop; |
63 this.loop = loop; |
62 this.endEffecFunc = endEffecFunc; |
64 this.endEffecFunc = endEffecFunc; |
63 |
65 |
64 // Does the effect wait for go |
66 // Does the effect wait for go |
65 this.waitStartEffectGo = waitStartEffectGo; |
67 this.waitStartEffectGo = waitStartEffectGo; |
|
68 |
|
69 // callback to call after the load of the first image |
|
70 this.postFirstImageCallback = postFirstImageCallback; |
66 |
71 |
67 // Init the canvas objects |
72 // Init the canvas objects |
68 this.init(); |
73 this.init(); |
69 |
74 |
70 // Register effects |
75 // Register effects |
148 this.fillListUrl(); |
153 this.fillListUrl(); |
149 } |
154 } |
150 |
155 |
151 if (this.pairImages.length == 0) { |
156 if (this.pairImages.length == 0) { |
152 this.imagesLoaded = 0; |
157 this.imagesLoaded = 0; |
153 this.pairImages.push(this.getImageFromUrl(this.listeUrls[0])); |
158 this.pairImages.push(this.getImageFromUrl(this.listeUrls[0], 0)); |
154 this.pairImages.push(this.getImageFromUrl(this.listeUrls[1])); |
159 this.pairImages.push(this.getImageFromUrl(this.listeUrls[1], 1)); |
155 this.listeUrls.remove(0); |
160 this.listeUrls.remove(0); |
156 } else { |
161 } else { |
157 this.imagesLoaded = 1; |
162 this.imagesLoaded = 1; |
158 this.pairImages[0] = this.pairImages[1]; // Swap |
163 this.pairImages[0] = this.pairImages[1]; // Swap |
159 this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0]) |
164 this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0], 999) |
160 } |
165 } |
161 this.listeUrls.remove(0); |
166 this.listeUrls.remove(0); |
162 |
167 |
163 // Todo preload the next image |
168 // Todo preload the next image |
164 }; |
169 }; |
178 |
183 |
179 this.loopCallback = function() |
184 this.loopCallback = function() |
180 { |
185 { |
181 var self = incMosaic; |
186 var self = incMosaic; |
182 |
187 |
183 if (self.imagesLoaded == 2) { |
188 if (self.imagesLoaded === 2) { |
184 // Redraw |
189 // Redraw |
185 self.redraw(); |
190 self.redraw(); |
|
191 } else if (self.imageLoadedIndex === 0) { |
|
192 // Draw first image |
|
193 self.drawFirstImage(); |
|
194 self.imageLoadedIndex = -1; |
186 } |
195 } |
187 |
196 |
188 // Loop |
197 // Loop |
189 requestAnimationFrame(self.loopCallback); |
198 requestAnimationFrame(self.loopCallback); |
190 }; |
199 }; |
191 |
200 |
|
201 this.drawFirstImage = function() |
|
202 { |
|
203 // Draw the first image |
|
204 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); |
|
205 |
|
206 if (this.postFirstImageCallback !== null) { |
|
207 this.postFirstImageCallback(); |
|
208 this.postFirstImageCallback = null; |
|
209 } |
|
210 }; |
|
211 |
192 this.redraw = function() |
212 this.redraw = function() |
193 { |
213 { |
194 // Get time |
214 // Get time |
195 var time = new Date().getTime(); |
215 var time = new Date().getTime(); |
196 |
216 |
197 var timeToWait = (this.startTime + this.waitStartEffectTime)*this.effectSpeed; |
217 var timeToWait = (this.startTime + this.waitStartEffectTime)*this.effectSpeed; |
198 if (time < timeToWait || this.waitStartEffectGo) { |
218 if (time < timeToWait || this.waitStartEffectGo) { |
199 // Draw the first image |
219 this.drawFirstImage(); |
200 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); |
|
201 return; |
220 return; |
202 } |
221 } |
203 |
222 |
204 // Update effects |
223 // Update effects |
205 var effectsContinue = false; |
224 var effectsContinue = false; |
308 this.randomFloat = function(min, max) |
327 this.randomFloat = function(min, max) |
309 { |
328 { |
310 return Math.random() * (max - min) + min; |
329 return Math.random() * (max - min) + min; |
311 }; |
330 }; |
312 |
331 |
313 this.getImageFromUrl = function(url) |
332 this.getImageFromUrl = function(url, index) |
314 { |
333 { |
315 var self = incMosaic; |
334 var self = incMosaic; |
316 var image = new Image(); |
335 var image = new Image(); |
|
336 var ind = index; |
|
337 |
317 image.onload = function() { |
338 image.onload = function() { |
|
339 |
|
340 self.imageLoadedIndex = ind; |
|
341 |
318 // When the first image is loaded we can get the image dimention and init the autoresize of the canvas |
342 // When the first image is loaded we can get the image dimention and init the autoresize of the canvas |
319 if (self.imagesLoaded === 0) { |
343 if (self.imagesLoaded === 0) { |
|
344 |
320 // Set some image size related vars |
345 // Set some image size related vars |
321 self.imageWidth = image.width; |
346 self.imageWidth = image.width; |
322 self.imageHeight = image.height; |
347 self.imageHeight = image.height; |
323 self.srcSquareWidth = image.width / self.squareCountX; |
348 self.srcSquareWidth = image.width / self.squareCountX; |
324 self.srcSquareHeight = image.height / self.squareCountY; |
349 self.srcSquareHeight = image.height / self.squareCountY; |