An homage to Alien: Isolation - A front-end code version of the motion tracker built with SVG, CSS and making use of JavaScript’s device motion.

Alien is one of my favourite films and when Alien: Isolation was revealed, it went straight on my radar. Creative Assembly did such an amazing job recreating the look and feel of Ridley Scott's 1979 classic. The lo-fi, retro-futuristic aesthetic was achieved, in part, by taking the UI, transferring it to VHS tapes and recording the playback through a CRT tv. Other nice touches are the inclusion of the Xbox’s Kinect Sensor that allows you to peak out and the lets the Xenomorph hear you...unfortunately I didn’t realise this until after a few encounters.

To give a more CRT feel to everything I’ve added a blur on the edges of everything, created as an SVG filter. The dashed lines on the radar are achieved with the dash-array and dash-offset CSS properties. The directional indicators (to the left, right and bottom) light up by checking for the current location of the ping on the circumference. If it is within their space they begin to “light up”. As the ping moves away they fade off again.

The original plan was to just have the ping move with the mouse movement. I took this a step further, making use of the device compass available on mobile devices. I did two years of games development at university and was able to use knowledge and code to implement the movement around a circle (converting the code from C# into JavaScript).

Please note: this uses experimental technology and may not work on your browser. During testing in 2020 I found that the only mobile browser that worked was the one built into the Pocket app on iOS. However, I have uploaded the demo if you wish to try it out.

Where next?

This could just be the start of something much more. If you’re interested in collaborating I have a bunch of ideas of where this could go from here:

• A ping that moves in all directions (up and down as well as around).
• Network this to have two devices pinging at each other in real-time.
• Add sound effects to the ping.
• Have a “pulse” fire out from the centre to update the ping (and have the ping fade away like a real radar).
• A loading screen in-keeping with the retro aesthetic.