« Back to Processing

Reverse engineered metamorphosis – Part I

| 1 Comment | Published on October 13, 2008
The content that follows was originally published on the Don Havey website at http://donhavey.com/blog/tutorials/reverse-engineered-metamorphosis/

Reverse engineering vine-like growth and a meandering cameraSo Glenn Marshall’s metamorphosis video has been getting some rave reviews lately. The video consists of a 2d recursive vine-like growth, lots of butterflies, and some nice finishing effects. It is very pretty.

Unfortunately, Glenn’s been a little – hmm – reluctant to share his code. That’s a pity, because, well, Processing is open source, and it’s helpful to the development community when the results generated with Processing are fed back into the system, allowing beginners to grab some pre-built examples, and veterans to compare notes and techniques. In Glenn’s defense, this seems to be his livelihood, and I imagine he’s hesitant to go open source with us because he’d like to ensure that he gets his just rewards.

Well of course you know where I’m going with this. What better challenge than to reverse engineer such a lovely animation. Glenn is a self-proclaimed beginner in Processing (although you certainly wouldn’t guess it from the results). I am a (now) self-proclaimed non-beginner-non-veteran in Processing, so to add to the fun of reverse engineering this thing, I’m going to up the ante and say that the final result must:

  1. Run in real time. Let’s say a minimum of 15 fps on my good desktop. (Glenn notes that it took 4 hours to render the HD version.)
  2. Not look like Glenn’s creation. I don’t want to infringe on anyone, so no lookalikes, but the result must have the same basic elements: a meandering camera, a recursive vine-like growth sequence (not unlike my Lettertree tutorial), some layering, maybe a particle system or two, and some interesting background noise. No butterflies… I’m not a big fan.
  3. Be OOPed on top of my existing base classes.
  4. 6 hours total work time on this.

Today I’m posting my first dabble. The source code is structured similarly to the rest of my tutorials. I was able to quickly get the springy camera and “stalk” of the vine working, which by the way is not unlike Yellowtail, minus the user input and cool motion.

I’ll get into depth and code at a later date. For now, here are some bullet points:

  • The stalk is essentially just a springy Polyline, eternally chasing a random Point, which moves every time the stalk comes within a certain distance (see the variables at the top of the Vine class). The Polyline is limited to a configurable number of sub-Segments… thus the disappearance of its tail.
  • The trickiest bit to this first attempt was simply to make the stalk’s “tails” to look nice, and do that cute little growth thing. The variables relating to that are of the “th” variety in the Vine class.
  • Notice that there’s no recursion yet, but that will just be a matter of adding children to the Vine class.
  • The camera movement is super basic: a very-low-dampening spring with a very slow chase rate… giving it that “oh my god, I can’t believe I have to keep chasing this point, I’m so tired” feeling.
  • Remember that since most of my core classes rely on 3d coordinates, I’m limited to rendering in OpenGL or P3D… which means that the smoothing won’t be quite as slick as in the original.

Here’s the source code. And finally… the results!

Enjoy. Feedback welcome. Stay tuned for part two. Oh an I wasn’t lying the other day about a good Particle tutorial coming up… I’ve got it written up, but am working on a few examples to accompany it.