Anthony Mattox Interaction Design + Digital Art

Last summer I had a great opportunity to work at the Baltimore Interaction Design Firm, ID5. During my time there I designed and built a virtual tour for the State University of New York at Potsdam.

The tour needed to be able to capture the experience of the school for prospective students who are not able to visit. The school also wanted to avoid the typical cliches and create an engaging interactive experience.

Screenshot of the SUNY Potsdam Virtual Tour. Click to Enlarge.

The application was designed to be fit into the Potsdam website. It showcases the broad range of resources and opportunities and also the cohesiveness between different areas of the school. The basis of the application is a collection of interconnected concepts and components of the school. These elements exist as objects in a simulated physical system. Clicking one element reveals related topics. Each object contains images, video and other detailed information.

As you move through the tour, the system organizes itself based on the connections between elements. Users can also save particular elements by dragging them to the dock in the bottom left. Saved elements can be quickly re-opened or shared as a group to a friend.

Screenshot fo the SUNY Potsdam virtual tour showing images and video within a node. Click to enlarge.

Technical Jazz

The tour is built in Flash (using Flash Pro CS3 and CS5 (thanks ADAA!)). A CMS, which I built with PHP and MySQL with the CodeIgniter framework, allows SUNY Potsdam to edit the tour, creating and linking nodes and adding images, video, and maps within them. Adobe Illustrator was used to design the application and create graphic elements.

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.

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 »

Shutter feed is a project of mine from last spring which is currently on display in the Rosenberg Gallery on the MICA campus. The piece is a program which takes a webcam feed and continually overlays each frame and adjusts the image. The result reacts differently depending on the the lighting. In a dark area one can paint with a small light source and in a lit environment it produces slowly evolving ghostly images.

Read On »

Processing is an open source programming language and environment developed for artists and designers to quickly and easily develop programs for any application. The language is java based, fairly easy to learn, even for the non-programmer, which includes many functions to create dynamic graphics. The environment allows for easy debugging of scripts, testing, and finally exporting of your programs to web applets or to an application for any operating system. And best of all Processing is completely free to download and very well documented, with definitions and examples for every function.

Read On »