I worked with renowned design firm ESI to develop the Beacon, a stunning centerpiece to one of the world’s highest-performance buildings. I created the technical system that communicates with thousands of building sensors to animate the sculpture based on real-time building metrics. I also composed visual content for the system. The sculpture makes visible and public the extreme measures, otherwise-hidden, that the building takes to minimize resource use.
ESI has a great overview of the project and the content we developed. Below I’ve included a few details from ‘under-the-hood’. The samples below show a few of the code-generated patterns running during tests of the display. Some technical notes follow.
Technical Info
While early prototype code used Java, later development and deployment used primarily mobile web technologies: Node.js for server-side code, including interfacing with building data APIs via SkySpark, and WebGL (via Pixi.js and Greensock) for realtime rendering 2D frames to map onto the sculpture. WebSockets and some OSC helped glue various systems together. In development, WebGL was also used to model the sculpture (both the LED and LCG layers), with the possibility of porting those models to mobile devices for the accompanying tablet application.
Along the way I developed tools to help understand and validate the building data as it came online. In the very rough video below, you can see on the left a massing model of the building with colored cubes representing the temperature data coming from sensors around the building, as well as x-shaped indicators for the position of special fresh air vents in the building’s facade. On the right, the data has been mapped onto a 3D rendering of the Beacon, with color affecting LEDs and vents affecting the opacity of the outer LCG layer. The time-lapse data plays and clearly shows the effects of temperature on the building as the sun rises, moves, and sets throughout a day. The building cools and vents close at night.