Anthony Mattox Interaction Design + Digital Art

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.

Despite all the work I’ve been doing with Processing I don’t have many of the functional applets on the web. This is partly due to issues with embedding applets into WordPress posts. WordPress, the content management system I use for this site, is a great tool, but it has an unfortunate habit of screwing up code posted within the page content.

There are, of course, plugins to get around such issues, but I have a better plan. I’m building a WordPress plugin expressly for embedding Processing sketches. I’ve built a very basic version without any admin options. Inserting a simple shortcode into a post adds the applet. The shortcode is contained in brackets and simply reads ‘processing file=”path/to/file.jar” width=”450″ height=”250″‘. The .jar file can be uploaded with the media uploader within the “edit post” page in the WordPress admin or through the media library. The plugin includes the core.jar, so only the specific (and fairly small) .jar file for the applet needs to be uplaoded.

My basic script suits my own needs, but I’m working on an expanded version with an admin panel to set default options, alt text, and styles. I’m also not sure how this will render in RSS readers (probably not well but it should work in the site).

If you have any questions or suggestions on how I should move forward with this or features I should include leave a comment. The plugin should be available within the next few weeks.

see how it looks »

After a few busy weeks I’ve finished my finals and moved into a new apartment (if you can guess I’m not exactly built for moving furniture from one third floor apartment to another). It’s finally summer. But now that I’m finished I just want to get back to work. I suppose that’s just how I am, but fortunately I have a long list of summery projects.

I’m spending a chunk of my summer working at the MICA Pre-College program as a Teachers Assistant/Residence Counselor (TARC). I’m very excited for the opportunity to share my skills with a younger group of developing artists and show them around Baltimore. I’ll also be interning for the rest of the summer in a design studio in the harbor, which I’m sure will be a great experience as well.

One of the first things I’m working on is a re-design of my site. After many many iterations I eventually decided to just cut my site down to the essentials, making it as simple and functional as I could. Unfortunately it’s not very exciting. I’ve been working in web design and development for a while now, but still my abilities are increasing so fast that with every site I create the one before it, or even the one I just finished, looks like garbage. Fortunately the other site I’m finishing up still looks decent, so maybe I’m getting somewhere. My new site will have a more interesting, friendly design, some new features and more interactive toys, and a sprinkling of fancy Flash and JavaScript effects. I’ve got a few other web projects cued up, including a big site about Data Visualization, a couple of WordPress Themes, and hopefully some Flash games just for fun.

My friends and I also have long list of movies to watch, some new recipes to try (sushi & samosas! but not together), some vegetables to grow on our new deck. And of course some new art.

I’ve been interested in experimenting with electronic music for a while now and also recently started doing some work with the Arduino. So I thought, ‘why not try both?’ I began with a great article I found on Make Magazine (one of my absolute favorite sites) to create the basic script to generate an audio signal with an Arduino. A Digital to Analog Converter (DAC) converts the binary outputs from the Arduino into a relatively fluid scale of voltages which make up the sound wave

On the electronics side, my setup is quite similar to my reference, with the addition of a small amplifier using an LM386 op amp chip and a couple resistors and capacitors for some basic filtering. On the code side I’ve created a much more substantial instrument. Using Processing I built an interface to create a 32 sample waveform and a melody. The data is sent live to the Arduino which places the data into it’s waveform array and then using a timer writes each value sequentially to the DAC to create the sound.

The interface contains two sets of sliders. One represents the shape of the sound wave. Changing the shape alters the timbre of the sound. The second set controls a series of pitches. The currently playing note is lit and a light bar indicates the current position of the playhead. The waveform sliders can be adjusted individually or as a group by clicking and dragging across the set. The sequence bars control both the pitch and the frequency of the notes.

Read On »

Last Saturday I was part of the Baltimore Robot Fest. The event took place at the National Electronics Museum in Baltimore. All sorts of cool nerds came to share their robots. Make Magazine held a workshop, a ring was set up for battle bots, the Baltimore SDIY Group played some incredible electronic music, and many other fantastic groups brought great projects. The Museum was a great location for the event. Modern robotics and DIY projects were mixed in with WWII radar systems, ancient tube computers and even an Enigma cipher machine.

Read On »

This is a quick little audio visualizer I put together with Processing and the ESS Sound Library. The audio spectrum is analyzed with an FFT and spectrum bands are plotted as vertical bars. The Waveform is drawn over the bars in white, adding a lot of interest to the image. To create the fading effect of the object a transparent, white rectangle is drawn over the whole sketch instead of using a background. Previous frames are left on the screen and are slowly covered up by white.

To create an interesting color scheme each bar is colored based on its own height and its neighbors. Combined with the overlapping shapes a broad range of tones and hues is created.

Read On »

Continuing with clocks in ActionScript I created this slightly less abstract clock, loosely inspired by magnetic fields. I’m happy with the way it turned out. I plan to create a screen saver from this as well. If you’re interested it should be available soon. Leave a comment if you have any thoughts or criticisms.

I had a few little battles trying to get everything functioning. Some functions in Actionscript 3 use radians, namely the trigonometry functions, while other more basic functions use degrees. Having to switch frequently between the two tripped me up a few times. Another issue, not directly related to ActionScript, was dealing with the different number sets. Each dial object has an array of text objects. Some begin with zero, so they line up with the array indexes, while others start with one and throw everything off.

Read On »

I started working with this idea in Processing. I was playing with clocks and fractals and thought it would be funny to stack all the clock hands on each other. I’ve been working a fair amount in ActionScript and decided to rebuild the project in flash to make it a little more portable and improved the design quite a bit. Building clocks is interesting to me as it is a very basic form of data visualization. The data itself seems quite simple, but also practical. In this particular clock each time is represented by a particular shape.

My code is still a little messy, but I will probably post it after a little cleaning up. The whole applet is created with ActionScript 3. I’m still not friends with the flash interface. I have more fun building classes which can create graphics quickly with a few parameters. It’s just more fun that way. This piece will also (hopefully) be a screen saver soon along with a few other little flash projects I’m working on.

Read On »