Last week we held our realtime themed hacknight sponsored by the awesome Pusher. Pusher is a simple hosted API for quickly, easily and securely adding realtime bi-directional functionality like realtime chat, video chat, activity streams and more to your apps. We challenged attendees to create something cool using Pusher in just 3 hours…
We had a great turnout with students, designers, entrepreneurs, Simpleweb team members (past and present) and brilliant local developers with a range of skills and experience, and they did not disappoint! The quality of hacks was outstanding and we’re super proud to be part of such a great tech community.
After 3 hours of hacking, Pusher developers Jamie and Hamilton chose a winner to take home this Parrot MiniDrone and 2 runners up who went home with an envelope full of cash each. Simpleweb had no say in the judging, meaning our developers were free to participate and eligible for the prizes…
So, without further ado, here’s a lowdown of the hacks we built on the night (winners at the end)…
Created by CookiesHQ Director and Ruby on Rails developer Nic Alpi, Feeling Lonely connects multiple users via realtime video chat. Users can login and connect with anyone and everyone who’s also logged at that time. Nic and the Cookies team have since been using the app to video chat with each other in the office.
Hack the DJ
This app allows a DJ to pose a question to dancers in a club (for example “Are you liking this track?”) and gauge a response.
The DJ would have a dashboard screen where (s)he could send out a question to everyone on the dance floor and then have the results visualised. Each dancer can use their phone to receive a question and then vote yes or no in response.
@Kidatart and Jack Barnett
Created by freelance web developer Jack and developer at Motasoft, Junior, Plylstr enables people to add songs to playlists from their phones at parties. When a user visits the website, they’re given the option to either create a party or join a party. If they create a party, they are given a Party ID and if they join a party, they have to provide one.
Users can search for a track of their choice on Soundcloud. After a user has selected a track from the list, it’ll be added to the main playlist on the computer.
When a user adds a track to the playlist they’ll send a load of data along with it, including a track ID. Plylstr then does a quick search on the Soundcloud API and retrieves an MP3 link and plays it. When that track finishes the next track is loaded up on the playlist ..so on and so forth.
Jack and Junior intended for the app to save cookies so that users could only submit one song every 5 minutes, but they ran out of time – nice idea though!
Simpleweb Front-End Developer Mike wanted to represent Tweets as sound.
He created a simple Node.js/Express server which consumes Twitter’s streaming API, filters Tweets by those with geo-location data, and sends the longitude/latitude co-ordinates for those Tweets to the client using Pusher.
A simple webpage was created which translates that data to sound using the web audio API. Latitude is mapped to the pitch of a sound, and longitude is mapped to panning.
Check it out here http://tweet-fm.herokuapp.com
PusherBreaker was created by Developer at CookiesHQ, Denis. PushBreaker is a standard breakout game that you control with the gyroscope on your phone.
When players start the game on a PC they are asked to sync with their phone, which then becomes the controls for the game running on the PC.
Denis didn’t manage to finish the game on the night, but he did send over this .gif showing how the game was supposed to work.
Popularity Contest, created by web developer at Lobster Pictures, Tim Halford, is a realtime multiplayer HTML5 game. In each round, players must try to pick the most popular side (left or right) before the time runs out.
Whiteboard, created by Ben, Beth and Nick from local development agency Worthers, was inspired by a moment of frustration when Ben was speaking with a colleague over Skype and was unable to sketch his thoughts for his colleague to see immediately. This inspired the idea of a shared drawing space that users could place images into and draw on top of, aiding collaboration and communication.
3D Shooting Game
Charlie, web app developer at Bohemia Interactive Simulations created this great multiplayer shooting game where users are represented by blocks. Check out the gif below or play it yourself here http://charliejwalter.net/hack/.
We loved this game and were playing it in the Simpleweb office the next day. We played it so much that we exhausted Charlie’s Pusher daily message quota. Thankfully, the kind folks at Pusher upgraded Charlie so that we could keep on playing. Game on!
3rd place – Follow The Music
Developer, coach and project manager, Coen (compassmentis.com), created an impressive game where users could press up or down arrows to guess how a song would change in pitch.
Opting to use existing libraries to help him create something fun and impressive in the short three hours, Coen decided to use Highcharts, a charting library he’d been using a lot recently.
After rejecting a few other chart-related ideas, he realised that a bar chart looks very much like a frequency distribution on a sound panel, so he decided to create a moving bar chart, which was driven by music. To make it more fun, Coen introduced a line chart, showing the player following the bar chart.
Check out this video of the game in action…
2nd place – Gyrofight
Ben and Rory, Computer Science students at Bristol University, decided to use Pusher to implement a simple cross platform 2 player ‘shoot-em-up’ game.
Players scan uniquely generated QR codes off of a web page and Pusher then sends gyro data from the mobile phones to a web server running Node.js. Players can shoot by tapping and move their characters by rotating their device.
Using Pusher’s channels, Ben and Rory created private sessions so games and players do not conflict. The game was then smartened up with some css3 animations and fancy images (with a few of the team’s favourite places in them).
Check it out on GitHub now.
1st place – Push for Pusher
And in first place we have Simpleweb Developer Adam and University of Bristol student Jamie with Push for Pusher.
Currently, Pusher allows users to add realtime web-browser push notifications to their web apps, but doesn’t support mobile phone push notifications. This hack is a service for developers to add push notifications into their iOS apps, a feature that Pusher doesn’t currently offer and that Jamie and Hamilton found very impressive.
An iPhone app and a Ruby script are used to build an ‘in the middle’ service that takes your Pusher account details and subscribes to an APN channel listening for message events.
Devices register against an account and push messages can be sent to all (or at some point a specific) device.
Check it out on GitHub here.
A massive thanks to everyone who came, and a huge shoutout to Pusher for sponsoring. We had a great night, its always amazing to see so many fantastic local creatives making cool stuff!
Keep an eye on our Meetup page for details of the next Simpleweb Challenge.