Code And Beats: Music Powered Twitter Wall

I mentioned in a previous post that I was going to Code And Beats. I could’ve worked on work work. I could’ve worked on non-work work. But I didn’t do either. Instead, I experimented with some visual effects in Flash — combining video, audio input, and tweets.

By 2am, here’s what I had come up with! (I’ll post the code soon eventually)

Code & Beats: Music Powered Twitter Wall from Brian Shaler on Vimeo.

Fun stuff! I’m interested in seeing this event come to Phoenix. We just need to get the organizer (+developer +designer +DJ) Avi to fly out and then round up a few local DJs with some good electro material. Un tiss un tiss un tiss…

Also, here’s a separate pic I snapped of the Twitter wall:

Code And Beats: Music Powered Twitter Wall
Code And Beats: Music Powered Twitter Wall

I should’ve put together a video showing more of the background dancing clips. Some of them were pretty excellent!

Code and Beats

I found out yesterday that there’s going to be a rad event called “Code & Beats.” If it turns out to be as fun as it sounds, I’ll probably lobby to bring it to Phoenix.

Here’s the basic premise:

A party celebrating the art of programming through performance. A handful of hardcore coders from the city’s hottest startups will work in the center of a pounding dance floor to a musical journey of electro beats.

Some additional details: it sounds like the “hardcore coders” will be facing the dance floor, with external monitors mirroring their laptops and facing the dance floor. There may also be one or more projectors involved.

I’m going to experiment with some new visual Flash-based stuff, and will try to include the room’s music, a webcam, and/or tweets as inputs!

It should be exciting! Also, I’m probably going to open-source everything I write at the event and post it somewhere like GitHub.

Heat Maps in Flash

Two and a half years ago, I rendered a large heat map representing almost 100,000 Digg users and the 300,000 friendships between them. I used PHP/GD2 to render the image and it took quite a while to render. Due to the difficulty of redrawing it, the heat map was never updated. It would have been great if the heat map reflected current information, but instead it got to live on as a snapshot taken in 2007.

Since then, I’ve wondered about ways of rendering heat maps on the fly, ideally using the visitor’s CPU. Finally, in November, I was able to hack together a highly optimized Flash application that produces pretty awesome-looking heat maps (if I do say so myself) within a second or two.

Check it out

I’m afraid I’m going to have to be a bit of a tease for now, and not dive into too much technical detail. This project is part of a series of data visualizations that utilize a specific, lesser-known feature in Flash.

Sharing is Caring

I did something interesting to this blog. And by “interesting” I mean it’s interesting to me, but mostly because I’m a developer.

In the sidebar, at the bottom, there is a widget sharing cool blog posts from Phoenix-area bloggers. I use Google Reader and decided to start “sharing” items I liked. Google Reader provides widgets to share public feeds and it’s easy to create a feed and a widget for your “shared items.”

That is cool and I could have used it as-is, but the way it works is you drop some JavaScript code on your site and it will dynamically pull in the recent items when the page loads. To the end-user, this is fine, but what if I want search engines to reward those bloggers when I share their posts? It would also help, SEO-wise, to have pages on the blog updating more actively, however in a very minuscule way.

Time for the nerd talk…
To do this, I took the URL used by the JavaScript widget code, noticed the feed data is formatted in JSON in that file. I wrote a simple PHP script that runs on the server, fetches that file, finds the JSON part of it, decodes the JSON, builds the HTML presentation of the items, and caches that output in a file.

When a user requests a page on this blog, it serves it from the local file and reconnects to Google at most once per hour to update the text. That way, I’m actually decreasing the number of times Google is queried and not hitting it a bunch of times from one location (who knows, maybe they would block my IP).

So when you visit my blog, make sure to glance at that section of the sidebar to see what’s happening elsewhere in the Phoenix blogosphere!