The OKGO WTF effect

Craft & Design

We’re going to try something out – a lot of makers use “Processing” to make cool interactive art and projects, but there aren’t the same type of high profile examples (source) in the same way there are Arduino examples, so my pal Mike Rosenthal (founder of the BLIP fest) sent along this cool example. If you folks like this we’ll try to feature more Processing projects on MAKE.

Ok Code – By Jonathan Bobrow. Upon seeing the WTF music video from the band OK Go for the first time, within seconds of it starting, I said to myself, this is a very simple effect (very cleverly used btw), especially for a graphics program. Take a look at what im talking about here (video here).

The effect I’m referring to is that the screen is not refreshing or clearing itself and is only drawing the elements that are currently in the scene, creating the strong psychedelic visuals that define the video. i.e. when I am in frame and I move, instead of erasing the image of where I was, it simply draws where I am now on top of the last image — imagine cutting out yourself from a stack of photos that were printed from a video, then stacking them on top of each other.

I decided that OK Go shouldn’t be the only cool people who get to draw with their bodies and props, so I posted to twitter that I would create a version of the effect in Processing. When I woke the next morning, I was contacted by OK Go and was given the chance to make something that people will play with, explore, and hopefully become curious about.

The application, written in Processing, does just what I describe above, with a couple other features as well. First, the application takes a snapshot of the background at the end of an initial countdown, which it uses to compare to the live footage of your webcam. By doing this, the program decides to only draw the pixels that are not equal or close enough to the background, effectively serving as a green screen substitute. Since the program does not refresh the background, the images drawn get drawn on top of each other, creating these trails of the foreign objects on camera. The rest of the code is for recording the frames to a quicktime file, playing the song as a soundtrack, and creating a user interface.

The code for erasing the background is from an open source Processing example, the only modification was to tell the program to draw the different pixels but not refresh. The blurring functions were also borrowed from an open source programmer credited in the code.

From the source code you can see that this is simply a creative idea comprised of some basic original code and heavy borrowing. My code is just ok, nothing spectacular, and I think it is important to remember that great work can come from even the simplest of code. Hope you enjoy it!

Discuss this article with the rest of the community on our Discord server!

current: @adafruit - previous: MAKE, popular science, hackaday, engadget, fallon, braincraft ... howtoons, 2600...

View more articles by Phillip Torrone


Ready to dive into the realm of hands-on innovation? This collection serves as your passport to an exhilarating journey of cutting-edge tinkering and technological marvels, encompassing 15 indispensable books tailored for budding creators.