Anthony Mattox Interaction Design + Digital Art

I’ve just finished a website for this cute girl I know, Rachel Verhaaren. She is a photographer, and a student here at MICA. Her work has really fantastic colors and textures (two of my favorite things), especially her large format photographs and often focus on optics and perception.

Most photographers seem to want the most minimal of sites, a white or dark grey page with their work in the middle. I felt it was more appropriate to give it just a little bit more color and give visitors a good impression of Rachel’s work as soon as they open the page, something few photographer’s sites do. WIth that in mind, her portfolio is on the front page with large images linking to sets of images.

www.rachelverhaaren.com

Some nice javascript touches are built with jQuery and the site is powered by WordPress.

Here is a poster I designed for an event held by the Ligetisplit Ensemble, a musical group in Baltimore. The event, a History of Electronic Music Instruments, should be a good night.

I used an old Processing sketch which visualized an audio stream. The typography isn’t quite what I usually do, but it seemed appropriate for the event. It probably isn’t that unusual anyway.

I’m taking a web design class this semester working with Etsy, an online marketplace for handmade goods. To familiarize ourselves with the site, our first assignment is to make something to sell on it. As you can imagine, students in a web design class are not necessarily the craftiest of people.

I’ve decided to design a set of coasters and have them laser cut from wood. The coasters will be circular, with designs partially cut into the surface and then primed.

I’ll post the finished pieces and a link to the shop when they’re done. They’ll come in a set of four and there will be a handful of sets available if you’re interested in them. For now, here are the designs I’m planning. They were drawn in Illustrator. Nothing generative this time. Click on the images to see them larger.

Snow. Venturing out in the tail end of the recent snow storm. I’m not used to so much snow, and neither was the rest of the city. Cars were (are) completely lost in snow and the streets were completely filled. The snow’s definitely slowed things down, and also stopped the whole city, But it was also a great experience.

With two feet of snow on the roads, the city belonged to pedestrians. The scene was fairly apocalyptic, but at the same time people were walking around in the snow and everyone seemed a little friendlier than usual. Not to mention crime has dropped to almost nothing.

At sunset after the storm, the houses were cast in the most beautiful warm light. Here is also a car under a pile of snow.

When the snow first started it melted. The snow then stuck onto the wet trees. It made a great winter wonderland scene and took a few trees down.

Rachel Verhaaren wading through the snow.

Read On »

My department at MICA (The Maryland Institute College of Art), Interaction Design and Art, recently had a competition to design a shirt for the major.

The ring in the design was created in processing. My original design was a little bit more intricate and had four colors, but I think it still looks pretty good. If you want a free shirt, just come to mica and join our department.

For a while I’ve been interested in exploring sound as a new medium. Pure Data is a sound program which I’ve been particularly interested in. The program is something like a visual programming language, with a similar interface to quartz composer. Objects which represent chunks of code are placed on the canvas. These objects have inputs and outputs through which they send and receive data in the form of numbers, strings, and audio signals. Some graphic interface elements call also be added to control applications.

Starting to work with Pure Data is a little intimidating. Objects added to the stage are blank and you have to type into them what object the should be. Until you understand what the basic objects are and how they interact trying to get anything working isn’t easy. For at least a good while I’ve been opening up Pure Data every few months only to put it away again after beating my head against it for a while.

For my recent flash game, Pulsus, I decided to create the sound using Pure Data to force myself to learn the program. I managed to cobble together a basic understanding and build a few synthesizers and sound generators.

I used this first patch to create most of the sound effects in the game. For a number of oscillators the pitch and envelope can be changed. The pitches can create harmonics, harmonies, or dissonant chords. The envelope, the volume over the course of the sound, creates pulsing tones, short beats, and any other type of tone. I also added an amplitude modulator and a global envelope to add some more control.

In my next experiment I created a simple mono synthesizer. Key inputs, from my computer keyboard, are mapped into midi notes. When a key is pressed the frequency slides to that note if another note is still playing. Key presses trigger the envelope generator which reads data from an array (top right). The synth also has frequency and amplitude modulators and reads the waveform from a table to include harmonics.

Next I build a polyphonic synthesizer which has a separate oscillator for every note in the scale.

Here are the pure data files for these patches in case they might be useful to anyone, but again they are not super efficient, organized, or annotated.

• tone generator
• monosynth
• polysynth
• polysynth tone (an abstract for the polysynth)

These are my first moderately successful explorations with Pure Data. Some things, I realize, are not done as efficiently as possible, but I’m working things out in the next iteration. My next frustration is to find a way to control the instruments I build. I need a midi sequencer with which I can construct songs that could then send the midi info to Pure Data. I tried using a garage band plugin to output midi info from garage band but It came out pretty garbled in PD, I could be doing something wrong though. Any thoughts on how I should go about this?

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 »

On my way to developing my 3d tree script I first added a function to my basic particle system to cause the particles to branch. I went back and polished up the rendering of this as it looked interesting in 2d.

As usual, the script is built in Processing. Particles are generated by clicking on the screen and then they spread out pushing each other away. A slight perlin noise field gives the strands a more interesting motion and texture. Each frame is drawn successively on the screen, tracing the particles motion, without clearing the background. Each particle is rendered as a filled ellipse with a lighter transparent outline, creating a slightly 3d feel as the outlines get denser toward the edges.

To render the images with a higher resolution I created a global scale variable. The width and height of the applet are multiplied by this variable and then the scale function is called with that variable at the beginning of the draw loop. This lets me switch quickly between a manageable size to see what’s going on and the high res version. On my mac, entering expose fits the oversize window onto my screen. It’s far from a perfect system but it works. Exporting vectors is a much better rout, but this application is to complex for that to be feasible.

Now pictures. Click to see them bigger.

Read On »

Two pieces of mine are currently on display in exhibitions at MICA.

WikiWeb, a piece I created about a year ago is part of an exhibition of interactive work, Sight Sound Interaction (SSI4). The show is curated annually by Jason Slaon and is in the Rosenberg gallery on the second floor of the Brown Center. The project itself is an interactive map of Wikipedia. Pages on the site are represented by small points and links are are drawn as lines connecting pages. Any point can be expanded to show all the pages it links to. You can interact with a working version of the project on the project site or swing by the exhibition to see it and some other works.

The Juried Undergrad Exhibition is another annual show which features a wide range of work from students at MICA. This year I submitted a print from my ribbons piece. It’s exciting to see my work printed on a larger scale, about 36″x24″. To get the image for the print I added a bit of code to save the drawing as vector objects which can then be redrawn and exported as a PDF. The exhibition is in the Meyerhoff and Decker galleries on the first floor of the Fox building.