Picket-Fence Animation in Java


Picket-fence animation occurs when you move a black-striped transparency across a picture composed of interleaved images. The somewhat long-winded task of preparing the overlay and interleaved picture is automated by PicketFence.jar.

The picket-fence technique dates back to the 1890s, and is known by a few different names. Its Wikipedia page is entitled Barrier-grid animation, and various artists have coined alternatives such as kinegrams, scanimation, and animotion. More historical details can be found at the Optical Illusions site.

The basic technique is conveyed by the diagram below.

[Picket-Fence animation PIC]

The initial set of black and white images should all be the same size, and will be treated as frames in a looping animation. Actually, there's no strict need for the images to be monochrome, but the simpler the picture form, the better the final effect in my experience.

Each frame is divided into multiple slices, which I've numbered and colored in the figure above to aid this explanation. Thinner slices lead to better animations, but also require a lot more time spent on cutting out the pieces.

The next stage interleaves the strips to form blocks. Each block contains a strip from each frame, organized in frame order. This is rather tedious when done manually, and it can be tricky to glue or tape the pieces together so they remain straight with no overlaps.

The striped transparency is a series of black blocks with the same slice missing from each one; in the figure above, I removed the left-most slice. Also, the animation seems better if an extra block is added to the left.

I was introduced to picket-fence animation while preparing Art+Math activities for high-school students. JON-A-TRON and Ashley Jane Lewis have written two very nice maker pages on the topic.

As my description of the technique hints, I'm less than impressed with picket-fencing animation as a student activity. A lot of time has to be spent on boring cutting and gluing of strips. Also, a decent animation requires very thin strips, which makes the job harder, and it's easy to mix strips up at the interleaving stage.

My answer is PicketFence.jar, a Java program that loads a series of a frame images and does the interleaving and overlay generation for you, storing the results in interleaved.png and fence.png. This frees the student to concentrate on the interesting art task of producing good frames, and the math can be explained using PicketFence.jar's output files, along with the diagram above.


Testing Your Animation

Before going through the hassle of printing interleaved.png and fence.png (see the next section), it's useful to first test the quality of the animation on a computer. This is easy if you have MS PowerPoint or LibreOffice Impress installed. Import both image onto a blank slide, then try moving the fence left and right over the interleaved picture. The effect is shown in the video snippet below.

It's best if you use keyboard shortcuts to move the fence since this executes smaller, regular steps than manual dragging. If you're using PowerPoint, then the left and right arrow keys have to be combined with the CTRL key.

One advantage of viewing the output like this is that it's clear if the images can benefit from cropping their left and right sides. This is often necessary if the original frames have a lot of blank space at their edges.


A Nasty Practical Catch

Some care must be taken when printing fence.png onto a transparency. The obvious thing is to photocopy the image onto a sheet of acetate. However, the transparency must be suitable for use in this way. In particular, a photocopier can generate a lot of heat, and it's possible for the acetate to burn or melt!

Another approach is to feed an acetate sheet into the paper tray of your printer. The burning/melting danger is perhaps even more likely in this case since the sheet is traveling through the delicate (and hot) internals of the device. In addition, if you're using an ink-jet printer, then there's a good chance that the toner will barely adhere to the slide, and promptly start dropping off when it comes into contact with your hands, paper, or just about anything else. A laser printer is a must.




Dr. Andrew Davison
E-mail: ad@fivedots..psu.ac.th
Back to my home page