The art-work Love Death and Zen employs visual art in the form of code-generated gradients and perlin-noise-based backgrounds; and a “main character” in the form of an entirely code-generated, vector-based “yellow submarine”, randomly generated non-linear poetry “animated” by code; along with a digitally distorted soundtrack.  Apart from the soundtrack, which is a digitally distorted recording of Pink Floyd’s “Great Gig in the Sky”, Love Death and Zen is entirely generated at run-time in the browser.

Go to the Art Work!


I started out with five main processes firing simultaneously to create the animated art-work.

  1. A background bitmap to which I applied a perlin noise filter in every frame to create a sort of constantly moving backdrop that simulated “travel” pretty well, all by itself.
  2. A gradient covering the same area, in which almost every parameter of the gradient was changed every few seconds, while actually “shuffling” the gradient “colors” array forward in every frame to also create the illusion of constant movement and flux.
  3. I also attempted to randomly change the “alpha” (transparency) value of each color band in the gradient every frame as well.
  4. There is one Text Field in the animation that is constantly being fed a random line of text from a text array containing about two hundred records.
  5. And of course we have the yellow submarine that is generated entirely from code at start-up, and then animated across the screen.

However, I immediately ran into a bottle-neck with the the perlin noise generator.  Updating the bitmap by calling the perlin-noise routine during the animation caused CPU-usage to spike at around 90% and a noticeable pause or slow down especially while the “submarine” was visible.  In the end I just executed the perlin noise function only once at the beginning of the animation and left it that way the entire length of the movie.  I may be able to improve on the scheme with more tinkering.

The next huge CPU-usage bottle-neck was using the “transparency” abilities of the Gradient function.  Setting the “alpha” value of any colors in the gradient caused a dramatic slow-down, because of an additional 60% spike to the CPU.  After much experimentation, I found that I could create a similar gradient effect by using about 700 color bands in the gradient with the transparency deactivated – compare to the same gradient effect with only 4 colors with transparency activated.  Aesthetically, the semi-transparent gradients were more pleasing but just too expensive on my dual core 2.1 gigahertz laptop.

As it is, the animation choices I settled for are still taxing my laptop just within the limits that I deem as acceptable performance.


Well, the truth is I scaled down to a bare minimum many features that I had planned for this art-work, for technical reasons affecting performance. To run multiple processes updating a visual display in a web browser is very ambitious and so it is no surprise that I was immediately faced with compromises to make. I all but disabled the perlin-noise generator and I could not use transparency on the gradient color bands, which would have added so much more to the aesthetics of the work.

So here is an idea that might improve things. On start up, spend up to 30 seconds generating bitmap "slides" for the perlin background; and, then instead of generating new perlin patterns during the animation, just swap in the prefab slides.

This scheme won't work for the gradients because I truly animate the color band sequence frame by frame. But what if I generated the gradient pattern with Alpha Transparency on, and *didn't* animate the color band? Would the overall aesthetics be an improvement? Worth an experiment or two, I think...

Lastly, I would like to apply some nice gradients to my yellow submarine. Do it on start-up and there should be no performance cost during animation (as long a transparency is turned off). The only difficulty will be applying the gradient to the periscope which I draw as two separate primitives. I might handle this with some concept of "shading", perhaps...