Side projects
A shocking Halloween website design
- Side projects

Lab notes: A shocking Halloween

Head shot of AlexBy Alex Crooks

Just before Halloween, the team were discussing ideas for our next experiment. We’d been playing with a Raspberry Pi or two in the office and wanted to use one in a hack project, ideally bridging the gap between the internet and the physical world.

After a bit of back and forth, Oli joked “Why don’t we let people shock us with dog collars on over the internet”. Everyone laughed! But as the laughter subsided, you could sense an idea forming in the heads of the team. An evil idea…

“Why couldn’t we let people shock us over the internet?” and, from that moment on there was no stopping this (stupid) idea.

What follows is a breakdown of the good, the bad, and the painful.

The prototype

The initial concept for the hardware was to use a single joke shock lighter to deliver a shock to 6 people. Each person would be connected to one of the Raspberry Pi’s output pins and by sending a signal from the Pi to the pins, the circuit would direct all the voltage to one person.

When using the joke lighter conventionally this wasn’t an issue, however in our setup the switching chip had to be grounded in order to function. This resulted in the shocker’s capacitor constantly discharging through the chip, which meant it never reached the higher voltages needed to deliver an electric shock.

We went to You Need Us in Portsmouth and bought half a dozen better quality joke lighters. We took them apart, removed the switching chip and wired up one shocker for each person and used a manual push switch in place of the chip. With the new circuit set up and reliably delivering shocks (between 12V and 20V), the only task remaining was to automate the pressing of the push switches.

Meet Sid, dealer of pain

Now we had actual buttons to press to deliver the electric shock, we needed someone (or something) to deliver the shocks. Enter Sid.

For an upcoming project, we’ve been building a robotic arm (called Sid) which has an incredible level of accuracy. We modified some of the scripts that control Sid, and with the accuracy of the robot arms servos, we were able to precisely hit each of the 6 buttons required. Sid was our dealer of pain – no one was safe.

Tin foil, wires and tape

We rigged a crude working model using the joke lighter, some long wires and some bits of tin foil. Sid swung into action and the first shock was delivered – and it was a good one.

It may not have looked pretty, but it was effective. We found that putting two pieces of tin foil on one hand and around the fingers was much more effective than on the wrists. The tighter the foil the greater the shock. So we created tin foil rings to wear, which came in handy for when you needed to leave the game.

The design

Our hack projects look to achieve two things:

  1. Prove a concept with new technology
  2. Engage with audiences in new ways

Messing with Raspberry Pi’s, tin foil and electric shocks is all well and good, but if there is no audience to enjoy our output there is little point.

First things first, we needed to capture the essence of Halloween, to do this the Si team needed to be turned into gory zombies. This set the tone and gave Tom the opportunity to photograph each person and then make everyone look as gruesome as possible.

Si digital Zombies, before and after

An engaging experience

We thought the idea was sound, after all who wouldn’t want to shock us whilst we were working? Now we needed to ensure that our audience would enjoy the experiment and share it.

When sketching ideas for the design we expected that most people would want to watch the live webcam feed of the day, so we made sure we gave this focus.

Shocks were going to be delivered by Tweets coming in from the public, so we came up with the idea of taking an instant picture the moment the shock was delivered, which we would then Tweet to the user who sent the shock (more on this later). We hoped that this instant and tangible feedback would encourage the audience to share.

Some new technologies were being used on this project, and we like to show people what’s behind the curtain, so we needed to explain what was happening visually as well. Illustrations were created to explain the tech and how it all connected together.

The technology

Making what we were doing shareable was paramount to the success of this experiment, and to do so everything had to happen in as near to real time as possible. Our Node.js server used Twitter’s real time streaming API to listen for Tweets with the hashtag #shocksi. When someone tweeted with that hashtag our server immediately (under 2 seconds) grabbed the tweet and saved it to our database.

We had a queue processing system running every 20 seconds that grabbed all new tweets from the database and added them to the “shock queue”. The tweet at the front of this queue was processed and a random member of staff was chosen to get shocked. An “incoming shock” message was sent to every visitor on our site with a 5 second countdown on screen.

Our Raspberry Pi received commands from the server and commanded Sid (the robot arm) to move to the precise location of that staff member’s push switch and hold it down until a scream was heard (or one second).

We created an admin management page for each member of staff where they could set themselves as “Online” or “AFK” (away from keyboard). As long as they were set to Online they would be randomly picked by the server to be shocked.

The web-cam

The live office video feed was the center piece of the experiment and it had to be as real time as possible. We tried many off the shelf video streaming solutions but all failed to deliver on our target of under 1 second delay. So after experimenting with more techniques than we’d like to admit, we finally settled on utilising the NGINX RTMP module to receive an RTMP stream from ffmpeg running on the Raspberry Pi. If that means nothing to you then the important takeaway is that we had a solution that was self hosted giving us full control over the configuration. This resulted in a delay of just under a second, perfect!

The shock-cam

We wanted to take a close up photo of ourselves at the moment of the shock. To do this we used the built in webcams on each of our machines and a bit of HTML5 navigator.getUserMedia() to display the feed on the admin webpage so we could line ourselves up in the shot. We used the canvas element to take a snapshot of this video feed at the precise moment the shock was delivered and then greyscaled every pixel to match the dark and eery theme of the experiment. This image was then overlayed on the live office cam feed for the viewers to see. It worked perfectly as the image appeared less than a second after you could see us being shocked in the office cam feed behind!

The launch

We agreed that we would launch at 9:30am on 31st October and in advance of this we would put out a couple of teasers. In the run up to the launch we Dribbble’d a Raspberry Pi illustration and a gif of the making of our zombies.

The night before we put out just one tweet from the @sidgtl twitter account, announcing the project. We hoped this would gather some interest, but we weren’t quite ready for what happened the next day.

The longest day of our lives

The next morning, after a team coffee and a few final checks, everyone was hooked up and ready to launch. The webcam was switched on and we were officially live.

Shocks started to snowball and people were tweeting about shocking us, raising awareness of what we were doing. Prior to launch, we had created a list of sites we were going to submit the project to. The likes of Reddit and Hacker News. So, at 10:30am only an hour into the experiment, we went off to submit links only to find out that the public had beaten us to it. This was something we could’ve only have wished for – people sharing the page for us.

Before lunchtime, we’d hit number one on Hacker News and Tweets (and shocks) were rolling in by the second.

The server meltdown

By 11:30am we were averaging 400+ concurrent people on our Halloween page, shocks were delivered every 20 seconds and the stream of tweets was constant.

We proactively monitor our servers which we host with Rackspace, by midday the web services were using up all of their allocated RAM trying to deal with the traffic. Snapshot images of us being shocked were slow to come through and for some visitors, our site didn’t load at all in time. We had to distribute the load and fast.

Oli, who handles our servers and networks, decided that rolling out a load balancer would be our best option as we could add more servers where needed. To do this, we needed to move people from our main site (sidigital.co/halloween) to a new address. The new address would be serviced by a load balancer, which would then send that load to a minimum of 2 new servers. As the team were coming up to lunch, it was decided to take it early so this new solution could be rolled out as quick as possible.

Oli (from Si digital) and Oli (from Rackspace) discussed the load balancing option and how we would go about doing it, including any issues with deploying our saved server images. It’s comforting to know that we have these resources at hand. By hosting with Rackspace, it provides an extra level of confidence.

Within 80 minutes we had 2 servers and a load balancer servicing a new domain to send people to (halloween.sidigital.co). It was by far the quickest production server deployment we had ever done.

After switching visitors to the new domain, we noticed a significant speedup on our primary server, which was still dealing with image uploads from our workstation webcams. Everything had smoothed out and the 400 concurrent visitors were able to see the site in all its glory. Rackspace then tweeted about what we were up to, driving a load more traffic to the servers – just to make sure!

The Twitter ban

One great feature that only 11 people got to see was a tweet from our halloween bot with a direct link to the shock photo. We setup an account https://twitter.com/sidgtl_shock that would tweet the user the photo after the shock occurred.

Unfortunately, despite testing this feature without issues, Twitter suspended the account only 5 minutes after launch for sending “unsolicited tweets”. We can understand the reasoning, Twitter had no way of telling that this wasn’t spam and hopefully for our next experiment we can find a way around this!

The marketing team

It was interesting to read some of the comments on the web about the project. Some said ‘Props to the marketing team’. This made everyone in the office chuckle. There is no marketing team at Si digital. In a company of six, everyone’s opinion counts and anyone can have an idea about anything that they feel would be beneficial.

Together, the team work hard to evolve and execute these ideas. The startup term ‘Growth Hacking’ was mentioned a few times and this project is a testament to it. It didn’t use traditional marketing techniques but harnessed the creativity and technical skills of a team who are passionate about the industry they work in.

The stats

This is the first public launch of a Si digital experiment mixing the digital and physical world. It’s safe to say that when we first came up with the idea we never expected the attention this project got.

With each of our experiments, we aim to prove a use (practical or otherwise) for new technologies whilst also building a new audience for us. For this experiment, we used Twitter to spread the message and drive interest. The live webcam feed coupled with the instant picture of us getting shocked gave our audience something tangible to engage with.

In less than two weeks, we came up with the concept, built prototypes and got the whole system up and running. The site only ran for 8 hours whilst we were in the office, our planning and the choice of experiment certainly helped us drive the traffic we saw.

Because we are a small and flexible team with a wide spread of technologies and skills, we are able to successfully execute these types of projects.

We did this in less than two weeks with no budget, imagine what we could do for you! Get in contact.

Next Post

Get started

Plan your project