« Back to Processing

Reverse engineered metamorphosis – Part II

| 2 Comments | Published on October 15, 2008
The content that follows was originally published on the Don Havey website at http://donhavey.com/blog/tutorials/reverse-engineered-metamorphosis-part-ii/

This post is a follow up to Reverse engineered metamorphosis – Part I.

I managed to spend a little time getting the background effects in line yesterday while on the train. I’m up to just over 3 hours work time on this, so I think I’m on track to wrap it up in under 6. It’s been a good exercise because it’s forced me to focus on creating something specific – not just another component.

Once again, I’m not going to talk much about the progress made. The background images have their own class: the aptly named Graphic class. All they do is fade in and out and render themselves. The constructor function is passed a “frames to live” value, which determines how long to wait before fading it out.

Here are some more bullets:

  • Before positioning and rendering each Graphic, we make sure to check that they are still visible… otherwise we’d be spending lots of resources on images that can’t be seen. Transparency is handled with the tint() built-in.
  • Once every few frames, the graphics are placed behind the vine using the vine’s current xy-coordinates. So the graphics always appear to be exploding into existence just behind the vine.
  • The images themselves were mashed together quickly from Photoshop’s “nature” pattern fills, given a layer mask each, then saved as transparent pngs. Which image is loaded is determined by a simple “if(random(chance)<1)". You'll notice that I'm favoring the green image.

That’s about it for now. The applet is still running at an easy 30 fps on my 3-year-old laptop, so that’s good. Here’s the source code. View the results in Processing. I don’t feel like uploading them today, plus, the image loading really drags in P3D and OpenGL still hates being run within an inline applet. If you’re desperate to see this in action, take a look at the live example from the previous post.

See ya.

Categories: Processing / Tutorials

Tags: / / / / / / / /


subpixel says:

Hi Don,

I’m rather interested in this project, having seen Metamorphosis and wondering myself how it might have been done…

I had a bit of a look into the code from the previous (“stalk”) version of this, and was okay up to the rendering of the polyline part… some descriptions for the strange variables might help.

Meanwhile, when running the “vines2″ version, the PDE kept spitting the dummy on the allocation of the global variables. Is 100 million Points really necessary? :o)

Don says:

Haha sorry about that. I know my code is a little opaque.

I initialize those huge arrays in my global class just to understand the scale of the applet sometimes, to compare how one variation relates to another in terms of memory use by keeping a tally on the number of created points, etc…. but usually I just comment those lines out. The applet generally won’t export or run on a computer with less than a ton of memory if you leave them uncommented. I’ve uploaded the revised code… should work fine now.

As soon as I have time to get back to this project and wrap it up, I’ll try and get a version together with some coherent notes inside to explain those variables.

Leave a Response

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>