Anthony Mattox Interaction Design + Digital Art

I’ve spent the last four years at the Maryland Institute College of Art and recently graduated. I had a great experience at MICA. It’s sad to leave, but I’m ready to start something new as well.

Moving on I’m starting my own design studio, working on the web and other screen based platforms, with some good friends of mine. We’ve spent the last few weeks moving and setting up our new studio. We’re staying here in Baltimore and are excited to join the emerging tech community here. More on that will be coming soon.

Hopefully I’ll have a little more time for personal work now that school isn’t taking up every minute of my life. I have a new game in the works (hopefully with a flash prototype coming soon), as well as some updates to Pulsus. I’d like to blog more consistently, and have a little backlog of things to get that started. Maybe I’ll even have some time to work on some generative works and some sounds. We’ll see what keeps my interest.

I’m excited to be staying in Baltimore and to get back to work after a lot of reshuffling and resettling.

Intro EP: a collection of electronic musical experiments by Anthony Mattox.

As part of my thesis at MICA, in addition to Pulsus for the iPad and an installation piece, I created my first album of electronic music. You can listen to two of the tracks right here and download the full EP.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

The EP consists of 5 tracks created primarily from recorded samples and some synthesized audio. All the tracks were composed in Ableton Live. Adobe Soundbooth and Pure Data were also used to create and modify samples.

Working on these pieces has been a great break from programming, and, while I still have a long way to go, I’ve made a lot of progress and done a lot of learning. I’ll definitely be creating more, and better music in the future.

The cover was created using processing from some code snippets of other generative work of mine.

Click images to enlarge.
 
Three sets of thrown, stoneware cups and saucers.

In my last semester here at MICA I had one more studio elective and quickly decided to take a class in wheel thrown ceramics. Since I took a ceramics class in high school I’ve been eager to try it again.

Throwing was a wonderful break from all of the programming and soldering that has filled every other minute of my life for the past few months. Hopefully I’ll have more opportunities to work with clay in the future.

Here’s a bit of the work I did.

After a few long months of development, Pulsus is finally available for the iPad. From my original flash prototype, Pulsus has grown in every way possible. It’s found a new home on a wonderful device, has fully redrawn graphics, a new soundtrack, improved physics, a much improved interface, and a suite of new objects and levels on the way. The game has been completely rebuilt from the ground up in native Objective C and C++.

Visit the new Pulsus page for more information and pretty screenshots. View Pulsus in the app store. And play the old flash game.

The app is initially only available for the iPad but will be coming to the rest of the iOS family later this summer.

Of course, there is always more to improve, but Pulsus for the iPad has come very close to my original expectations for the game, creating a simple, but complex world and an enveloping series of meditative puzzles

Some Technical Notes

Pulsus is built using Objective C, C++, and C, it get’s a little hazy to be honest. All audio was created using Ableton Live and Adobe Soundbooth, graphics in Adobe Illustrator. Photoshop was always there to help out too. Original prototype created in Flash and AS3.

All type set in Apex Sans by Thirstype.

Special thanks for invaluable feedback and beta testing to Jason Corace, Jason Sloan, Andy Mangold, Dai Foldes, Dave Fong, and Josh Hepworth.

Moving Forward

Planned updates to Pulsus include an iPhone/iPod version, new objects and levels, and a good list of little improvements here and there.

If you enjoy Pulsus, any rating, reviewing, blogging, and retweeting is appreciated. The better Pulsus does, the better position I’ll be in to make more, and better games in the future. I may even be able to convince the rest of the Friends of The Web to work together on some awesome games.

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.

Some old friends of mine are in a fantastic band, Reptar. I’m working on a larger scale website for them, but in the meantime I built a quick one pager with basic information and a couple tracks. Check out the site and their music at ReptarMusic.com.

For more information on Reptar, check out their myspace page. They’re currently touring around the southeast, but I hear they’re heading up north soon.

So. In the past, I’ve dabbled in sounds and have worked with sound as components of other projects such as games. More recently, in the past few months, I’ve been looking to create audio works which are more able to stand on their own. Here are my first three works.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

I won’t apologize too much. It’s probably clear I’m new to this, but I think it’s important that I get it on the internet. Any feedback is very much appreciated. Thanks in advance internet.

All of the original audio was either created in Pure Data or sampled from recordings around Baltimore. Thanks very much to Andy Mangold and Dai Foldes for the audio recorder. Samples were processed in Audacity and Adobe Soundbooth and arranged in Ableton Live.

Audio spectrum visualization of a section of the third track. Click to enlarge.

HowWeBuildTheWeb is an informal research piece which explores how web designers and developers learn their craft. I had hypothesized that most learned primarily outside of institutions from their peers, either in person or through the web. So far this is overwhelmingly the case.

Visit the site.

The site asks designers and developers how and when they first learned their skills and graphs the data over time, showing time horizontally and educational source by the color. Each participant is shown as a block on the timeline. Clicking on each will show more detailed information including answers to a number of qualitative questions about their experience and the web in general.

Check out the site to see peoples responses and how the education of web designers has changed over time. If you make websites, contribute and share your experience.

On a technical side, the site consists of two main components, a form and a set of data visualizations. Form design is a complex art. I used a few common techniques to make it easier to use. The form is organized by the type of information, large fields are shrunk while they are empty, and lists are extended as necessary. There’s also a sneaky login system that I did my best to hide. After submitting, users can edit their information and resubmit. If they return to the page much later, clicking the edit link will let them enter their email and password.

The data visualizations are primarily handled with PHP, HTML, and CSS. The timeline is a table (the first html table I’ve ever made ever). Cells that represent individuals have classes and other attributes so they are colored and clickable. The table handles all of the scaling. The area graph is just a couple of divs with style attributes dropped in for the width. Nothing too fancy.

The site is built on my favorite frameworks: Codeigniter, a php library, and jQuery, for a few javascript touches.

WordPress Processing Embed is a wp plugin to embed Processing applets into WordPress posts and pages. The plugin lets you embed applets directly into the page, or, display in the page or in a new window, when alternate content is clicked.

If you have a WordPress site go try it out. Let me know if you find any problems or have suggestions. This first release does not yet include support for libraries.

Usage

To use the plugin, upload a .jar file through the media uploader and insert the shortcode [processing file="yourapplet.jar"]. A default width, height, and embed method can be set in the admin panel and they can be overridden with parameters. Alternate content can be placed in a closing shortcode. For the ‘newwindow’ and ‘onclick’ methods, alternate content will be displayed and wrapped in an anchor tag.

A more complex example: [processing file="yourapplet.jar" width="500" height="300" method="onclick"]Alternate Content[/processing]

When exporting your applet, ‘use multiple .jar files’ should be checked in the processing preferences. The plugin already includes the core.jar file.

Demo