Anthony Mattox Interaction Design + Digital Art

Title screen for Orbit, a flash, arcade style, adventure game in space. Click to play!

Orbit is an arcade style adventure game. Explore an abandoned field of space junk and collect enough fuel to find your way home. The game is currently a small segment of the final adventure. In it I focused on developing the basic gameplay and the tone through motion, scale, graphics, and sound. Put on some headphones and give it a try.

Screenshots of the game. Click to enlarge.

In many ways, Orbit is quite similar to my first game, Pulsus. It’s just more circles and particles. But, while I’m certainly still show’s the same style and interests, I’ve added a few things to my game design vocabulary here. The biggest thing I tried to add was narrative and character. Although the story and goals are vague, I wanted to bring people into the game more with a bit of setting. I also tried to develop a sense of scale to the world.

Any feedback on the game is very much appreciated. This prototype is likely going to be expanded into an iOS game, with help from the rest of the Friends of The Web.

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.

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 »

Back at the old particle system I’ve been enhancing the interaction. In the applet you can now easily create and remove particles and links. Particles can be dragged and multiple particles can be selected. Right now everything is controlled with keypresses, but I plan to build an interface to easily switch between tools and to modify particle and spring properties as well as environmental properties. When its a little closer to finished I’ll post it into my interactive site.

In these images, springs are drawn in purple and forces are drawn as blue lines, stronger forces are darker. Drawing the forces is a little unnecessary but it creates interesting patterns. Which is, at this point, all this application really does.

What is particularly interesting is the way structures move. In the image below, a radial structure is dragged by its central point. The whole mass distorts into a cardioid shape. It eventually collapses into chaotic motion. Moving any particle in an interconnected set creates waves through the rest of the system.

I cracked open the old Processing Particle System again and tried something a little bit different.

Beginning with particles moving through a Perlin Flow Field I moved them into 3d. Since my particle system is built on the PVector class, adding the third dimension was a simple matter of adding a third parameter to every call to a new PVector and adding either the P3D or OpenGL (used for all the images here) rendering engine. An extra force pushes the particles up through space an array stores the previous locations for each particle. As particles die an instance of another object is created, exclusively for storing and rendering these paths.

Another addition causes the growing strands to bud. The budded particles inherit the properties from the parent. Changing the forces between particles, the branching rate, and the environmental properties creates many different structures.

As the script runs, a cloud of particles drifts up through space leaving behind a colorful twisted shrubbery. Using the mouse and keyboard the camera can be moved around the structure while it generates itself.

Read On »

I created this set of posters for a performance by the Ligetisplit Ensemble. The images are created with Processing. I had to finagle things a little to get high resolution rendering of my processing sketch. I set the screen dimensions to the pixel dimensions I needed, scaled up my inputs to interact with the whole screen, and had to enter expose or save the image to see what it looked like. It actually worked better than I expected.

Another little experiment with my particle system. Each particle is rendered very large with a slightly darker stroke than fill, and each frame is drawn over the previous one. This along with the color shifts creates some nice pseudo three dimensional effects. The effect is especially interesting when particles overlap as they move.

Read On »