Introduction: Light Animation in Processing

This instructable is about using long exposure photography and the programming language Processing to create artistic photographs.

Often long exposure images utilize a point source light such as an led or sparkler. By using a computer screen and Processing, we found it easier and faster to create three dimensional images with lines and colors rather than a single or multiple point source lights.

We took things a step further and used a Kuka robot arm to control the position of the screen and the images on it, but it is possible to do this just by moving a computer monitor by hand or on a simple track system in front of the camera. Advanced knowledge of programming or photography isn't necessary- most of the images we did were very basic Processing sketches, and long exposure images are easy to do by adjusting a few camera settings.

Special thanks to the University of Virginia School of Architecture for use of their facilities in making this instructable.

We hope you find this instructable informative!

Step 1: Materials

You'll need:

Monitor- The deeper the black level that can be displayed, the better. We had a little trouble with the edges of the screen ghosting across the images, but much of that can be fixed in an image editor like Photoshop. Heavier monitors are also more difficult to work with. A higher resolution can be nice, but isn't critical, as small details will often blur out anyway.

Camera- you'll need to be able to shoot in bulb mode, which allows you to control the exposure length of the camera. It's also helpful to use a remote if your camera has one.

Tripod- It's best to use a tripod when taking long exposure photos. Since the exposure is open much longer than normal, the photos can come out blurry or out of focus if the camera is held in hand. If you don't have a tripod, setting the camera down on a table works just as well.

Computer with Processing Installed- The Processing environment is a free download from, and can be run on just about any computer (even down to Raspberry Pi's). The basic drawing commands can usually be learned easily without prior programming experience.

Step 2: Writing a Processing Sketch

Processing is a coding language based on Java that makes it easy to create graphics in a programming environment. It's pretty easy to pick up the basics, and the programming knowledge necessary to complete this Instructable is fairly basic. There are many tutorials online for learning Processing; is a great place to start.

Here are a few examples of scripts we wrote for long exposure photography.

Hexagons- Creates a white outline of a hexagon that turns on and off with a mouse click.

Wiggle- a "squiggling" polygon that changes shape randomly.

Robo_Colors- The entire screen fades from one color to another. If you click the mouse, the color changes to either red, green, or blue, and then begins cycling color again.

When writing our Processing sketches, to find code patterns that could be reused for various photographs. For example, the Hexagons sketch could be used to "extrude" a single hexagon through the air by leaving the shape on the screen for the length of the exposure, or it could be used to show many hexagons in space by turning the shape on and off a few times. Adding rotation could make a spiraling shape. Just by using a very simple Processing sketch, it's quite easy to make an interesting long exposure image.

Step 3: Recreating 3D Models

Source images created entirely in processing often take the form of a continuous extrusion. You can also recreate a more exact objects using SVG slices exported from a 3d modelling program (we used Rhino). While you could manually slice and export your vectors, we automated this process somewhat using the Grasshopper plugin. We used the attached Grasshopper file to generate slices that were then called through the attached Processing sketch.

Accuracy/legibility may be affected by doing this by hand. Creating a system to reliably move the screen in space will improve the smoothness of your result. This can range from simply a series of marked positions on a table, to a sliding track for the screen or camera, or more advanced automation options as will be shown later on.

Step 4: Camera Setup

You'll want to do these photos in near-total darkness, and remove all other light sources from the room. You may need to cover up the power led on your monitor with tape or just your finger to keep it out of the shot. Here's a few tips on basic camera settings to take long exposure images.

Camera Settings

Bulb Mode- as stated in the materials step, you'll need to be able to manually adjust the length of the exposure.

ISO- use a lower ISO. Usually 100 is a default option, and works well. We also took advantage of exposure compensation on our camera, which further helps the contrast of the image.

Set lens to Manual Focus- auto focus can have trouble focusing on the screen in the dark.

Step 5: Post Processing Images

After taking a few long exposures, you may notice some ghosting of the edges of the screen in the image. This can easily be removed by adjusting the contrast or curves settings in an image editing software. We used Photoshop, but there are other free alternatives such as Gimp.

You can also post process a bunch of images together to create an animation. To create the animation above, we took a series of long exposure photos and used the Movie Maker tool in Processing. To compile a series of images together to make a movie, go to the Tools Menu in Processing and select Movie Maker. You'll want to be sure the images are numbered in the order you want them to appear in. (Image1.jpg, Image2.jpg, etc.)

Step 6: Doing This With a Robot

While developing this project, we chose to use a Kuka Agilus robot arm as our positioning system, to achieve clearer images and allow for more complicated two directional slicing. In this setup, the program controlling the movements of the robot also sent a network signal using EthernetKRL to a Processing sketch to change what was on the screen, which was mounted using its VESA mounts. The video above shows that process.

Additional concerns when using this sort of system include:

  • Monitor weight: as smaller manipulator arms often have low weight ratings.
  • Collisions: the size and shape of a monitor may make it easier to collide with the arm itself while its moving between positions; always test at lows speeds and under full lighting first.

The mount connecting the screen to the robot also housed a Raspberry Pi that displayed the ran the Processing sketches and handled the network connection between the robot and Processing. For more information on that setup, check out the "Digital Art Installations with Processing and Raspberry PI" instructable in our profile.


About This Instructable




More by Ben and Matt:Light Animation in ProcessingDigital Art Installations With Processing and Raspberry PI
Add instructable to: