Changes 12/24/14 - 1/4/15 (Winter Break) - Javascript Canvas stuff

On my website, ahirschberg.github.io, if you click the button that says "Wot's this, m8?", images and gifs will start to shake across the screen.  However, these elements are shaken by updating their positions on the page, which is pretty inefficient when being done over and over again for a large number of elements.

Last year, I had worked on a page that tested the basics of shaking an image using a canvas.  It wasn't very impressive and didn't really capture what I was trying to do.  Over winter break I started to work on a page that properly shook the images within the canvas.

canvas_shake2.html

It generates a set number of canvases (at the time of writing it's 10, but on the actual implementation it will probably be higher).  Each of these canvases is assigned a random image from a pool of possible images.  A tick function called using the javascript setInterval() function updates the canvases every 30 milliseconds. Each frame loads the image at a different position:

This method of changing an image's position is much more efficient than my previous method of actually creating an image element and directly updating its position.  For example, my computer at home can handle about 50 canvases all shaking elements, while it would start to lag long before that number of elements was reached directly updating image positions in the DOM.

Please try out the different buttons on the page and see what they do!

The main limitation of this method is that gifs no longer render past the first frame because javascript doesn't offer an easy way to choose which frame in a gif is drawn to a canvas using the drawImage() method.  A lot of the shaker elements are gifs, so that's a big problem.

canvas_spritesheet.html

To work around this limitation, I started working on a canvas implementation that would create an animation using a spritesheet, an image with all the frames of a gif lined up like a film strip.

In order to help the viewer visualize this, I added a canvas below the main animation which illustrates the bounds of the spritesheet currently being drawn to the canvas.

Please try out the different buttons on the page and see what they do!

Also, if your sound isn't on, turn it on!  I set up the javascript so that it seamless(ish)ly loops a part of a song.

For both of these pages, there's a link to the proper github page where you can see the relevant code with proper syntax highlighting.