Anthony Mattox Interaction Design + Digital Art

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.

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.