Anthony Mattox Interaction Design + Digital Art

This semester I’m taking my first formal class in typography. I’ve gleaned enough to do a decent job with it, but it’s definitely something I should do. So far the work for the class has involved a series of exercises, each producing a number of square compositions exploring letter forms and their interrelationships. In each we had a number of restrictions and goals. Here are just a few that I found more interesting.

Of course, after playing with letters in Illustrator for a while, I thought it would be a good idea to throw some letters in Processing. Processing handles text pretty well and the results can be exported as a PDF (vector graphics). The text will be rendered as text in the PDF. For scripts involving words I created an SVG file of the word so I could have more control over the type.

The next three used my particle system with a perlin noise flow field as in some of my other projects. Each characters’ mass is based on its size, but one character is also a little lighter than the other making them separate slightly as they are pushed by various forces. The noise field is also slightly offset in a third dimension to cause further separation.

Using a more recent iteration of my particle system I created these next two by replacing the springs with the word interconnection.

I used a cellular automata script to create this last one. Each state of a position in the array corresponds to a letter in the word automation which is also written out in the first generation of the system. With so many states the system becomes to complex to form any recognizable patterns, but I thought it was at least a little humorous.

This sketch builds off one of my recent experimentations in wave motion. In the script an array of waves is created by various inputs. Each wave effects the array of ‘fluid’ and creates a rippling structure. Here the structure is rendered not just after all the waves have been calculated but after each wave is processed.

The result is a stack of rippling points flowing between each other. I first just rendered each wave as a thin bar, to make sure everything was working properly, and then added a color property to the wave class. I dropped the symmetry to avoid some unintended interpretations. The script runs much slower, as I should have expected. I’ll try and streamline things a little (although it’s already very simple) and put it onto my interactive site. I might just have to put some limits on it so people don’t crash their.

Now a bunch of pictures!

Read On »

Back at the old particle system I’ve been enhancing the interaction. In the applet you can now easily create and remove particles and links. Particles can be dragged and multiple particles can be selected. Right now everything is controlled with keypresses, but I plan to build an interface to easily switch between tools and to modify particle and spring properties as well as environmental properties. When its a little closer to finished I’ll post it into my interactive site.

In these images, springs are drawn in purple and forces are drawn as blue lines, stronger forces are darker. Drawing the forces is a little unnecessary but it creates interesting patterns. Which is, at this point, all this application really does.

What is particularly interesting is the way structures move. In the image below, a radial structure is dragged by its central point. The whole mass distorts into a cardioid shape. It eventually collapses into chaotic motion. Moving any particle in an interconnected set creates waves through the rest of the system.

Interested in pushing the interactivity of my Processing work a little further I decided to create a little piece which responds in a more interesting way to mouse movements.

The sketch has an array of vertical bars across the screen. When the mouse is moved (or clicked) waves are created that move along the array and bounce off the walls. The speed, direction, and distance of the mouse motion effect the pool differently simply because of the way the set of waves created overlap.

Slow movements create small ripples, moving your mouse along with a wave makes it grow, and moving the mouse around quickly creates complex noise. The waves still don’t bounce off the edges perfectly, but it usually works pretty well.

A second version of the script creates waves with a different shape, but is otherwise similar. In the first version, the waves were shaped to replicate water ripples and the overall area of the bars stays about the same. In this second version, the waves form large bulges. The wave shape creates a different texture and motion and changes the interaction.

I began programming about a year ago, primarily working a language called Processing. Much of the programming I have been doing has be to create generative or algorithmic artwork. Such works involve writing a script to dynamically generate images based on a variety of systems and inputs. One of the thoughts behind this type of work is that a piece is not manifested as a single image, but in a method which creates an image. What is important is style, texture, motion, and the relationships between elements and colors. The particular composition is generated dynamically each time the piece is viewed. For the past year I’ve been documenting most of this work as still images in this site, a trail of my development, but not a full representation of the work.

www.anthonymattox.com/interactive is a little site I’ve made to display my interactive works in one place. Take some time to explore the projects. I’ll keep adding more work as I create it as well as a number of other projects that still need to be cleaned up and put into the site.

Enjoy!

Most of the projects in it are created with processing and your browser will have to have the java plugin installed to run them. To run the 3d applets you will have to click trust in the dialogue box that appears. There still might be some bugs in the site so let me know if you have any issues.