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.

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

Happy Holidays

I'm back to doing some work in Processing, actually building on some of the older work drawing trees. This is for my holiday e-card, some nice fractal snowflakes. Saw a program on PBS about the history of fractals that got me all excited about them again. This program uses L-Systems to draw the recursive bits, and as kind of a hack draws 3 Koch Curves to make each Snowflake.










(click the image to see the sketch)

Processing Based Forestry

I've been building some Processing sketches to draw trees. This lead me to L-Systems (or Lindenmayer Systems) which are great rule-based formulas that can be used to draw patterns with natural looking forms. These same formulas can be used to describe natural growth and formations.

The most successful sketch to-date is this one. It's based on a sketch called "Hairball" that I found on a page belonging to W. Xavier Sneigrove. I've tweaked a bit of the code to make trees instead.









(click the image to see the sketch)

I hope to someday combine this with the bonsai hardware so it can display a unique naturalistic tree that's "grown" from software rather than a single 3D model that I labored over. This will definitely open up the possibility for the kind of slow interaction I'm hoping for as well. That the plant would grow more on the side facing a window during the day, or some kind of pruning or training. Something slow would be nice.

L-system Drawing

This Processing sketch features a truly l-system based plant. I haven't figured out how to "grow" this plant in the same way as the very curly other one. When you click in the window of this sketch it jumps another generation in the weed drawing formula.

Based on the l-system rule: (X → F-[[X]+X]+F[+FX]-X),(F → FF)
Example 8: Fractal plant from wikipedia