Dropping Calls and Drinking Beers at Hollywood Hack Day

Hollywood Hack Dayhack.jpg

First things first: Hollywood Hack Day rocked!

Rahim Sonawalla, Ryan Chisholm, and Abe Burns have truly created a premiere hacking event in Los Angeles. Kudos to them.

I had my doubts about the LA developer scene, but was quickly convinced otherwise. Just look at all the great hacks developed over the weekend.

io/LA also proved that their space is made for this shit. I really hope some of the winners utilize their free month here so I can pick their brains. I’m looking at you Travis Chen.

So, what’d I build? #

Two things:

  1. Spectrogr.am 2
  2. Call Drops

Spectrogr.am 2 #

Chris Jahnle [1] and I sought out to make Spectrogr.am more social and get completely smashed two nights in a row. I think we succeeded at the latter a bit more, but the hack turned out nicely as well…

The spectrum analysis algorithm was completely re-written and we pulled in SoundCloud comments and commenting to add a nice social layer. I’ll talk about this hack a bit more once I iron out the bugs and deploy it, but I really wanted to publicly thank Chris for his math-fu skills:

You rock dude. And, that 1am Thai food was the smartest decision we made all weekend.

Call Drops #

With only a few hours of the competition remaining on Sunday, I had a wave of inspiration (or insanity) fueled by the perfect combination of dehydration [2] and Chipotle.

I wanted to build a real-time call visualization using Twilio and Node.JS. Since the amount of calls would drive the viz and could get chaotic quickly, I decided to visualize something organic: rain drops. I fired up the Hipster Stack and got to work.

I. Drops

I began by creating a rain drop shape in CSS:

border-radius: 100%;
border-top-right-radius: 0;
height: 20px;
transform: rotate(-45deg);
width: 20px;

Then I wrote a water ring animation utilizing the CSS3 transform property. Finally, I tied this all together with some basic jQuery to drive the random drop creation and animate the falling motion. In a few minutes, my browser was filled with random little rain drops. I literally made it rain.

II. Calls

Accepting calls with Twilio is as easy as setting up an account and creating a basic TwiML responder. I then used Pusher to notify my client-side app each time a call came in on the server. Which translates into “each call created a rain drop.”

Rad. But, it was missing something

III. Eureka!

What if callers could record themselves making a rain drop sound and then the hack played that sound when the drop fell?

Adjusting the TwiML was simple:

  <Say>At the tone, make a rain drop sound.</Say>
  <Record action='/drop' method='POST' maxLength='3'/>

Then, I adjusted the server-side Pusher code to include the received Twilio recording URL in its post back to my client-side app.

I had to wrack my brain a bit to get the Twilio recordings to play nicely with SoundManager2, but here’s the three main gotchas:

  1. Make sure useHTML5Audio is enabled.
  2. Add “.wav” to the end of the recording URL
  3. Load the audio before creating the drop

IV. Fin

With all the technology in place, I went ahead and cleaned up my code then added some quick pretty to the UI. The hack itself took less than two hours to complete, and I’m damn pleased with it.

Elmer Thomas took a nice video of the presentation, but you should just try it out yourself by going to bit.ly/calldrops, dialing 1-323-419-0002, and making a rain drop sound. May I suggest: “Bloop”

I can’t wait to use this technique in a more practical way at some point. And, I definitely can’t wait for the next Hollywood Hack Day.

[1] Chris is an online marketer at The Collective and an all around nice guy.

[2] The previous night’s bar crawl: Power House > Five-0-Four > Velvet Margarita > Frolic Room.


Now read this

Isotoping Sound City

Last week I was tasked by Mr. Grohl to build a real website for his upcoming Sound City documentary. And by real I mean: a place where a synopsis, cast, trailer, and other pieces of media can live and be discovered… not an FM radio or... Continue →