In 2016 I, for my university coursework, was tasked with creating an animated image using JavaScript. I was given full creative licence to create an image of whatever I wanted to. Seeing as 2017 was to be UK City of Culture, and I was (and still am) attending the University of Hull, I decided to create an image of the Humber bridge. The image is simple and the colours are abstract (many of my friends have pointed out that the bridge being red makes it look like the golden gate bridge), but I am pleased with the final result.

I would embed the JavaScript canvas object directly onto this web page, but unfortunately, WordPress.com doesn’t allow bloggers to embed JavaScript into their posts, for some quite good reasons. I have resorted to a short video for you to watch. You can also download the source files to have a look yourself if you’re interested in that sort of thing. 

So for a quick breakdown of what this is. This is a vector-based 2D animation using requestAnimationFrame() with CPU-independent animation. The birds are drawn with a sprite sheet that looks like this:

Each bird is a frame of the animation. Every update the image changes to the next sprite creating the illusion of a flapping bird. I have also implemented parallax – the bigger birds move faster than the smaller birds. The image is also drawn and animated using a custom-built scenegraph and the canvas API in HTML5. The Vector and Matrix classes are also coded from scratch by me.

This coursework was marked and the final score was 87%.