Anthony Mattox Interaction Design + Digital Art

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.

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 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.

My department at MICA recently changed it’s name from Interactive Media to Interaction Design & Art (IxDA). Interactive media was perhaps an appropriately ambiguous name considering the work coming out of the department, but the new name is hopefully more self-explanatory.

To advertise the new name there is a t-shirt design competition, and then free shirts for all the majors. I’ve been working on some designs, mostly just typographic logos. This one looked half decent and I combined it with something I was working on in Processing. Here are a couple sketches.

One of my recent assignments in one of my classes was to develop a card game. Not surpisingly, this wasn’t an easy task. The game was to be for two or more players and had to involve a deck of cards and one other object.

I didn’t come up with a good name for the game I came up with, but I think it’s half decent, especially given a week to create it.

To play the game you’ll need a deck of cards and a set of tokens for each player. The tokens are used to mark which player controls a card. These could be poker chips, beads, coins, or anything else. You may need up to 25 per player.

Give it a try and let me know how it is or if any of the rules are confusing.

Setup:

25 cards are placed in a five by five grid from a shuffled deck of playing cards, each player is dealt four cards, and the rest of the deck is placed face down. Each player picks a color of game pieces

Goal:

Players compete to control more cards than their opponents by the end of the game.

Rules:

• Players take turns and try to control as much of the grid as possible.
• Each turn a player has three options.
  • Switch two adjacent cards on the board, vertically or horizontally.
  • Replace a card in the grid with one from their hand. The initial card is placed in a discard pile or left underneath the new card. The player picks up a card from the deck to keep four cards in their hand.
  • Pick up a new card from the deck and discard one from their hand.

  

• If a player makes a set of three or more cards in a row they place their pieces onto those cards. A set includes cards of the same number or consecutive cards of any suit.
  
  
• After a card has been claimed by a player it is frozen and can not be moved or replaced except by a higher card which completes a set.
• If someone replaces a card in a set with a higher number card, creating their own set, the rest of the initial set still belongs to the player who created it, but the replaced card is now controlled by the other player.
• If a card within a set is included in another players set that card is claimed by that player regardless of the sets value.
• If a player extends a set (e.g. from three to four cards) the whole set belongs that player.
• When there are no more cards in the deck, each player takes one additional turn and the game ends.
• The player with the most cards claimed at the end of the game wins.

I also made a graphic (full-size image) of the better part of the game with some brief explanations. It might make things a little clearer.

This semester I’m taking my first formal class in typography. I’ve gleaned enough to do a decent job with it, but it’s definitely something I should do. So far the work for the class has involved a series of exercises, each producing a number of square compositions exploring letter forms and their interrelationships. In each we had a number of restrictions and goals. Here are just a few that I found more interesting.

Of course, after playing with letters in Illustrator for a while, I thought it would be a good idea to throw some letters in Processing. Processing handles text pretty well and the results can be exported as a PDF (vector graphics). The text will be rendered as text in the PDF. For scripts involving words I created an SVG file of the word so I could have more control over the type.

The next three used my particle system with a perlin noise flow field as in some of my other projects. Each characters’ mass is based on its size, but one character is also a little lighter than the other making them separate slightly as they are pushed by various forces. The noise field is also slightly offset in a third dimension to cause further separation.

Using a more recent iteration of my particle system I created these next two by replacing the springs with the word interconnection.

I used a cellular automata script to create this last one. Each state of a position in the array corresponds to a letter in the word automation which is also written out in the first generation of the system. With so many states the system becomes to complex to form any recognizable patterns, but I thought it was at least a little humorous.

This sketch builds off one of my recent experimentations in wave motion. In the script an array of waves is created by various inputs. Each wave effects the array of ‘fluid’ and creates a rippling structure. Here the structure is rendered not just after all the waves have been calculated but after each wave is processed.

The result is a stack of rippling points flowing between each other. I first just rendered each wave as a thin bar, to make sure everything was working properly, and then added a color property to the wave class. I dropped the symmetry to avoid some unintended interpretations. The script runs much slower, as I should have expected. I’ll try and streamline things a little (although it’s already very simple) and put it onto my interactive site. I might just have to put some limits on it so people don’t crash their.

Now a bunch of pictures!

Read On »