Play - An Interactive Drawing Game

I just finished this interactive drawing + exploration game that I programmed in Processing as an announcement for my place of employment, Sussman/Prejza, an environmental design company the does urban branding and wayfinding.

We sent out an email with several arrows to choose from, each of which leads to a slightly different version of the game. The game is meant to encourage us all to try new things, explore, and see the wonderful and beautiful results that can come from just a few steps into a world of creativity and new possibilities.

As you navigate this space with your arrow avatar of choice, you reveal hidden colors and create new shapes based on how you touch the different forms. Some simple decisions, like how far you will move your arrow or if your first move was to the left or to the right, determine major shifts of color.

Then, when you decide you are finished exploring, you can see the entire landscape you have explored and the results of your interactions. Each visitor is encouraged to sign their drawing and add it to a gallery of similar but unique works. I hope that it is just as interesting to see what was made as who made it.

The programming for this game was quite a learning experience, building on a class I took at Machine Project in LA and a number of simple Arduino projects I have completed in my free time. The largest hurdles were the trigonometry needed to complete the spinning and collision detection and the image uploading for saving images to our gallery. Thanks to the other Processing users who helped me in tackling the image uploading, you are also recognized in the source code!

I hope to build on this experience to create more projects for the web, mobile devices, and architectural spaces. I hope you play the game and I look forward to seeing even more additions to the image gallery.

Cat Tracking _ Test Photo 1

Cat Tracking _ Test Photo 1, originally uploaded by mdshaub.

I compiled all the frames of the video of my cat wearing an LED marker into a simulated long-exposure photo. The original video frames were processed to only include the LED marker on a black background.

AfterEffects was then used with the Time Echo filter to overlay all the frames of video onto each other.

The LED light is colored blue at the beginning of the video and shifts to cyan by the end. I'd hoped that this would make it easy to trace the motion over time but with the over-exposed areas looking cyan as well it is not perceivable.

Cat Tracking _ Standing Tall

Cat Tracking _ Standing Tall, originally uploaded by mdshaub.

This is my cat Mouse.
He'll do just about anything for a treat, including put up with a new collar fitted with an LED, watch battery, and ping-pong ball diffuser.

He knows how to act like the star of the show. The only negative part of the experience is a newfound fear of full sheets of foamcore (the backdrop) and concern about the digital camera being tied to some other "project" idea of mine.

Cat Tracking_TestVideo1

Cat Tracking_TestVideo1, originally uploaded by mdshaub.

Realtime video of my cat wearing an LED marker. The original video frames were processed to only include the LED marker on a black background.

AfterEffects was used with the Time Echo filter to overlay the last 200 frames of video throughout.

The next test will be to compile all the frames of the video as a simulated long-exposure photo.

Wire Drawing 1

Partially working program to draw wires that are affected by gravity for J-woo. This only draws one wire, doesn't import a bg image, and doesn't export yet. But, it's a start.

Click here or on the image to test the app.

PixelPusher - New Project Idea

I've been thinking a little bit about ways of visualizing images that are different from the rectangular pixels I usually see. I've built a Processing sketch that changes the rectangles into other shapes, and that's nice. The individual elements don't need to be on a rectangular grid, but could be hexagonal or triangular, or other tessellating shapes.
I also really like the motion of physics simulations in Processing, and I thought maybe an image could be made by repelling and attracting pixels that settle into irregular patterns but communicate gradations none the less. I learned to do this in illustration school when it was called stippling.

Without any work in code yet, I've mocked up what this might look like. It's only black and white so far, but color could be added (either RGB or CMYK or something else).



Pixel Field: Evenly spaced pixels waiting for a source image


Source Image: Pixels repelled and attracted by the dark and light areas of the photo

A related Processing sketch here

Airplane Shadows _ Mockup 1

Airplane Shadows _ Mockup 1, originally uploaded by mdshaub.

A quick mockup of a project idea. I love the flight patterns project from years past, and have always wanted to build something similar. Seeing a number of airplane shadows pass over my office gave me this idea. I hope to build an airplane shadow map using flight position, altitude, heading, and aircraft type coupled with calculations for sun angles.

The scale and speed should be pretty accurate, 100 foot long plane traveling at 570 mph (about 830 feet per sec). That's pretty fast, viewing at this scale.

Putting the results into Google Maps would be step 1, though I'd love that in Google Earth you'd see the shadows rolling over hills.