My Blog: projects, sketches, works in progress, thoughts, and inspiration.

Tagged: processing

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 »

Post Page »

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.

arduino_synthesizer_dac

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.

arduino_synthesizer_interface

Read On »

Read On (Post Continues) »

processing audio waveform & spectrum 1

processing audio waveform & spectrum 2

This is a quick little audio visualizer I put together with Processing and the ESS Sound Library. The audio spectrum is analyzed with an FFT and spectrum bands are plotted as vertical bars. The Waveform is drawn over the bars in white, adding a lot of interest to the image. To create the fading effect of the object a transparent, white rectangle is drawn over the whole sketch instead of using a background. Previous frames are left on the screen and are slowly covered up by white.

To create an interesting color scheme each bar is colored based on its own height and its neighbors. Combined with the overlapping shapes a broad range of tones and hues is created.

processing audio waveform & spectrum 3

Read On »

Read On (Post Continues) »

I’ve gotten a few questions recently about how to render Processing scripts for printing. There are a few obstacles, but there are two simple methods which work pretty well. Between the two I’ve been able to get high resolution renderings of different types of scripts without having to do anything terribly complicated. The image will be exported as either a vector (shapes) or a raster (pixels) image. Depending on the sketch one method might be much more useful.

Exporting a Scalable Vector Images

The best way to get a high resolution image from Processing is to export the sketch as a vector image. With respect to graphics and images a Vector is just a fancy word for a shape. Unlike a Raster image which records visual information in an array of pixels, vector images are composed of shapes. For some applications this can much more useful. Typefaces, many logos, and other graphics composed of flat shapes are created with vectors. The shapes in a vector image can the be colored, outlined, and styled in many other ways. Vector images can be much smaller than a rasterized version, and most importantly, they are scalable. Since the image is made of shapes it can be stretched as large as you need it and will lose no quality.

Shapes drawn with processing commands are vector shapes, and Processing includes a library to export this data as a PDF document, which can then be opened and used by any vector editing program.

To capture the vector data import the pdf library, call beginRecord(), draw your shapes, and then endRecord(). A simple code to capture a frame on a mouse press could look like this.

import processing.pdf.*;

boolean capture=false;

void setup() {
}

void draw() {
  background(255);
  if (capture==true){
    beginRecord(PDF,"vector_file.pdf");
    render();
    endRecord();
    capture=false;
  }
}

void mousePressed() {
  capture=true;
}

The script above would have all the drawing functions within the render() function. To be less obtrusive the beginRecord() and endRecord() functions can be within separate conditionals. The code between them will be run all the time and the data will be recorded only when the mouse is pressed. The new draw() function would look like this:

void draw() {
  background(255);
  if (capture==true){
    beginRecord(PDF,"vector_file.pdf");
  }

  //
  // drawing code
  //

  if (capture==true) {
    endRecord();
    capture=false;
  }
}

Notes about exporting PDFs.

  • The exported PDF will be in the sketches folder and titled with the second parameter of beginRecord().
  • You can open the PDF with a vector program like Adobe Illustrator and edit the shapes.
  • Any shapes drawn, even if they are outside the rendering window will be in the PDF. Remove the Clipping mask to reveal all the shapes.
  • For fills and strokes to work they must be called after beginRecord().
  • The size of the vector file is dependent on the number of vertices in your image.
  • For cumulative rendering place beginRecord() in the setup and endRecord() with a key or mouse press before closing the sketch.

Exporting Large Raster Images

Using a raster image can be a better option if you have a program with a lot of complex shapes. Saving pixel images is also easier, faster, and less processor intensive, but you lose the scalability. To save an image use the saveFrame() function.

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

The #### will be replaced with the frame number. TIFF, TARGA, PNG, and JPEG files can be saved (default is TIFF), and again the image will be in the sketch’s folder. To create very large renderings you can simply increase the window size and scale up the sketches parameters as necessary. I’ve rendered sketches much larger than my screen-size with good results, but can’t promise it will work on all platforms. On a mac you can enter exposee and an extra large window will shrink to fill the screen, although you can’t interact with it.

Post Page »

After playing with binary cellular automata I thought I’d expand the script a little to accommodate more than two states of a pixel. Three loops are nested and each is iterated once for each state. If the index of each loop equals the three values above the current point the function returns the current state of a counter which is incremented in the innermost loop. In a binary system this is a little more complex than just testing each of the eight possible combinations, but is almost necessary when dealing with more states. I’ll post my code at the bottom of this post. But first, some pretty pictures.

processing cellular automata 4

processing cellular automata 3

processing cellular automata 2

Read On »

Read On (Post Continues) »

cellular automata evolutions

This afternoon I played around with 1d cellular automata. The program is creates an array of cells which corresponds to a row of pixels on the screen. Each new generation of the structure is represented by the next row of pixels and the value (black or white) of each pixel is based on the three directly above it. There are eight possibilities for the pattern of the three parent pixels and an array of eight values stores the results to each of these possibilities. Changing the rule-set and the values of the first generation creates vastly different images. The script I was using was very much based off of Dan Shiffman’s code.

cellular_automata-6333

Read On »

Read On (Post Continues) »

In my last post I explained how to control the brightness of multiple light emitting diodes connected to an Arduino with an interface scripted in Processing. The script which I created was great because it just took a series of values sent via USB and lit the LED’s appropriately. This is convenient because it is not specific to any input which might be needed to control the lights. The script to send a value serially along with an indicator character can be added to any Processing script. Naturally one of the first things I had to do with it was create an audio visualizer. With the Arduino programmed as it was all I had to do was use a sound library to break an audio input into frequency bands and send the values down.

arduino led audio visualizer

The circuit is pretty straight forward. Six LED’s are connected through resistors to the six pins which support PWM (3, 6, 5, 9, 10, 11) and to a ground pin. I have everything crammed onto a tiny breadboard on my proto-sheild cause it’s cute and self contained. That’s just my style. PWM stands for Pulse Width Modulation and is the a way to control the brightness of LED’s as well as some other components. It is a digital output and produces the effect by switching on and off very quickly. The result can be visualized as a square wave. When you send a higher value to a PWM pin it will spend more time on than off. This blinking is faster than we can see so the LED appears to be changing brightness according to the amount of time it spends in the on position.

pulse width modulation graph

Read On »

Read On (Post Continues) »

As I started working with my shiny new Arduino board I quickly learned how to build basic circuits and program the micro controller to respond to various stimuli, but what really interested me in the technology was the ability to send information between the board and a computer. I’ve done a fair amount of programming in Processing and was excited to bring some of my work off screen. There is a nice script on the Arduino site on sending data from the board to a computer to control elements within a processing sketch. Unfortunately, the reverse is not as well documented.

I needed a script to send multiple variables from Processing to an Arduino to control a few components. After a bit of research, and more trial and error, I put together a script which controls the brightness of three LED’s through a virtual interface on a monitor. Here are my scripts and the circuit I came up with. It seems simple enough to me but if anyone has suggestions I’d love to hear them.

physical LED pixel on arduio board controlled with processing

Here three color LED’s are connected to pins 9, 10, and 11 which can use Pulse Width Modulation (PWM) to control the brightness of each LED. They are connected to their respective pins through appropriate resistors and also connected to a grounded row in the bread board. In the image I am using the prototyping shield from Adafruit which makes it easy to build small circuits.

Read On »

Read On (Post Continues) »

Ligetisplit Ensemble Poster by Anthony Mattox

I created this set of posters for a performance by the Ligetisplit Ensemble. The images are created with Processing. I had to finagle things a little to get high resolution rendering of my processing sketch. I set the screen dimensions to the pixel dimensions I needed, scaled up my inputs to interact with the whole screen, and had to enter expose or save the image to see what it looked like. It actually worked better than I expected.

Post Page »