Concrete to Data Breakout!


A couple of weeks ago I was able to attend the opening of Concrete to Data, an exhibition currently open at the Steinberg Museum of Art. The show is a culmination of a two year effort by Ryan Seslow to bring together graffiti writers, street artists, photographers, and digital artists to reflect on past and current practices. Over 40 artists are represented, contributing site specific murals and installations, artifacts from early works of street art including John Fekner’s pieces inspired by Space Invaders, Martha Cooper‘s seminal photos of 70s-80s graffiti, and the launch of on-going digital exhibition of street art influenced new media pieces hosted at Encrypted Fills. There’s an instagram account for the show where you can see a lot of the work. I published a few photos on Flickr as well for you to check out.

I was lucky enough to be able to contribute a piece previously made for the Transit Museum show. But Ryan had also made a call for artists to create riffs and remix logos based on the show’s title. There’s a lot of cool pieces that were made using huge range of techniques – aerosol, stencil, pen/paper, and more. I wanted to participate and struggled for awhile to come up with an idea. Being the more literal minded I was trying to think of how I might remix images of concrete tiles discovered and photographed in my daily happenings. I remembered the concrete pixel matrix from the hallway in 4th floor of the main building on my campus which I’d previously used. But nothing was sticking.

I started to think of digital born bricks constructed for various 8-bit video games of the 80s as a good metaphor for the show’s intention to celebrate the evolution of street art and its various techniques. And that’s when I remembered/stumbled upon the classic game Breakout and the subsequent Super Breakout which I have foggy memories of playing on someone’s Atari 2600.

Wouldn’t it be really cool to have a Concrete to Data logo broken-out of a pixel matrix in the style of the game’s brick removal mechanic? I was able to pull off an animated GIF version (I should do a video and add some appropriate vintage sound effects) which is at the top of the post, but you might be surprised what tool was used to make it – Microsoft Excel.

The idea using colored Excel cells as a tool to compose and animate 8-bit styled graphics was introduced to me by my favorite band of digital pirates – DS106. Tom Woodward created an assignment prompt called Spreadsheet Invasion inspired by a video of the same name which has a space invader themed destruction of financial data. I’m pretty sure I originally stumbled upon it through Jim Groom’s post in which he described using Excel to build a Pong animation.

There’s a great tutorial I used to get the basics of using Excel to compose 8-bit looking images and then create a new page for each frame. I was able to build the initial palette for the game space and designed the logo’s bricks using an old-school fill pattern. But I quickly realized it was going to be a lot harding to start with a full wall and then ‘breakout’ the logo. So I instead opted to fill-in the wall, effectively playing the game backwards.

This led to needing a plan for the trajectory of the ball and the movement of the paddle so that the animation would be consistent with the game-play mechanic (think angle of incidence must equal angle of reflection). So I found myself drawing out the trajectory of the ball and then numbering angle lines. See for yourself:


After building each page you can test the animation by simply scrolling from page to page. It was pretty cool to watch it progress as I made more and more frames. I think most people make a screen recording of the scrolling to create the final animation. But I opted to make a full screen shot of each page and the surrounding bits of the operating system interface. This ensured every frame was in the exact same position of the screen. In total I created about 145 frames for the animation.

To bring them together and create the GIF I used an automated image stack process in Photoshop which I recently recorded in a screencast for my students. The flicker between frames which makes it seem more 80s video screen authentic was just a happy accident of how the cell fill pattern changes from frame to frame. I’m not sure exactly why it happened.

I hope you like it, and I’m inspired to build some other pixel-art animations. I have to see what comes to mind!


4 responses to “Concrete to Data Breakout!”

  1. ryan seslow Avatar

    MBS, the GIF and this blog post is brilliant for so many reasons! The format itself is thoughtful, reflective and insightful, and with its additional reflections to 1980’s nostalgia, well, that is complimentary indeed. I love the use of discovering excel as an art making tool, who would have thought? Alas, indeed there is yet another metaphor and platform for the creative human potential!

    1. mbransons Avatar

      Thanks man! Inspired by such an awesome exhibition. Just great work and collection of so many interesting and talented artists.

  2. Jim Groom Avatar

    This is so beautiful–ARTIST4LIFE! I really love the idea of concrete to digital in the form of Breakout bricks—so many layers of awesome in that relationship. Someone compared domains when we were trying to buy them to bricks, and I found that fascinating. They are anything but bricks, but it helps us make the virtual concrete somehow, which seems to be the greatest educational challenge of this historical epoch. How do we make the virtual concrete in terms of our understanding,? Which might beg the follow-up question—do we?

    1. mbransons Avatar

      For those that don’t get it, we put digital cement in their digital shoes and have them sleep with the digital fishes. Is that concrete enough!