AnyPixel.js
Project Vision
A permanent installation featuring 5,880 arcade buttons is delighting visitors to the public lobby of Google NY at 111 8th Avenue.
The project began when Google was renovating the lobby of their New York flagship building and needed a new sign. It couldn’t be just any sign; it needed to be something that was visually interesting, interactive and evergreen. It also had to represent Google’s brand in look and spirit.
The design team quickly concluded that a giant screen would have been easy to implement, but touching a screen just wasn’t the right fit. Their solution was to take the arcade button, a form factor and interaction model familiar to most and present it in a way visitors wouldn’t expect—as single pixels in a nearly 300-square-foot interactive display.
Each button holds a single LED pixel with full 8-bit color. The buttons are built into seven-by-seven-foot panels daisy chained together and controlled with Google Chrome. Each interactive experience on the display is a simple canvas and JavaScript web page. To keep it fresh, the “buttonwall” can be updated with new content via a web-based CMS.
The primary challenge was designing and programming content for a low-resolution 140-by-42-pixel display that is roughly 30-by-10 feet where every pixel is a button and every button is interactive at all times. The team overcame the challenge by rapid prototyping and testing, asking questions like: Is the design legible at this pixel width? Is the interaction response intuitively clear to the user? And, what happens if a class of 20 10-year-olds mash the buttons at the same time?
During the concept phase, they built multiple physical prototypes to refine the form—types of buttons, the distance between buttons and materials. Once the form was set, they shifted to the content that would live on the wall, testing and tweaking the animation and the code with their browser-based emulator.
The design team then took the content prototypes to a projection-mapping studio to see them at 1:1 scale. Once the wall was constructed at the production partner’s facility, they went through many more rounds of live testing to optimize the designs, interactions, feedback loops, colors and brightness levels.
The team thought the installation would be even more fun if all developers, coders and makers could build their own displays. So, AnyPixel.js is an open-source software and hardware library, making it possible to use the web to create big, unusual, interactive displays. Anyone can use the code and the schematics to create their own display at any scale or level of expertise.
AnyPixel.js’ straightforward hardware/software framework makes it possible to build any display where each pixel is an interactive element. It can be used to build an interactive display using light switches, lightboxes, or even balloons.
The content app software is written in simple web code. All someone needs to know how to do is draw on an HTML canvas element with JavaScript. The design team is excited by the enthusiastic response from the developer community to Anypixel.js.
And most importantly, AnyPixel.js is a warm welcome to guests—inviting interaction with motion and vibrancy. The office building receives thousands of people each day and the big, unusual, interactive display delights employees and visitors to the space in a very “Googley” way. No matter if they’re seven or 70, the smiles are the same.
Project Details
An interesting interplay between analog and digital technology. It creates an engaging insertion in the reception space that encourages interaction.
A new take on the interactive digital wall that allows for a more authentic and tactile interaction—evoking nostalgia with arcade button. A modular and simple system we will most likely be seeing a lot more of!
Sometimes, it seems designers are hesitant to share the secrets of their success. But I think it's extremely admirable when people make cool things and recognize that their work shouldn't be hidden or shared with only a select group. Making this system open-source demonstrates that these designers see the potential of AnyPixel to live and grow and change and are humble enough to know there are possibilities other than the one they created here. I am very excited to see the variety of weird displays people are going to create using this tool in coming years.
Design Firm
Project Area
300 sq ft
Consultants
Felix Woitzel (artist, creative technologist), Anders Hoff (artist, creative technologist), Selman Design (design)
Fabricators
Deeplocal (engineering, development and fabrication)