I’m what you’d call an “arts kid.” I graduated from Film Studies. My first job was in printing and graphic design. I used a computer every day, but that was only for design-related work. However, that all changed in 2013 when I was asked to create the first website for the Christie Pits Film Festival, an annual outdoor film festival in Toronto. Again, being exposed to only the arts, I knew nothing about building websites or what it would take to be a web developer — so I was literally pushed out of my comfort zone and into unknown territory.
What I Did About It: Commit to Being a Better Web Developer
My Inspiration Stemmed from Art
In summer 2007, I attended a retrospective exhibit on American artist Bruce Nauman, who is considered to be “[o]ne of the leading figures in contemporary art”¹ at Musée d’art contemporain de Montréal. “Notions of body and identity, the role of language, the phenomena of spatial awareness, and artistic process and view participation are recurring themes in Nauman’s art.”²
Joseph D. Ketner II, chief curator of the Milwaukee Art Museum and curator of this section, warns: “This exhibition is all about the visitor’s experience. Visitors will experience a disorientation of light and space, just as Nauman intended.³
One of the works that made an impression on me was Untitled (Helman Gallery Parallelogram), 1971. The bright green fluorescent lights that glowed within the vacant space altered my perception towards space itself, and left me feeling like I was caught in an uninvited trance. Having experienced that, I knew I wanted to develop my final a project in the same vein.
The Beginning: I was on the Search for the Right Tools
What it Was Like to Make First Contact with the Lights:
After purchasing the Hue lighting system’s starter kit, which included 3 specially controlled light-bulbs and the lighting-system hub, I started to review the developer’s documentation in an attempt to communicate with the system from my laptop.
After finding success using its internally built-in interface, I used my text-editor, Sublime Text, to try to communicate with the lighting system (it has a RESTful API which then sends and returns data in JSON format). After some research and trial-and-error, I successfully communicated with the lighting system by turning the lights on and off without the help of the system’s internal interface. It was a great milestone, but the next component would ultimately steer the overall direction of this project.
Another Inspiration to Add to the Mix: The “Hotline Bling” Effect
Although Bruce Nauman’s neon work was the initial inspiration for this project, I came across another one: The music video for Hotline Bling by Toronto rapper Drake. For anyone who hasn’t seen it before, Drake dances around in an empty space, illuminated by an array of bright neon colors — much like Nauman’s work mentioned earlier.
According to Drake himself, the inspiration for the art direction originated from the works of another contemporary artist James Turrell⁴. Since there was no way of avoiding Hotline Bling because of the music video’s art direction and Drake’s off-kilter dance moves, the project’s direction had been redirected since the public are more familiar with pop icon Drake than contemporary art figures like Nauman and Turrell.
Finding Color Using Unsplash
Now that a clear direction had been set into play, it was time for me to envision how to introduce colors into this project. Although there were simpler methods to inject colors to the Hue light bulbs, I wanted to undertake another interesting approach: Allow the possibility of any color to be randomly administered to the lights every five seconds.
Being an admirer of the beautiful photographs featured in Unsplash, I wanted to integrate the colors into this project in some capacity. After some research, I stumbled upon Unsplash’s API which allowed me to embed any photos featured into a project.
Finding Color Using Instagram
In the past, I experimented with Instagram’s API and discovered a lot of its capabilities and limitations. Unlike Unsplash, Instagram users are able to search for images through hashtags. As a result, the Instagram API added a social component to the project by allowing everyday Instagram users to contribute to this project by adding the hashtag #hotlineblingapp to their photos, which was will then be used for this project.
Although there was the risk that images with the hashtag would be too dark, an initial set was created using bright colors — just as a precaution. In order to ensure both Instagram and Color Thief worked in conjunction with one another, I devised the following work-flow:
- Automatically obtain an image from Instagram, with the hashtag #hotlineblingapp
- Extract the image’s dominant color using Color Thief
- Repeat those steps after every five seconds.
Deliver Color To Lights
After extracting the dominant color from the Instagram image, the next step was to send the color values to the Philips Hue light bulbs. Although it may sound trivial, I experienced some unexpected roadblocks along the way.
I’ll break it down for you: The Hue registers colors differently from Color Thief. The Hue registers colors based on hue and saturation values from a chart, while Color Thief outputs as RGB color values. As a result, it’s as if they’re speaking in different languages, eventually getting lost in translation. However, the Hue has an ever-growing developer community with a message board consisting of user findings and code snippets. After some research, I came across a code snippet that converts RGB color values to values that the Hue can comprehend. After numerous tests to ensure everything worked, the project’s work-flow evolved by incorporating the injection of the image’s dominant color to the light bulbs before repeating those steps every five seconds.
The Final Touch: Building the Interface
DRAKE. Once the song reached its conclusion, the lights turned off.
What I Learned
On the last day of class, a select few had the opportunity to demo their final projects to the classmates and guests. Prior to the presentation, there was no indication that lights installed in the school’s learning commons were the Philip Hue light bulbs. Thus, when it was my turn to present and the lights started changing colors it came of surprise to everyone in the room that my code had controlled the lights in the room. Also, when I asked a member of the audience to type in
DRAKE the song started playing along with the light show which led me to start imitating Drake’s dance moves in front of everyone in the room.
Although the project was a success at the time, there are learnings that needed to be addressed.
- The initial intention for this project was to allow anyone with the Hue lights to easily use this application. However, for the purpose of completing and demoing the project on the last day of class, I invested a majority of my resources to get the overall system to work. As a result, this project was more akin to an art installation, instead of a tool for anyone with a Hue lighting system.
For those interested, I’ve posted this project on my personal Github, so feel free to “hack” your version of the Hotline Bling App.
- “The works of artist James Turrell has been described as mind-altering experiences that contort reality and change people’s ability to perceive truth.” (Alissa Walker, http://gizmodo.com/artist-james-turrell-truly-flattered-that-drake-rippe-1738131548)