Anthony Mattox Interaction Design + Digital Art

HowWeBuildTheWeb is an informal research piece which explores how web designers and developers learn their craft. I had hypothesized that most learned primarily outside of institutions from their peers, either in person or through the web. So far this is overwhelmingly the case.

Visit the site.

The site asks designers and developers how and when they first learned their skills and graphs the data over time, showing time horizontally and educational source by the color. Each participant is shown as a block on the timeline. Clicking on each will show more detailed information including answers to a number of qualitative questions about their experience and the web in general.

Check out the site to see peoples responses and how the education of web designers has changed over time. If you make websites, contribute and share your experience.

On a technical side, the site consists of two main components, a form and a set of data visualizations. Form design is a complex art. I used a few common techniques to make it easier to use. The form is organized by the type of information, large fields are shrunk while they are empty, and lists are extended as necessary. There’s also a sneaky login system that I did my best to hide. After submitting, users can edit their information and resubmit. If they return to the page much later, clicking the edit link will let them enter their email and password.

The data visualizations are primarily handled with PHP, HTML, and CSS. The timeline is a table (the first html table I’ve ever made ever). Cells that represent individuals have classes and other attributes so they are colored and clickable. The table handles all of the scaling. The area graph is just a couple of divs with style attributes dropped in for the width. Nothing too fancy.

The site is built on my favorite frameworks: Codeigniter, a php library, and jQuery, for a few javascript touches.

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.

Last week I had the fantastic opportunity to attend the Adobe Design Achievement Awards. My flash game, Pulsus, won in the Non-Browser Based Design section of Interactive design. The List List was also a finalist in Browser-Based Design. The award also came with a copy of CS5 Master Collection, which I’m very excited to start playing with. I’m a few versions behind and don’t have any of the fancy programs like After Effects.

All of the finalists were flown out to LA for the award ceremony and were given passes to Adobe MAX, a yearly conference where they show off their latest technologies and projects. By far the best part of the trip was meeting a bunch of great people, both other students in the competition and professional designers and developers.

So thanks Adobe. I hope to see you again next year in Taipei.

Oh wow. Look at this cool new website. Yes, for sure, it is both of those things.

I’ve been working on this new website for quite a while. It’s still, of course, a bit of a work in progress, but with a little luck everything is working. I’m still building my portfolio here. The system I have set up, again using WordPress, is fairly flexible so I can do some nice things in the future. You’ll also find a much better homepage which does a better job, I think, of showing off my work. You’ll also find some nice little changes such as a fancy new favicon, which now makes some sense, and keyboard navigation in the portfolio.

If you catch any bugs or if you have any suggestions let me know.

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.

Recently I performed with a musical group, creating generative imagery as a backdrop. I decided try using quartz composer again, primarily because it renders graphics so quickly and smoothly, but also because it’s fairly easy to put something together. Unfortunately I ran into a significant roadblock. Quartz composer has no way to control elements while they are running. Although you can completely restructure and modify your script while it is running, there are no interface elements to control simple changes in values. Obviously, this makes QC so much less valuable as a performance tool.

Having already set up most of my script in Quartz Composer I decided to find a way to control it some other way. Pure Data, an application similar to Quartz but for the production of sound, allows you to easily build interfaces. The data is then sent out of pure data as midi controller values, sent through a virtual midi channel, and grabbed by Quartz Composer. From there the values can be used for whatever is necessary.

Figuring out the details took a little while and some help from my friend Michael Scoot-Nelson, but the setup is actually quite simple. In Pure Data, just set up as many controller as you need in the form of sliders or other UI elements.

In this case, I have a number of vertical sliders labelled for a particular application. Above each controller I have an object which receives a bang [r b]. In Pure Data the value from each slider is only sent when the slider is changed. Sending a bang to the value ‘b’ pushes all the values down and sends them out to the midi channel. The Sliders should be set to a range from 0-127.

The values from the sliders are plugged into the first inlet of control out objects (ctlout). The ctlout objects also need a controller number and a channel number. These are used to get the value on the other end. The channels can all be set to one, and each slider should have it’s own controller number.

In Quartz composer, a ‘Midi Controller Receiver’ object will grab the values sent from Pure Data. Viewing it’s settings in the inspector, the number of inputs can be changed. Each input is listed with an integer, these are the controller numbers which must be matched to the ones set in pure data. The channels being received can also be changed.

There is one final step to getting everything hooked up. In Pure Data, under Preferences > Midi Settings must be set to an Midi Channel that Quartz Composer is listening for. On a Mac it’s easy to set up this channel with the IAC Driver in Audio Midi Setup.

I also created this little guy here. One element I was controlling in Quartz Composer (a particle generator) could only be set on or off and I needed it to vary smoothly. This creates what is essentially a pulse width modulation simulated analog output. Pressing the ‘on’ and ‘off’ buttons do just that, and pressing the pwm toggle lets you use the slider to set it more or less on.

Metro’s turn the output to on every tenth of a second. It is then turned off (ten times a second) after a short delay (less than a tenth of a second). If the slider is at the bottom it turns back off almost immediately, so for the greater part of a second it is off. If the slider is at the top, it takes nearly a tenth of a second to turn back off, so it is mostly on. In the middle it will be on half the time. The result, at least for my particle generator, was the appearance of it’s rate changing while really it was just turning on and off very quickly. I’m not sure where else this would be useful, but here it is.

It might be a little hard to read, but if it would be useful to anyone I can upload the pd file somewhere.

The List List is net art* piece I’ve been working on for the past few months. It is a collaborative list of lists, an open platform for everyones favorite superlatives.*the deacons of new media art might not agree as it isn’t ugly as sin and the concept isn’t unbelievable convoluted and yet meaningless.

On the site, you can create lists and vote lists and items within them up and down. The goal is just to build a collection of fun and humorous lists.

The site has been an enormous technical exercise in precisely executing a complex web page. Despite the apparent simplicity, it is one of the more involved sites I’ve built. Including a number of interactions with the database and an extensive collection of ajax scripts so that all the site’s functions can be used without reloading the page and with a flourish of sleek animations.

It’s very easy to get burned out on a piece with just a few details left to go. I did my best to polish every detail of the The List List, making every transition smooth and considering every graphic, semantic, and functional minutia.

I built the site using CodeIgniter, a php framework, and jQuery. CodeIgniter was probably not necessary, but it made laying out the foundation super fast. jQuery is of course great for animations and simplifying Ajax scripts.

Go have some fun with it.

Another poster for the Ligetisplit Ensemble.

The poster is a little atypical, but I tried to establish the relevant hierarchy of information in new ways to create an interesting poster. The title is near the bottom of the poster, but is large enough be the focal point. The background graphics also bring attention to it.

Other key information, for someone who wants to attend, is closest to the top-left, in a position of attention. Little icons also help to make their purpose clear at a glance.

The graphics were created in illustrator using transform tools, something I’ve been playing with in my make something cool everyday project.