Skip to content
processing puppets - advent animals ala ed emberley
Processing JavaScript Other
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

animal advent

processing puppets; an animal advent ala ed emberley!

Background: see the main website.

Every puppet is made in Processing, a great little tool and language for artists and students.

In the puppets/ folder, each puppet has its own folder and .pde file. They all share the puppet.pde which contains a base class and some helper classes.

This was my summer and fall "commuter" project, and I was kind of making it up as I went along, so some of the code is a bit wonky -- It wasn't always easy to teach a computer to draw like a kid!

(If you are looking for a simpler example, the bird/ folder has bird.pde that might be a little easier to get a feel for things. )

For the puppets themselves... the tricky part is going smoothly back and forth between the constructed and deconstructed version. I have a lot code that looks something like drawCircle(figX(place,BASE*.2),figY(place,BASE*.3),avgd(20,BASE*.4));

"place" is an integer reflecting which location the symbol lives at when the puppet is broken up into pieces. BASE is (more or less) a constant reflecting the size/scale of the creature. (Every puppet part is placed based on a multiple of BASE when the puppet is in constructed form.) So "figX" calculates the x position, at its "place" if the puppet is deconstructed, at its final location if the puppet is put together, or somewhere in between during the transition times.

Similarly, "avgd" is the first value when deconstructed, the second value when fully constructed, or a weighted average during transition times. (Similarly, "zerod" is a convenience function that takes the avgd() with zero.)

The "Keeper" has some of these functions, as well as stuff like k.scaleX, k.scaleY, and k.scaleBut (the bars shown at the top of each button). These represent the mouse or touch input.

The web/ folder is what I put at main website. The page makes a use of an animated GIF (for the bird at top), CSS transitions (for the hover and 'today' flash), localStorage for remembering what has been seen, and jQuery for some of the transitions.

You can’t perform that action at this time.