anthony mattox new media art & design

Snow Snow Snow

Snow. Venturing out in the tail end of the recent snow storm. I’m not used to so much snow, and neither was the rest of the city. Cars were (are) completely lost in snow and the streets were completely filled. The snow’s definitely slowed things down, and also stopped the whole city, But it was also a great experience.

With two feet of snow on the roads, the city belonged to pedestrians. The scene was fairly apocalyptic, but at the same time people were walking around in the snow and everyone seemed a little friendlier than usual. Not to mention crime has dropped to almost nothing.

At sunset after the storm, the houses were cast in the most beautiful warm light. Here is also a car under a pile of snow.

When the snow first started it melted. The snow then stuck onto the wet trees. It made a great winter wonderland scene and took a few trees down.

Rachel Verhaaren wading through the snow.

read on »

Pure Data: My First Attempts at Virtual Instruments

For a while I’ve been interested in exploring sound as a new medium. Pure Data is a sound program which I’ve been particularly interested in. The program is something like a visual programming language, with a similar interface to quartz composer. Objects which represent chunks of code are placed on the canvas. These objects have inputs and outputs through which they send and receive data in the form of numbers, strings, and audio signals. Some graphic interface elements call also be added to control applications.

Starting to work with Pure Data is a little intimidating. Objects added to the stage are blank and you have to type into them what object the should be. Until you understand what the basic objects are and how they interact trying to get anything working isn’t easy. For at least a good while I’ve been opening up Pure Data every few months only to put it away again after beating my head against it for a while.

For my recent flash game, Pulsus, I decided to create the sound using Pure Data to force myself to learn the program. I managed to cobble together a basic understanding and build a few synthesizers and sound generators.

I used this first patch to create most of the sound effects in the game. For a number of oscillators the pitch and envelope can be changed. The pitches can create harmonics, harmonies, or dissonant chords. The envelope, the volume over the course of the sound, creates pulsing tones, short beats, and any other type of tone. I also added an amplitude modulator and a global envelope to add some more control.

In my next experiment I created a simple mono synthesizer. Key inputs, from my computer keyboard, are mapped into midi notes. When a key is pressed the frequency slides to that note if another note is still playing. Key presses trigger the envelope generator which reads data from an array (top right). The synth also has frequency and amplitude modulators and reads the waveform from a table to include harmonics.

Next I build a polyphonic synthesizer which has a separate oscillator for every note in the scale.

Here are the pure data files for these patches in case they might be useful to anyone, but again they are not super efficient, organized, or annotated.

• tone generator
• monosynth
• polysynth
• polysynth tone (an abstract for the polysynth)

These are my first moderately successful explorations with Pure Data. Some things, I realize, are not done as efficiently as possible, but I’m working things out in the next iteration. My next frustration is to find a way to control the instruments I build. I need a midi sequencer with which I can construct songs that could then send the midi info to Pure Data. I tried using a garage band plugin to output midi info from garage band but It came out pretty garbled in PD, I could be doing something wrong though. Any thoughts on how I should go about this?

AnthonyMattox.com V9

Once again, It was time for a complete re-design of my website.

After a few frustrating iterations, my previous design was just something created to be as simple as possible so I didn’t screw anything up. White background, black text, lots of pictures. It worked out pretty well, but it didn’t exactly sell me as a web designer (to be fair this one isn’t very web-designer-ish either). It was also a little cold and unfriendly. It also had some formal issues, such as wide text columns.

This new site fixes these issues, and is also generally more visually interesting.

The Blog layout stayed more or less the same. The post meta-data is in the left column followed by the main column for the post content. A third column, on the right hand side, can be used to annotate images and other elements within a post. I’ve also added a fancy tag cloud and page numbers thanks to a nifty plugin. I’ve been struggling between having a wide column with nice big images, and a thinner, easier to read, column, with smaller images. To try and get the best of both, I added Thickbox (sorry Lokesh, I was already using jQuery).

I feel my work is much more effective when it is larger and I had to sacrifice larger images in my blog for the sake of the layout. Thickbox helped this some, but just to make sure, I added the option to add a custom background to every blog post and page. Someone with a larger screen looking at on of my projects will see an elegant column of images, but will also have it filling in the background around the page. To enhance this I also have custom highlight colors to match the background image. Any page that shows multiple posts pulls these custom options from the top post.

The Home Page has grown substantially. A work from my portfolio is still featured at the top and it’s background pulled. I’ve also added more links to other parts of my site and around the web, and a silly picture of me, just for fun.

My Portfolio now has three viewing modes (large images, excerpts, and thumbnails) and benefited from other site wide additions.

As of right now I still have some little tweaks to make, but everything seems to be pretty much in place. I hope to get some feedback from everyone on the new page look. Comment below, or try my fancy new contact form.

Format Processing & Arduino Code for the Web

In my blog I frequently share code for little projects in Processing & Arduino. It’s always bothered me to look at the black and white text which, in comparison to the beautifully colored code in various editors, is quite a strain to read. I considered a few ways to do this, primarily client side with JavaScript, server side with PHP, or something pre-formatted in any language.

I decided to write a script to add in the necessary HTML to color the code, which I could then paste into my site. Although this does add a fair amount more to the size of the HTML files on the site I decided it was the best way to go. A server side script, probably built into a Wordpress Plugin, would be nice and easy to use, but it would be run every time the page was loaded and would be a load on the server. A JavaScript highlighter would also work well, but it would still be a large script anyway and it would add the hassle of browser inconsistencies and run time on slower browsers.

Since I was building this script I wanted to make it available to others. The Processing and Arduino communities, which the script is built for, are both great about sharing code, and this will make sharing just a little bit easier.

The script is built into a simple site at www.anthonymattox.com/code_formatter. You can paste your code into the page, adjust the settings, and format it. The script returns the HTML and a chunk of CSS based on the styles you selected on the first page. Paste the HTML into your site and either add the given CSS or use it as a model to write your own.

In my blog its styled to look something like this. Unfortunately it’s still black in rss readers.

/* sample processing code */
/* analog clock */
PVector mid;
float sc, mn, hr, s, m, h;

void setup() {
  background(20);
  size(400,400);
  noFill();
  stroke(200);
  smooth();
  frameRate(1);
  mid=new PVector(width/2,height/2,0);
}

void draw() {
  background(0);
  s=float(second());
  m=float(minute());
  h=float(hour());
  sc=(s-15)/60*TWO_PI;
  mn=(m-15)/60*TWO_PI;
  hr=(h-3)/12*TWO_PI+mn/12;

  strokeWeight(2);
  stroke(200,0,0);
  line(mid.x,mid.y,mid.x+100*cos(sc),mid.y+100*sin(sc));
  stroke(200);
  line(mid.x,mid.y,mid.x+110*cos(mn),mid.y+110*sin(mn));
  strokeWeight(4);
  line(mid.x,mid.y,mid.x+60*cos(hr),mid.y+60*sin(hr));

  stroke(50);
  ellipse(mid.x,mid.y,240,240);
}

Processing: Saving Sequential Images

Until recently I’ve just been saving all of my images out of Processing using a simple saveFrame command and throwing all of my images into one giant folder. Looking into this folder I see a few key problems. I’ve come up with a little system to help me keep better track of renderings of my generative works. Unfortunately it won’t work retroactively, but it’ll be useful for future work, and perhaps it can be helpful to some other Processors.

This very adding this very simple snipped to a Processing sketch will save out an png of the render window whenever the ’s’ key is pressed. #### will be replaced by the current frame number.

void keyPressed() {
  if (key=='s') {
    saveFrame("name_of_sketch-####.png");
  }
}

This works out pretty nicely, but if you run the sketch twice and just happen to press ’s’ on the same frame the first image will be overwritten. Another issue, which might not seem to bad until you have a huge library of images built up, is the order of the files. If the sketch is run many times, all the saved images will be mixed together. Ideally images saved from one run of the sketch should be named sequentially so all the images from one run can be seen together.

Adding an arbitrary value to the particular run and sticking it into the file name fixes these two issues. Many of my scripts include a function to reset the program so it can be run a few times without being completely restarted. In this case, incrementing this arbitrary global value maintains the order of a set of runs.

int G;

void setup() {
  G=floor(random(10000,90000));
  //noiseSeed(G);

}

void draw() {
}

void keyPressed() {
  if (key=='s') {
    saveFrame("name_of_sketch-"+G+"-####.png");
  } else
  if (keyCode==BACKSPACE || keyCode==DELETE) {
    // code to reset script
    G++;
  }
}

This system isn’t perfect, but is a vast organizational improvement for just a few extra lines of code

Another useful trick, if you have a script which utilizes a lot of Perlin Noise, is the set the noiseSeed to a random integer (like G in the script above), and include that in the file name. This way, if you want to rerun the script with the same parameters later, you can always set G to the integer in the file name of a particular saved image.

Embedding Processing Applets in Wordpress

Despite all the work I’ve been doing with Processing I don’t have many of the functional applets on the web. This is partly due to issues with embedding applets into Wordpress posts. Wordpress, the content management system I use for this site, is a great tool, but it has an unfortunate habit of screwing up code posted within the page content.

There are, of course, plugins to get around such issues, but I have a better plan. I’m building a Wordpress plugin expressly for embedding Processing sketches. I’ve built a very basic version without any admin options. Inserting a simple shortcode into a post adds the applet. The shortcode is contained in brackets and simply reads ‘processing file=”path/to/file.jar” width=”450″ height=”250″‘. The .jar file can be uploaded with the media uploader within the “edit post” page in the Wordpress admin or through the media library. The plugin includes the core.jar, so only the specific (and fairly small) .jar file for the applet needs to be uplaoded.

My basic script suits my own needs, but I’m working on an expanded version with an admin panel to set default options, alt text, and styles. I’m also not sure how this will render in RSS readers (probably not well but it should work in the site).

If you have any questions or suggestions on how I should move forward with this or features I should include leave a comment. The plugin should be available within the next few weeks.

see how it looks »

Summertime

After a few busy weeks I’ve finished my finals and moved into a new apartment (if you can guess I’m not exactly built for moving furniture from one third floor apartment to another). It’s finally summer. But now that I’m finished I just want to get back to work. I suppose that’s just how I am, but fortunately I have a long list of summery projects.

I’m spending a chunk of my summer working at the MICA Pre-College program as a Teachers Assistant/Residence Counselor (TARC). I’m very excited for the opportunity to share my skills with a younger group of developing artists and show them around Baltimore. I’ll also be interning for the rest of the summer in a design studio in the harbor, which I’m sure will be a great experience as well.

One of the first things I’m working on is a re-design of my site. After many many iterations I eventually decided to just cut my site down to the essentials, making it as simple and functional as I could. Unfortunately it’s not very exciting. I’ve been working in web design and development for a while now, but still my abilities are increasing so fast that with every site I create the one before it, or even the one I just finished, looks like garbage. Fortunately the other site I’m finishing up still looks decent, so maybe I’m getting somewhere. My new site will have a more interesting, friendly design, some new features and more interactive toys, and a sprinkling of fancy Flash and JavaScript effects. I’ve got a few other web projects cued up, including a big site about Data Visualization, a couple of Wordpress Themes, and hopefully some Flash games just for fun.

My friends and I also have long list of movies to watch, some new recipes to try (sushi & samosas! but not together), some vegetables to grow on our new deck. And of course some new art.

Arduino Synthesizer

I’ve been interested in experimenting with electronic music for a while now and also recently started doing some work with the Arduino. So I thought, ‘why not try both?’ I began with a great article I found on Make Magazine (one of my absolute favorite sites) to create the basic script to generate an audio signal with an Arduino. A Digital to Analog Converter (DAC) converts the binary outputs from the Arduino into a relatively fluid scale of voltages which make up the sound wave

On the electronics side, my setup is quite similar to my reference, with the addition of a small amplifier using an LM386 op amp chip and a couple resistors and capacitors for some basic filtering. On the code side I’ve created a much more substantial instrument. Using Processing I built an interface to create a 32 sample waveform and a melody. The data is sent live to the Arduino which places the data into it’s waveform array and then using a timer writes each value sequentially to the DAC to create the sound.

The interface contains two sets of sliders. One represents the shape of the sound wave. Changing the shape alters the timbre of the sound. The second set controls a series of pitches. The currently playing note is lit and a light bar indicates the current position of the playhead. The waveform sliders can be adjusted individually or as a group by clicking and dragging across the set. The sequence bars control both the pitch and the frequency of the notes.

Robot Fest

Last Saturday I was part of the Baltimore Robot Fest. The event took place at the National Electronics Museum in Baltimore. All sorts of cool nerds came to share their robots. Make Magazine held a workshop, a ring was set up for battle bots, the Baltimore SDIY Group played some incredible electronic music, and many other fantastic groups brought great projects. The Museum was a great location for the event. Modern robotics and DIY projects were mixed in with WWII radar systems, ancient tube computers and even an Enigma cipher machine.

read on »