Controlling Quartz Composer with Pure Data
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.
To Blog
I’m planning to shift the direction of my site a little. Till now the focus of my blog has primarily been my artwork and little sketches I produce, and my portfolio has been a selection of the better works from my blog.
I’d like to expand the breadth of my blog and make it a bit more bloggy. I plan on including posts of other artists I discover that inspire me and perhaps some other interesting things I come across. I’d also like to expand into some other interests of mine, including food and music. Through this I hope to share a larger range of my interests and perhaps share a little more about myself. Hopefully I can hold myself to this, so expect some thorough in the near future.
Further in the distance I plan to restructure my portfolio. Having it pull work from the blog makes it easy to update, but limits the functionality of it. Rather than a chronological list of my works, I hope to build something awesome which presents my work better.
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.
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.
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.
processing code
code formatterSample Processing Code
/* 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.
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.
proudly powered by wordpress v2.8 & jquery javascript library.
View all resources in the colophon.
website & all work creative commons by-nc anthony mattox (2007-09)
pragmatically validated xhtml 1.0 transitional & css thanks w3c