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

Tagged: tutorial

For Betascape, a weekend event of art and technology in Baltimore, I’m giving a workshop introduction to Processing. For the workshop I’m going through a series of demo scripts that take you through doing basic drawing in Processing through creating simple animations and using objects, arrays, and loops. All the scripts are extensively commented and might help you get started if you’re interested in learning Processing.

The scripts cover:

  • Basic Procedural Drawing
  • Using Variables
  • Creating Simple Animations
  • Using Conditionals
  • Creating Custom Functions
  • Animating with Gravity
  • Mouse Interactions
  • Repeating Code with Loops
  • Storing Sequential Data in Arrays
  • Working with Objects
  • Arrays of Objects

If you’re interested in getting started with Processing this may be a good place to start. Each script builds off the last and adds a new tool. Go through them slowly and create your own scripts using the new techniques from each. If you get stuck (it gets a little more complex with loops, arrays, and objects) there are tons of other great resources on the Processing Site and if you’re looking for some specific help, I’d be happy to point you in the right direction.

Post Page »

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 »

Dan Shiffman is an incredible programmer, artist, and teacher. He is one of the developers behind Processing and has also build a few useful libraries including the Most Pixels Ever library which allows a Processing application to run on multiple screens. His SMS library allows Processing to gather data from an Apple Macbook’s sudden motion sensor. This little gyroscope is normally used to stop the hard drive if the computer is dropped, but it could be re-purposed for just about anything.

I owe a lot to Dan as his tutorials and example scripts have been a huge help to me as I’ve been learning Processing. If you’re new to the language I highly recommend all the resources he has on his site. He also has a great book on learning processing and plenty of online examples to go with it.

Post Page »

Using the time functions Processing can be used to create clocks. I enjoy making clocks as a simple exercise in design, interactivity, and simple data visualization. It’s also a horrible pastime as I am always aware of exactly how much time I’ve wasted. This demonstration will walk through creating this applet, showing the implementation of the time functions, the pushMatrix() and popMatrix() functions, modulo function (%), and the basic construction of an array of custom objects.

Like many key programming languages Processing is an Object Oriented Programming Language, sometimes referred to as an OOP. The concept might be a little bit hard to grasp for some, however, it is an invaluable tool which cuts down on script lengths and allows for far more interesting an complex programs without a lot of repetitive code. An “Object” (also called a class) is simply a collection of variables and functions. New instances of objects can be created with different values for all the variables and functions of the object can be easily executed to modify the instance. Although objects often have a graphical component or representation within a program it is important to remember that they are only collections of data and functions which can be manipulated in any way for whatever need. Another advantage is that a program, like this example, can contain arrays of objects, allowing them to all be changed within a “for loop”. The result is an elegant code which is very easy to construct and easier to edit.

Read On »

Read On (Post Continues) »

3d Sound GridAlthough Processing does not have the ability to process audio on it’s own there are a few libraries which can be used to add such features. I’ve been experimenting with the ESS library but you can find others from the processing libraries page. Gathering Data from live or recorded sound can be a powerful tool for artists and designers in creating interactive applications, audio visualizers, music videos, or anything else that could involve an interaction with sound. Getting the data is fairly straight forward and the script returns an array of data updated each frame. This demonstration with display the data very simply, however, the numbers could be applied to any attribute in any system to produce different effects.

Here are the steps to creating a simple script to get the spectrum data from a microphone into a processing sketch. Using pre-recorded sound is similar. Once the data is in the sketch it can be manipulated and used to generate graphics or effect other aspects of a program including complex forms in 3d space using the OpenGL or P3D libraries. Read On »

Read On (Post Continues) »