How “Hotline Bling” made me a better (and more confident) web developer

A case study for Hotline Bling App

Still from Hotline Bling music video

What I Did About It: Commit to Being a Better Web Developer

In September, 2015, I enrolled in a 12-week evening course dedicated entirely to JavaScript. Unlike the web development bootcamp I enrolled in before, the entire class was able to fully digest the material, including me. The course was taught by an acclaimed web developer, Wes Bos, and a talented support system of highly knowledgable teaching assistants.

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.”²

Bruce Nauman — Untitled (Helman Gallery Parallelogram), 1971

The Beginning: I was on the Search for the Right Tools

Although this article is about the development of a JavaScript project, I won’t dive deep into the technical details. Instead, I’ll share my overarching approach and the obstacles I faced throughout the development of this project.

Philips Hue Light Bulb

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.

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.

Drake — Hotline Bling, 2015 (Director Credit: Director X)
James Turrell — Dhatu, 2009 (Photo Credit: Florian Holzherr)

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.

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.

  1. Extract the image’s dominant color using Color Thief
  2. 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.

Project workflow

The Final Touch: Building the Interface

Even though the focus of this project was to recreate the Hotline Bling experience from the Philips Hue, building the user-interface was the final component to this project. The inspiration came from the minimalist branding of Drake’s “Started From The Bottom” billboard, which was laid onto the one-page website. Although the initial color of the page was gold and black, I used JavaScript to change the color of the page according to the dominant color scraped from Instagram. In addition, I added an “easter egg” where Hotline Bling will play along with the light(s) if the user types in DRAKE. Once the song reached its conclusion, the lights turned off.

Hotline Bling App’s User-Interface

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.

  1. Also, since the time of this project, a lot has changed from a technical stand-point. This project does not currently work since Instagram changed their API this past June. However, after watching tutorials on ES6 — the latest version of the JavaScript language — it will be a great opportunity to implement the improvements to this project.

Footnote

  1. http://www.macm.org/en/expositions/bruce-nauman/
  2. http://www.macm.org/en/expositions/bruce-nauman/
  3. http://www.macm.org/en/expositions/bruce-nauman/
  4. “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)

Social introvert from Canada, currently living in England. Interaction designer at Government Digital Service.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store