Flash 8: Japanese Cherry Blossom Trees

This piece was inspired by cherry trees blossoming in Japan, as well as Japanese ink paintings. I wanted to create a system that grew generative trees where not only were the branches random but also every single blossom. This piece borrows concepts (and code) from my vine-g experiment [source] , as well as my more recent flowerGarden piece. Each tree is drawn randomly following a set of loose rules, and each blossom is also assembled randomly. Establishing rules that resulted in attractive but varied tree structures was definitely the challenge for this piece, and was quite a bit more difficult than I had anticipated. It still draws the occasional mutated tree, but then so does nature.


Flash 8 player required. Note that I had to squish this piece to fit it in the blog. If you want to see the full size version, or just want to reload it a few times to generate new trees, you can view it here.

This experiment would not have been possible in Flash 7. It has far too much visual complexity to run well as vectors. As such, I’m utilizing my usual custom bitmap caching routine. Each frame the branches draw onto a canvas clip, and are then blitted onto a bitmap (one per tree to enable independent blurring) and immediately cleared. Likewise, the blossoms assemble themselves as vectors, then the completed flower is blitted onto the bitmap and the original vector is removed. Once a tree is complete, it’s bitmap has a blur filter with progressively higher settings applied to it to create depth of field. This progressive blurring is what causes the slight choppiness. I’m hoping to find a way to minimize that, and perhaps create a version that looks more like sumi-e style ink painting in the future. Of note, there are no bitmaps in this piece, the background is made with a set of layered alpha gradients, with a traced image of a temple – thanks to cacheAsBitmap, I can draw over it with no performance hit.

Aesthetically, this is one of my favourite Flash 8 pieces I have created so far. I’m really looking forwards to seeing what more artistic peeps do with Flash 8 when it ships.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

24 Comments

  1. beautiful!! i like the thing that it grows but when you zoom in, you see static pixels 🙂

  2. EDIT: zoom in first and then see flowers grow and turn into bitmap 🙂 (though performance decreases as you zoom in)

  3. Two words: active desktop

  4. excellent! always inspiring! i really wish i could make more time to dig into the beta. so far all i have played with are the upload capabilities and some of the BitmapData class. Trying to upload and then manipulate images in flash then rebuild them on a server using PHP GD Lib. 🙂

  5. Will you be releasing your “usual custom bitmap caching routine” when Flash 8 finally ships? These sorts of experiments are brilliant and very much along the lines of what I was looking at Processing for, but I’d much rather use flash any day.

  6. Debbie McDonald August 19, 2005 at 12:12pm

    Beautiful! And smart too!

  7. That is just awesome! Very inspiring for a novice like myself.

  8. has anyone tried to print (gasp!) out flash art as you might a Processing app? Obviously flash is created specifically for web use and resolution is an issue, but you now can do many of the things you can do w/ Processing. Plus, it gives you a pretty large maximum stage area.

  9. Any chance of getting a peek at the source code?

  10. Very nice. Director has had bitmap manipulation through code for a while now. Check out,

    http://www.play-create.com/pieces/flowers2d.html

    http://www.play-create.com/pieces/flowers.html

    Lewis

  11. While it can get slow, this type of drawing was not impossible with vectors in earlier flash versions…

    http://www.dnahelices.com/new/sample16.swf

    Don’t get me wrong, the new bitmap stuff makes this obsolete, but where there’s a will, there’s a way…

    Cool Stuff!

  12. This is amazing! I was looking up info for flash because I want to learn it and I came across this! what an inspiration~

  13. Wow! I really like the cherry blossom that moves/grows instantly on the picture. Although I may show this website to my teacher because it’s really creative and plus it’s about Cherry Blossoms. Yes. I am doing a project about cherry blossoms. Interesting ey? Anyhow, later doods!!

  14. Really cool!

  15. how big do the cherry blossom tree grow?

  16. I’d like to use one tree for a landscaping website. I’m willing to pay for source (or rights to import). Let me know if thats possible.

    Chuck

  17. Stunning! I’d also like to use not one, but the entire flash for a website if that’s possible. Could you let me know?

  18. This would sell well as a screen saver… just saying.

    I know I would like it if I could have it as one, but for multiple widescreen monitors.

  19. Beautiful

    im lookin for a tattoo design and

    so far this is the best one i’v found

    for wat i want.

    Ex Oh Ex Beca.

  20. absolutely beautiful. exactly what i was looking for. currently creating an Asian-inspired website that definitely needs this.

    willing to pay for this to import into website that is currently under construction. please let me know as soon as possible if we can make this happen.

  21. Hello designers I am looking for a designer to create a vineyard scene. Please email me, and I will give you the parameters for the design needed. Contact email: napawineguy@hotmail.com

    Thn’x

  22. I was wondering if you could develop this as a screensaver for macs….would be willing to pay.

Comments are closed.