Canvas Art & Animation

An object-oriented piece in which I created some sci-fi artwork using JavaScript and Canvas along with an animated radar beneath the static image.

View live | Check the GitHub repo

This canvas art was made as an attempt to learn about drawing and animation using JavaScript. I chose to recreate a piece of artwork by Dan McPharlin called ‘The Sword | Tears of Fire / Farstar’, which can be seen here: - Tears of Fire.

I also had the idea to create an animated radar screen, inspired by the aesthetic of films such as Star Wars, on which the ship that appears in the image above, would move, before flashing red and stating “TARGET ACQUIRED”. The decision to reuse features of the first canvas within the second was made to explore how namespacing can be used/saved via the use of function scopes.

I started by making a grid function, which I used to subdivide my canvas. This made it easier to find and reference points on the canvas when creating each element. I also created functions for drawing each shape on the canvas, such as hexagons, triangles and the ship (this function had both a fill and an outline option).

These functions were used when creating both canvases when needed. Even the grid function ended up being reused on the radar screen.

Creating the animation was the biggest challenge in the project because it was quite complex. When I first created it, I only intended to create the ship swinging from side to side, but decided to experiment with adding a blip-radar, the blip on which would move in sync with the ship on the main screen and I chose to add a scrolling semi-transparent bars over each screen to add to the authentic retro sci-fi aesthetic I was looking for.

Another challenge I faced was with parts of the animation that aren’t constantly occuring, for example the ship being red. Due to the use of requestAnimationFrame(), as opposed to using setTimeout(), I couldn’t simply say “This happens after x amount of time”. Instead I opted to add a countdown which would only trigger at certain points. Once the countdown hit 0, the change triggered, and if necessary the countdown was reset.