Anthony Mattox Interaction Design + Digital Art

Over at Friends of The Web we’re excited to announce the release of our first iPhone app!

Quiption lets you combine your photos with artistic, hand-lettered phrases and send them as real, printed postcards. It’s available in the App Store for free. We partnered with the wonderful folks at Sincerely who handle the printing and mailing of the cards.

For Betascape, a weekend event of art and technology in Baltimore, I’m giving a workshop introduction to Processing. For the workshop I’m going through a series of demo scripts that take you through doing basic drawing in Processing through creating simple animations and using objects, arrays, and loops. All the scripts are extensively commented and might help you get started if you’re interested in learning Processing.

The scripts cover:

• Basic Procedural Drawing
• Using Variables
• Creating Simple Animations
• Using Conditionals
• Creating Custom Functions
• Animating with Gravity
• Mouse Interactions
• Repeating Code with Loops
• Storing Sequential Data in Arrays
• Working with Objects
• Arrays of Objects

If you’re interested in getting started with Processing this may be a good place to start. Each script builds off the last and adds a new tool. Go through them slowly and create your own scripts using the new techniques from each. If you get stuck (it gets a little more complex with loops, arrays, and objects) there are tons of other great resources on the Processing Site and if you’re looking for some specific help, I’d be happy to point you in the right direction.

I’m excited to be giving a workshop on Processing at this year’s Betascape. Betascape is an annual weekend long event in Baltimore celebrating the intersection of art and technology. This year, it consists of a series of talks and workshops and a day of making. It’s taking place from September 23-25.

If you’ve been interested in learning to create things with code, the Processing workshop can help get you started. We’ll take you through getting started with Processing, getting the very basics of programming, and sending you off with all the resources you need to continue learning and experimenting with code.

Check out betascape.org for more information on the event and to get get tickets.

I put up a little site to host the games I’ve been working on. Check it out at games.anthonymattox.com. Right now it features Pulsus, Orbit: currently a flash prototype of an eventual iOS game, and Plong: a little two player flash game.

I hope to be adding some more soon.

I played around a bit with processing.js, an awesome bit of software that runs processing scripts in a browser using the HTML canvas element. I wanted to use it to create an animated full browser background for a web page. I couldn’t find any info on how to do this online, but came up with a solution. It may not be the most elegant, and performance starts taking a big hit at large sizes, but I wanted to share it in case anyone wanted to build on it or already has a better answer. I’ll also note that I haven’t tested this thoroughly.

Simply resizing the canvas element just stretches the rendered image so it needs to be changed within processing.

Since the processing script is essentially converted into javascript it’s possible to communicate between the processing script and other javascripts. So, I added an listener for the window resize event (using jQuery), which calls a function in the processing function to resize the canvas element.

The javascript looks like this:

// javascript (requires jQuery http://jquery.com)

var ProcessingInit = function() {
  function resizeWindow() {
    var pCanvas = Processing.getInstanceById('pCanvas');
    pCanvas.resize($(window).width(),$(window).height());
  }
  
  $(window).resize(resizeWindow);
  resizeWindow();
}

It’s wrapped in a function so that it can be called from processing when the application is started. ProcessingInit(); in the setup function. This makes sure the canvas element is fully instantiated before it tries to manipulate it.

It’s pretty straightforward on the processing side as well. That function simply calls the size function again. I’m not sure if that’s good practice, but it seems to work fine.

// processing

void setup() {
  size(800,600);
  ProcessingInit();
}

void resize(float X, float  Y) {
  size(X,Y);
}

I’m excited to announce the launch of our new website here at Friends of The Web. We’re a web design studio just opening our doors here in Baltimore. We specialized in design and development on the web and on mobile devices. We’re especially interested in working with small local businesses and are open to any other interesting projects.

Check us out at FriendsofTheWeb.com, and don’t hesitate to get in touch with us!

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.

Various illustrations of space junk for a new game. Click the image to enlarge.

I’m working on a flash prototype for my next game, which will probably end up on iOS. Moving on from Pulsus, I’m designing something with a little more narrative, scenery, and character, although it’s still pretty much just particles…

Here’s a jumble of various pieces of space junk I’m working on for the game. It’s a fun process of designing little vector rockets and spaceships and then tearing them apart. I’m aiming to release a first prototype this weekend.

Generative Images created in Processing. Click to Enlarge.

I was recently asked to create some work for a collaborative project. I decided to create some generative work in Processing and try out some ideas I’ve had in the back of my mind. The script wraps a number of different generative patterns into one system. Each circle has instructions for how it behaves and creates new circles and these instructions change as they grow. The images it creates are more complex and dynamic that a lot of my preview sketches.

A slightly more technical explanation: The script has an array of objects, I’ll call them nodes. Each node has a couple of functions for initializing itself, branching new nodes, updating, and rendering. The container creates a new node which grows, branches, and then becomes inactive. The newly branched nodes grow and branch and the cycle continues, growing the image.

The fun part is that the basic ‘node’ object can be extended to any number of variations all of which can still be handled as the generic type by the container in the same way. The container tells a node to ‘branch’ and it may create new nodes randomly around itself or touching it’s sides or in a set direction to grow tendrils. Each variation of node also sometimes branches to different types so one structure will morph into another. Other functions, like rendering, can also be extended or overwritten to create different behavior.

I think there’s a lot of potential in this kind of polymorphic system. I’ll play around with it some more and maybe post some more technical examples.