Anthony Mattox Interaction Design + Digital Art

My department at MICA recently changed it’s name from Interactive Media to Interaction Design & Art (IxDA). Interactive media was perhaps an appropriately ambiguous name considering the work coming out of the department, but the new name is hopefully more self-explanatory.

To advertise the new name there is a t-shirt design competition, and then free shirts for all the majors. I’ve been working on some designs, mostly just typographic logos. This one looked half decent and I combined it with something I was working on in Processing. Here are a couple sketches.

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.

In my blog I frequently share code for little projects in Processing & Arduino. It’s always bothered me to look at the black and white text which, in comparison to the beautifully colored code in various editors, is quite a strain to read. I considered a few ways to do this, primarily client side with JavaScript, server side with PHP, or something pre-formatted in any language.

I decided to write a script to add in the necessary HTML to color the code, which I could then paste into my site. Although this does add a fair amount more to the size of the HTML files on the site I decided it was the best way to go. A server side script, probably built into a WordPress Plugin, would be nice and easy to use, but it would be run every time the page was loaded and would be a load on the server. A JavaScript highlighter would also work well, but it would still be a large script anyway and it would add the hassle of browser inconsistencies and run time on slower browsers.

Since I was building this script I wanted to make it available to others. The Processing and Arduino communities, which the script is built for, are both great about sharing code, and this will make sharing just a little bit easier.

The script is built into a simple site at www.anthonymattox.com/code_formatter. You can paste your code into the page, adjust the settings, and format it. The script returns the HTML and a chunk of CSS based on the styles you selected on the first page. Paste the HTML into your site and either add the given CSS or use it as a model to write your own.

In my blog its styled to look something like this. Unfortunately it’s still black in rss readers.

/* sample processing code */
/* analog clock */
PVector mid;
float sc, mn, hr, s, m, h;

void setup() {
  background(20);
  size(400,400);
  noFill();
  stroke(200);
  smooth();
  frameRate(1);
  mid=new PVector(width/2,height/2,0);
}

void draw() {
  background(0);
  s=float(second());
  m=float(minute());
  h=float(hour());
  sc=(s-15)/60*TWO_PI;
  mn=(m-15)/60*TWO_PI;
  hr=(h-3)/12*TWO_PI+mn/12;
  
  strokeWeight(2);
  stroke(200,0,0);
  line(mid.x,mid.y,mid.x+100*cos(sc),mid.y+100*sin(sc));
  stroke(200);
  line(mid.x,mid.y,mid.x+110*cos(mn),mid.y+110*sin(mn));
  strokeWeight(4);
  line(mid.x,mid.y,mid.x+60*cos(hr),mid.y+60*sin(hr));
  
  stroke(50);
  ellipse(mid.x,mid.y,240,240);
}

I cracked open the old Processing Particle System again and tried something a little bit different.

Beginning with particles moving through a Perlin Flow Field I moved them into 3d. Since my particle system is built on the PVector class, adding the third dimension was a simple matter of adding a third parameter to every call to a new PVector and adding either the P3D or OpenGL (used for all the images here) rendering engine. An extra force pushes the particles up through space an array stores the previous locations for each particle. As particles die an instance of another object is created, exclusively for storing and rendering these paths.

Another addition causes the growing strands to bud. The budded particles inherit the properties from the parent. Changing the forces between particles, the branching rate, and the environmental properties creates many different structures.

As the script runs, a cloud of particles drifts up through space leaving behind a colorful twisted shrubbery. Using the mouse and keyboard the camera can be moved around the structure while it generates itself.

Read On »

Until recently I’ve just been saving all of my images out of Processing using a simple saveFrame command and throwing all of my images into one giant folder. Looking into this folder I see a few key problems. I’ve come up with a little system to help me keep better track of renderings of my generative works. Unfortunately it won’t work retroactively, but it’ll be useful for future work, and perhaps it can be helpful to some other Processors.

This very adding this very simple snipped to a Processing sketch will save out an png of the render window whenever the ‘s’ key is pressed. #### will be replaced by the current frame number.

void keyPressed() {
  if (key=='s') {
    saveFrame("name_of_sketch-####.png");
  }
}

This works out pretty nicely, but if you run the sketch twice and just happen to press ‘s’ on the same frame the first image will be overwritten. Another issue, which might not seem to bad until you have a huge library of images built up, is the order of the files. If the sketch is run many times, all the saved images will be mixed together. Ideally images saved from one run of the sketch should be named sequentially so all the images from one run can be seen together.

Adding an arbitrary value to the particular run and sticking it into the file name fixes these two issues. Many of my scripts include a function to reset the program so it can be run a few times without being completely restarted. In this case, incrementing this arbitrary global value maintains the order of a set of runs.

int G;

void setup() {
  G=floor(random(10000,90000));
  //noiseSeed(G);

}

void draw() {
}

void keyPressed() {
  if (key=='s') {
    saveFrame("name_of_sketch-"+G+"-####.png");
  } else
  if (keyCode==BACKSPACE || keyCode==DELETE) {
    // code to reset script
    G++;
  }
}

This system isn’t perfect, but is a vast organizational improvement for just a few extra lines of code

Another useful trick, if you have a script which utilizes a lot of Perlin Noise, is the set the noiseSeed to a random integer (like G in the script above), and include that in the file name. This way, if you want to rerun the script with the same parameters later, you can always set G to the integer in the file name of a particular saved image.