Archive for the transparency tag
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.

The article has
2 responses