Anthony Mattox Interaction Design + Digital Art

I’ve been working for a while on this project with Stem Cell Resources for the new cell exhibit at the Maryland Science Center. The exhibition, including the Stem Cell Map and some other fun interactive works, opened yesterday and was received very well. If you’re in Baltimore its worth checking out. Developing this project has a been a great opportunity to do some great educational work with some great people. I enjoy being able to maintain a connection with the sciences despite focusing myself on art, and I always love creating data visualizations.

The Map is scripted in Actionscript 3 and takes all the data from an xml file exported from a spreadsheet making it easy to update. The research is broken down into three categories and each location is colored accordingly and scaled based on the number of facilities. It’s displayed on a large touchscreen in the exhibit and will also soon be online.

Read On »

After playing with binary cellular automata I thought I’d expand the script a little to accommodate more than two states of a pixel. Three loops are nested and each is iterated once for each state. If the index of each loop equals the three values above the current point the function returns the current state of a counter which is incremented in the innermost loop. In a binary system this is a little more complex than just testing each of the eight possible combinations, but is almost necessary when dealing with more states. I’ll post my code at the bottom of this post. But first, some pretty pictures.

Read On »

This afternoon I played around with 1d cellular automata. The program is creates an array of cells which corresponds to a row of pixels on the screen. Each new generation of the structure is represented by the next row of pixels and the value (black or white) of each pixel is based on the three directly above it. There are eight possibilities for the pattern of the three parent pixels and an array of eight values stores the results to each of these possibilities. Changing the rule-set and the values of the first generation creates vastly different images. The script I was using was very much based off of Dan Shiffman’s code.

Read On »

I created this set of posters for a performance by the Ligetisplit Ensemble. The images are created with Processing. I had to finagle things a little to get high resolution rendering of my processing sketch. I set the screen dimensions to the pixel dimensions I needed, scaled up my inputs to interact with the whole screen, and had to enter expose or save the image to see what it looked like. It actually worked better than I expected.

Most of the time I have been dedicating to working with Processing has recently been taken up by a larger project. It’s been very exciting for me, but less conducive to blogging both because it’s a larger project, and because I’ve been doing a lot of learning for the project. The piece is an interactive map for an upcoming exhibit for the Maryland Science Center and will be on a large touchscreen. It’s a great project for me as I love data visualization and science.

The application is scripted in Action Script 3. I was originally thinking of using Processing, but I wasn’t happy with how it was handling some things i needed it to do. So far I’m very happy with the choice. Flash is quite a tough beast to work with but I’m impressed with how quickly it parses the sizeable xml file with all the data and also how smoothly it renders all the graphics. I’ve also had to do quite a bit of learning about xml. With a bit of work I have the flash file reading xml directly exported from a spreadsheet editor, making it very easy to be updated.

I’ll write more when the project is finished. I still have to do some work building the interface and making the interaction a little more fluid. The applet will also be available online as well as in the exhibit. For now here are a few images of other visualization methods I’ve been playing with.

Read On »

Here’s another rendering of my line wave script iterated quite a few times. In this rendering the image is blurred before each new set of lines and also inverted to create complimentary colors. There are two desktop wallpapers one of the pictured rendering and a similar one in light blue. Click the thumbnail on the left to download a zip file containing fullscreen and widescreen versions of the wallpaper. They might be a little busy for some, but I like them. What do you think?

Another little experiment with my particle system. Each particle is rendered very large with a slightly darker stroke than fill, and each frame is drawn over the previous one. This along with the color shifts creates some nice pseudo three dimensional effects. The effect is especially interesting when particles overlap as they move.

Read On »

I built this script which creates circles budding off of circles. What better to do with it than put it in a circle? I could give some lofty symbolism for circles, and some if it might even be half true, but to be frank I just like them. They look nice. Not to mention it’s much too late to be coding anyway (or blogging).

Read On »

Although I am happy with how my initial Ribbons script turned out it still wasn’t exactly what I was trying to create. After playing with Perlin Noise based forces in my straightforward particle system and creating outstanding fluid motion, I thought I might go back to the Ribbons and add a Flow Field to that as well. The result is much more dynamic than the original and quite graceful.

And a little technical stuff. The ribbon is just a strategically rendered particle system. I created a particle system class with particles and springs. As new particles are added (on mouse press) new springs are also created connecting each particle to the one before. Each particle repels all nearby particles and springs pull them together. The result is a string of connected particles which would, if the forces extended infinitely, eventually straighten itself out into a line. To render the structure all particles and springs are hidden and a curve is drawn by wrapping the rendering loop in beginShape(); and endShape(); with a curve vertex for each.

In the previous version the wobble was created by a slight random force applied to each point and a wind vector of the particle system. Because of the varied weights of the particles and spring lengths the wind wobbled the structure more convincingly. In this version the same Perlin Flow Field I’ve been using in many of my recent projects pushes the ribbon around much more dynamically. Different parts of the string are pulled in different directions making it writhe back and forth. The color is an attribute of the particle system and ‘randomly’ shifts over time.

Read On »