Day 270 / Circular Picket Fence Animation

Crazy busy at work this Wednesday.  It seemed like every project in the office decided to suddenly deliver today.  I got out of the office at almost 8pm.  When I got home I found that Jenny had picked up a little cold and wasn’t feeling so hot.

 

I wasn’t so sure about what creative thing I was planning to do.  I had been mulling some ideas on the drive home but none of them were sticking.  It wasn’t until Jenny was off to bed when this idea hit me.

 

June has these books called “Scanimation”.  When you open the front cover you see the sillouhette of a horse begin to run.  I had looked up the technology behind the effect a while back and I had always contemplated doing something like this for the blog.  The actual technology is quite old, it’s called a Picket-Fence illusion.  The way it works is a grid of equally spaced bars is printed onto acetate.  Then, six frames of animation is combined onto a single piece of paper, except each frame is cropped out in a way so that when you place the grid over it you only see one frame at any given time.  This little video explains how to do it.

 

Last night, when I was tucking Jenny into bed the idea popped into my brain, what if I tried doing a circular version of it?  Would it work the same?  It should, but there was still a question in my mind of whether it would work as well.  What I learned was that because a circle is made up of many elongated triangle-shaped slits that ultimately the animation is harder to see towards the center, where the triangle shape tapers.  If you were to place the animation away from the center it would be much easier to see.

 

First I created the circular grid shape in after effects.  I created the first triangle at the top of the circle then duplicated it and added 7 degrees of rotation, which left 1 degree of space between the two triangles.  I repeated this until I went all the way around.  I imported the grid into photoshop and then began importing the frames of animation.

 

The process here was rather simple.  I just placed the frames of animation in the position I liked best behind the grid layer and then Command-Selected the grid layer to create a mask of that shape.   Then I selected the first frame of animation and pressed delete.  This deleted the parts of the frame that were not being seen through the slits.  First frame down, I rotated the grid layer 1 degree and repeated the steps again with the rest of the frames.

 

The results actually look kind of cool just by themselves without the grid layer at all.  You can see all of them posted above.  When you place the grid layer over and slowly rotate it you can see the animation begin.  I wanted to print everything out on paper and do a video of me physically creating the animation but time was running out.  So, instead I decided to import it all into after effects and do a virtual version.

 

In the video below you will see each of the examples posted above in the same order.  Some are harder to see than others.  The examples are, a short clip from my dry-erase animation days,  then a clip of my friend Caryn play-slapping her husband/my pal Dietrich, then a clip of a tape dispenser from my Office Instruments at Work video, then a clip of my Harmonograph table in action and finally a clip from Road House of Patrick Swayze kicking a bad guy in the nuts.  That last one is from my Swayze Beat day.

 

I think it would be cool to create little animations which could be put on the face of a wooden top.  That way when you spin the top the animation is seen from above.

 
I hope you enjoy!

Comments

3 responses to “Day 270 / Circular Picket Fence Animation”

  1. J. Ott Avatar

    The Road House clip works best for me.

    This reminded me of kottke’s link to a collection of animated GIFs:
    http://kottke.org/10/11/the-art-of-the-animated-gif

  2. Watson Avatar

    I love these. May want to use this for a video in the future….

  3. The B-Roll Avatar
    The B-Roll

    @Watson – Sounds good!

    @John – Thanks for the link man. Inspired a future post already.