Anthony Mattox Interaction Design + Digital Art

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 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);
}

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.

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

I have an exhibition up at the Maryland Institute College of Art. One of a number of exhibitions awarded to students. The exhibitions consists of a number of large scale prints of work I have done with Processing over the last two years. These works are largely based on particle systems which create intricate and organic patterns. Many of the programs written to generate these images can be played with at anthonymattox.com/interactive.

More information on particular works can be found in my portfolio and in related posts in my blog

The exhibition runs until Oct. 15. There will be a reception (with snacks!) on Friday Sept. 24 from 5-7pm.

It’s located in the Gateway building at MICA, 1501 Mt. Royal Ave, Baltimore MD.

The prints in the show are for sale. Contact me if you are interested. The large prints are all unique compositions and are for sale for $300. The smaller poster prints are in editions of 20 prints for $40′s each. All are high quality ink jet prints on archival matte paper.

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.

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.

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 »