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!

I’ve spent the last four years at the Maryland Institute College of Art and recently graduated. I had a great experience at MICA. It’s sad to leave, but I’m ready to start something new as well.

Moving on I’m starting my own design studio, working on the web and other screen based platforms, with some good friends of mine. We’ve spent the last few weeks moving and setting up our new studio. We’re staying here in Baltimore and are excited to join the emerging tech community here. More on that will be coming soon.

Hopefully I’ll have a little more time for personal work now that school isn’t taking up every minute of my life. I have a new game in the works (hopefully with a flash prototype coming soon), as well as some updates to Pulsus. I’d like to blog more consistently, and have a little backlog of things to get that started. Maybe I’ll even have some time to work on some generative works and some sounds. We’ll see what keeps my interest.

I’m excited to be staying in Baltimore and to get back to work after a lot of reshuffling and resettling.

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’ve been playing around with Pure Data for a while now, along with a few other pieces of audio software. The results of this can be heard in the audio for my recent flash game, Pulsus.

Pure Data is a great application which allows you to control every detail building audio applications from very basic components. Unfortunately, much of the program is very poorly documented, so I’d thought I’d share a few things I’ve managed to figure out.

Here’s a quick walkthrough to create a very basic midi controlled, polyphonic synthesizer in pure data. It doesn’t sound like much, but it’ll get things working.

Generating a Tone

This basic synthesizer will consist of two patches, one patch to generate a tone, and another which will read a midi signal and control a few instances of the tone generator.

This is the oscillator patch which generates a tone from a midi message. The tone is created on the left side and the envelope (the change in volume over the course of a note) on the right.

The tone patch has an inlet at the top, which accepts a message containing a pitch/velocity pair, and an outlet at the bottom which sends out the audio signal generated. The [unpack] object splits the pitch and velocity. The pitch is sent to a series of objects on the left side which generate the tone. The velocity is sent to the right where the envelope will be generated.

The pitch, in the form of a midi note number, is converted to a frequency in Hertz which is then sent to an oscillator, generating an sine wave.

Two messages will be sent for each midi note, the first when the note begins and the second when the note ends. The ‘note off’ message will be the same but the velocity will be 0. The velocity, how hard the note was hit, is usually used to set the volume of the note. The velocity is sent to a [select] object. If it is zero, the message is sent to release the note, otherwise to attack. Each of these send a message to a [vline~] object which sends a signal for the amplitude which either ramps up or down.

Finally, the tone is multiplied by the envelope and sent out the parent patch. When the note is hit, a message is also sent to the oscillator which resets the phase.

MIDI and Polyphony

Now that we have our oscillator we need to create a patch which will control a few instances of it. The patch will receive midi data from a hardware controller or from another piece of software. The midi settings will need to be configured for PD to receive the data.

The PD patch which takes midi input and handles the voice allocation, controlling a number of oscillators.

At the top of our patch we have a [notein] object which reads midi from channel 1. [notein] will output pitch/velocity pairs. The [poly] object handles the allocation of different voices. When pitch/velocity pairs are sent to it it sends on the data with the addition of a voice number.

In order to play multiple notes at once, the messages will be routed to a number of different oscillators, each a different ‘voice’. When [poly] receives a note, it will give the number of the first available voice. When it gets a ‘note off’ message (velocity of 0) it makes that voice available again so that that oscillator can play another note when it needs to.

Now we can route the processed messages to a number of instances of the ‘tone’ patch. We do this by packing the messages into lists and using the [route] object which sorts them based on the first element in the message. Awesome. Finally we just add all the signals from the oscillators together and send them to the audio output. It first also multiplies the signal by a amplitude set by the slider so that we can adjust the volume of the synth.

Ok, So What Now?

Now that we have a simple little synth we should be able to get some sounds. A midi signal can come from a physical midi controller or from software. You can use a program, like Ableton Live, to create a composition and then send out midi. You can also create other pure data patches to generate midi. A patch could create generative melodies, act as a sequencer, or create midi from another input such as the keyboard.

The synth at this point just plays a sine wave for each note. It’s a start, but not thrilling. To create different timbres, the [osc~] object can be replaced with something to play different waveforms and we could add modulators or a more complex envelope generator. On top of that we can run the audio signal through filters either in pure data or in other software. A bit of reverb will make it sound a little less flat.

If you have any suggestions post them in the comments. I’m certainly no expert, and I’d love to hear some other methods.