Wednesday, 21 June, 2017 UTC


Summary

Code is Creative”.  You showed us how true that statement really is at this year’s SIGNAL San Francisco.
Your creativity was made readily visible on the 40 foot video wall (and interactive art display) we hosted upstairs at the show.  We handed out Hackpacks, hackable hardware badges with a Particle Electron onboard, which had the ability to control that massive display via text messages.
Poking, then Automating, then Drawing…
One of the first groups to figure out how to draw on the video wall was our friends at MissionMode.
By day, MissionMode builds incident management and notification solutions.  At SIGNAL, MissionMode proved they are also talented at reverse engineering. Their team of five SIGNAL attendees was the first to take down the full wall, drawing the MissionMode logo:
I asked MissionMode if they would share some of their memories and “A-Ha!” moments from their awesome wall-hack and they kindly obliged.  From Scott Anderson, their key breakthrough was realizing how the giant display and the HackPack badge fit together:
“Obviously, the first thing we tried was to send messages [to the board] via the Twilio API. Unfortunately that was blocked – too easy. A brief glance at the Particle code made me think that it would be an avenue of attack, but it seemed like it had to be physically connected”
He continued,
“So this left somehow automating the task of sending commands via our phones. We did some testing during the keynote (cough) and determined that there was some level of rate limiting or just natural rate limits in the request response loop through the sms interface and realized that we would need to split this task across multiple devices to have a chance of completing a picture before it was too damaged by random other conference-goer activity.”
From “A-Ha” to a 40’ Tall Node.js Framebuffer
Plan in hand, they then set to work doing the necessary image conversion, communications linking, and… work-splitting.
Their prototyping quickly coalesced into a full flow.  They used Affinity Photo to resize images to match the 75×26 ‘big pixel’ size of the wall, then Node.js to convert the image into the data they needed.  Their Node.js code is infinitely repurposable for your own image conversions – here’s it is:
const rgbHex = require('rgb-hex');
var getPixels = require("get-pixels")

getPixels("pattern.png", function(err, pixels) {
  if(err) {
    console.log("Bad image path")
    return
  }

  for (x = 0; x < pixels.shape[0]; x  ) {
    for(y = 0; y< pixels.shape[1]; y  ) {
      console.log("'"   x   "," y "," rgbHex(pixels.get(x,y,0), pixels.get(x,y,1), pixels.get(x,y,2)) "',");
    }
  }
})
After dividing up the coordinate and pixel work between the team, they were almost done.  The final step was to link Apple’s Messages app & JavaScript to unite the badges and the wall.
Here’s what that final step looked like:
Creativity, Spontaneity, and Ingenuity: Code Becomes Art
I’ll share an inside piece of information: we didn’t know what to expect with the HackPack and the Video Wall display.  Suffice to say, we were so impressed with where you took it; “code is creative” really echoed.  The community made The Wall a big success… and a lot of fun.  We got to see lots of impressive wall hacks from MissionMode and other talented friends at the show.
Want to see us again or missed us in San Francisco?
Don’t worry, we’re coming to London in September for SIGNAL London 2017.  I can’t tell you exactly what we’ll have there, but I can tell you this – you’re going to have a great time.  Whether you hack something on site or build something afterwards we can’t wait to see what you build.
5 Phones, 1950 Pixels: How MissionMode Hacked the SIGNAL 2017 Video Wall