Using Programming Techniques to Accomplish Graphic Effects

Aloha everyone! I'm Tim, the new web coding intern, and this is my first-ever blog post! I wanted to share a Java program that I wrote for fun to accomplish a graphic design task. I thought of an idea for a t-shirt that I wanted to design, and I couldn’t quite figure out how to pull it off just using Photoshop. My idea was to make a t-shirt that blended two of my favorite things: The Matrix and Super Mario. I love the Matrix trilogy, and I have always been a big fan of old school Nintendo characters so this seemed like a perfect shirt for me!

The idea was to have the green falling code from the Matrix, but the characters in the code would be the 8-bit characters from the first Super Mario Bros. game. I knew that I could create the characters, but arranging them randomly enough to make the code look good would be next to impossible. Even if I were able to draw the code out, it would take me forever to create one iteration, so if I didn’t like that design I would have to put all of that time in again. This simply was not the way.

So I started thinking about how I could automate the code design, and I came up with a solution. I decided to write a Java program that would create an array of same-sized, buffered images (the Mario characters that I had drawn by hand plus one black spot for extra randomness). For each column of falling code, the program randomly chooses the size (which is the same for all images in a column of code), and the number of images to be shown. Once that is done, the program randomly chooses images from the original array to be displayed. The program does this a random number of times, and voila! Of course, I put parameters in to control the randomness of the sizes and the number of columns so that I could get it to look the way I wanted.

Once all of the functionality of the program was dialed in, I designed a simple GUI to allow a user to enter the lowest number of characters desired in a column, the highest number of characters in a column, and the number of columns.

I chose to have a bunch of conditional statements hardcoded into the program to randomly choose the size of the characters. Now that all of the technical stuff is out of the way, here is my design (after some photoshop):

I am still planning to work with it a bit more to get it ready for printing (Only 6 colors allowed on most limited run, artist driven sites), but so far I am really pleased with how it has turned out!

Anyway, I hope that this wasn’t too technical… or at least that the end result seems kind of awesome. Thanks for reading my first blog post!

As a closing thought, I absolutely love working with Onyx so far and I hope I get the chance to meet and interact with everyone more in the future!

Tim Jones, Web Coding Intern Fall 2011