“Sometimes the best form of interactivity is one that enables other forms of interactivity to be created.” —juror Harold Jones

“In a world full of touchscreens, I love how this gives new life to inexpensive buttons and switches.” —juror Ben Hughes

Overview: Google might have the greatest public lobby in all of New York City. Try not having fun while interacting with the 5,880 light-up arcade buttons—controlled by a web page—that make up its lobby’s permanent installation. To beget even more fun, AnyPixel.js was created to enable everyone, at any level of expertise, to build their own displays, simply by running apps they created for them. With this open-source software and hardware library, you can hack code and schematics to create your own version of New York City’s greatest lobby installation. 

•The installation launched in Google’s New York City headquarters in spring 2016. 
•Off-the-shelf arcade buttons—5,880 of them—were used as pixels.
•You can learn more about the display and AnyPixel.js at a dedicated website (googlecreativelab.github.io/anypixel); it includes a link to the open-source instructions on GitHub.

Comments by Google Creative Lab: 
What are the project’s core features? “AnyPixel.js’s straightforward hardware and software framework make it easy to build any display where each pixel is an interactive element. You could use it to build an interactive display using light switches, light boxes or balloons. The software is written in simple web code. All you need to know is how to draw on an HTML canvas element. The content on the installation at Google New York is nothing more than a series of JavaScript web apps. Since everything is open source, anyone can create her or his own interactive display. The hardware varies by your execution when you build your own display, but you can learn more about the one we used at Google at github.com/googlecreativelab/anypixel/tree/master/hardware.”

What software, back-end technology and programming languages were used? “The permanent display in Google’s New York headquarters uses AnyPixel.js and has three major components. First, hardware: independent modules each contain a custom driver and an LED board with 196 pixels—buttons with embedded LEDs. The modules are daisy-chained on an IP network. Next, the front end and interactive apps: the custom web content that drives the interactions. They define what the pixel states should be—colors—and they receive button presses as events. For example, a very simple app could change a pixel’s color when a user touches it. All that is needed is knowledge of Canvas and JavaScript. Finally, the back end: a Chrome application runs the apps and handles all communication between the hardware modules and the app. It communicates with the modules over user datagram protocol and also handles any system diagnostic data.”

Were there any specific demands that made the project easier or harder? “We wanted to make something anyone can play with—even a class of kids learning to program. So we spent a good deal of effort making the content creation system very simple. The layers for putting content on the wall—and receiving input from the wall—are abstracted for the content developer: you simply draw your pixels to a canvas and receive button clicks as events. Anyone who can make a simple piece of web content can build interactive content using AnyPixel.js.”