My weekend at Lincoln Hack 2018, featuring websockets, pixelated Lancaster Bombers and winning 24 cans of Red Bull

Hackathons are an absolutely brilliant way to improve skills, meet and talk with like-minded individuals and experiment with all the random/quirky/unimaginable/silly tech ideas that you could ever dream of. Whether it’s hacking together various bits of hardware to build something bigger, mashing up APIs with other APIs to create swarms of meaningful data, or simple exploring a brand new technology to create something new and applicable in the real world, you’ll definitely find it at a Hackathon. If someone has an idea, then developers + coffee + no sleep for 24 hours is an equation that will make it possible.

I spent this weekend at Lincoln Hack 2018, a Hackathon run by Digital Lincoln; a local group which brings together a diverse range of people with an interest in digital technology and the online world. I entered the “freestyle” challenge, with the primary requirement being that the hack had to be somehow related to Lincoln.

The idea

My idea for the Hack was to create an interactive game, which could be played across multiple mobile phones that were positioned next to each other in a row. This game would involve holding and releasing a button on a master device to keep some object in the air and avoid hitting the bottom or top of the screen, then once the object has made its way to the end of one phone screen it would then move onto the next phone’s screen, and so forth. My hope was this game could be played across 20+ phones. Easy right…

History

Lincolnshire has a great RAF heritage, with a high number of the UK’s most prominent RAF bases being located in and around Lincolnshire. With the 617 squadron, famous for being involved in the Dambusters Raid, being formed at RAF Scampton; an RAF base roughly only 5 miles away from where the Hackathon was taking place.

Therefore, I decided to give my game a Dambusters theme. There’d be a little introduction about Lincoln’s 617 squadron, then the object the user would keep in the air would be a Lancaster Bomber, and each mobile phone would be labelled with the name of a location that was on the route in the Dambusters operation. A score would increment to add an edge of competition to the game.

How?

Socket.IO (a popular JavaScript library for building real-time web applications) was something that I’d been wanting to get into for a while, so when it came to choosing a technology I’d use to communicate between the devices, it was the clear winner. This would run off of a Node.js + Express server. I’d style the application up and create my sprite animations of the plane using LESS, and manipulate the DOM with JQuery. I’d also use Nodemon so I wouldn’t have to restart the Node.js server upon every change.

Results?

The build went quite well! Socket.IO worked really great, and the pixel-style 8-bit artwork of the application looked good too. Overall I was pleased with what I’d built. I even won 24 cans of red bull, being awarded the “Best use of 4 £1000 iPhones” award! However there were a number of issues, as detailed below.

Snapshot of the game in action

Challenges

One of the main challenges I faced in building this was how to move each pixel on the screen in such a way that was seamless, transitioned well and could easily be communicated across to other devices via Socket.IO. Initially I implemented this using JavaScript’s setInterval() function which repeatedly increased the x-position and y-position of the object until the interval was cleared. Although this looked good and transitioned well, it could maybe have functioned better, as inter-screen transitions could sometimes be a bit jittery and there were often issues with the collision detection in the game.

Another challenge was born out of the need for the phones to move the object across a portrait screen that was in the real-world actually set as landscape mode, I initially did this through increasing the object’s position from the top of the screen, rather than the left, to appear as moving sideways when presented on a landscape device, again this could have maybe been done better, and maybe ensuring the game was only playable in landscape mode would have made things easier; as every calculation done had to take into consideration that the game would actually be played rotated by 90 degrees.

The most difficult challenge in this Hackathon project was in communicating between server and all the mobile screens in such a way that was quick, efficient and appeared seamless to the player. A number of things had to be taken into consideration in the communications, including emitting the last known x and y positions of the plane from each device back to the server and then back out to the next device along, as well as working out which particular device in the row to move onto. However this was made a bit easier by Socket.IO’s socket.broadcast.to(client_id).emit(); function which allows you to communicate with an individual client (device) via its ID, as well as the socket.broadcast.emit() which allowed me to broadcast a message to all devices connected except for the sender.

Conclusion

Using a new technology such as Socket.IO was quite challenging to begin with, however it quickly became apparent how powerful this technology is. Being able to communicate between devices in real-time is a feature could be implemented across such a wide variety of applications in a huge number of contexts, from real-time chat/messaging web applications to real-time interactive games like this project, there’s such a huge potential of things that can be achieved by using this technology. Socket.IO is definitely a technology that I’ll be building more projects with and looking into in more depth!

Overall, a successful and fun Hackathon, with a nice exposure to yet another interesting and new technology. Many lessons were learnt and many bugs were fixed (and created). If you’re in the technology industry, or just simply looking to get started in it, Hackathons are such a great way of mingling and working with like-minded developers, designers, students, entrepreneurs, hobbyists and tech addicts in an incredibly fun yet productive manner.

Won 24 cans of Red Bull!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s