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.

For the past few months I’ve been hard at work building a flash game. As my first game (but hopefully not last) it was a bit of an adventure, but worthwhile in the end. There are certainly still details to be worked out and some extra features to finish off, but overall it’s come out pretty well.

First go play it! Then come back here if you’d like to know a little more about how the game was created.

I’m not one to preface my work, but I would like to mention that I am not a gamer in any respect. This being said, I may not be aware of all the game conventions I should be following, despite a good amount of ‘research’. If you have any tips for this or future games, feedback is always appreciated. You can leave public comments here or send me feedback through the Pulsus contact form.

Recently, thanks to a class with Jason Corace, I’ve become interested in games as interactive systems. In the same class I developed a card game and created Pulsus for my final project.

The Game

The game, Pulsus, is a puzzle game about particle systems. Players have to place objects to direct particles from emitters into goals. While it is a puzzle game, it is also about exploring a dynamic system.

In the game, players solve puzzles by placing objects onto the stage which effect the way the particles move. In each level the particles must be moved from particle emitters into goal points. Different colored goals accept only particles of that color. Particles must hit the goal quickly enough to fill it up, but once it is complete is will remain filled. The colored force objects will attract their own color while repelling others. Grey objects interact with all particles in the same way.

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 »

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 »