Brian Shaler

Until Friday night, I had never heard of Ludum Dare, a global game development event celebrating its 10th anniversary. I found it via Reddit or Hacker News or Twitter or something, and discovered the event had kicked off 4 hours prior. Everyone participating in the Compo was given 48 hours to create a game from scratch around a theme announced that night. An alternate Jam competition has more relaxed rules, allowed teams, and ran for 72 hours. The theme was “Tiny Worlds,” which can be tricky when coming up with a compelling game idea. Fortunately, the theme and rules allow for pretty broad interpretation.

I wasn’t sure I would participate, but an idea popped into my head. Inspired in part by a segment of Dragon Ball Z Kai, I pondered what it would be like to jump from tiny planet to tiny planet. Mainly, what would happen to your perspective of “up” and “down” if you jump from the top of one planet to the bottom of another? The concept of “down” essentially just means “in the direction of the pull of gravity.” What drove me to want to build the game was the idea of making a 2D platformer where the directions up, down, left, and right are completely fluid and based on the gravitational pull of planets around the character.

Even though I haven’t used CoffeeScript or Processing.js before, I decided to try them out. Probably not a good idea on such a short timeline, but oh well.

The result was an auto-orienting 2D puzzle game where you have to jump from tiny planet to tiny planet to get to your goal before your oxygen runs out. You can walk around on planets and jump, but after leaving a planet’s surface, there is no longer any control over the character. That means if you miss a planet, you can drift off into space forever!

I finished an hour before the deadline and set up the game at PicoPlanets.com (a play on “pico” meaning one one-millionth, or 0.000001) and made the source code available on GitHub. You can also see screenshots and blog posts about the progress (“making of”) here on my Ludum Dare author page.

I’m going to geek out for a second.

Firebug is an extension for Firefox that I’ve been using for years. These days, most (maybe all?) modern browsers come with some sort of interactive console. It’s great for web development, because you can tweak HTML & CSS without reloading the page, come up with what you like, then copy and paste the resulting code back into your files.

I use Firebug beyond that, though. You see, when I’m viewing a web page, I have this mindset that it is living on my computer and I can do with it what I want. Think about big overlay ads on sites that block the content you’re viewing for X seconds. You can delete that entire element and go back to reading in seconds.

Today, I was reading up on a GPS photo logging device I recently purchased. It doesn’t seem to work. I was reading trying to read a blog post reviewing it, when I started getting too annoyed with a quirk in the page. See Fig 1.

You see those broken characters after every period?

No thanks!

Sure, I could just try to ignore them, but I’m too easily distracted. Instead, I opened firebug and typed out a line of Javascript, after verifying that the blog I was reading had jQuery installed. Within a few moments (I probably would have been done reading through the post), I had this:

wtf = document.getElementsByTagName(“p”); jQuery.each(wtf, function (index, val) { jQuery(val).html(jQuery(val).html().replace(/Â/g, “”)); });

To break it down, I’m creating an array of all paragraph tags on the page, then looping through them and setting their HTML contents to be their original HTML contents with the strange characters replaced with nothing.

While the blog post didn’t have anything to help me get this device working, I figured it was worth sharing the creative use of Firebug.

Another recent creative use of Firebug was browsing Google Maps with my friend Ed and hearing him say, “Man, it’d be cool if we could see just the dots, without the map.” I fired up Firebug, poked around, and deleted the image tiles below the points. The result? Fig 2.

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:

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

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.

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.