I'm still a bit sad about Flash going away. Yes, I know lots of people hated it. But it was an amazing tool for creativity. One of the tiny fun projects I did was procedurally generating trees:
The basic idea is to create the tree structure through recursion. Start with a trunk and then spawn several branches. At the end of each branch spawn several more branches. Then draw a leaf cluster at the end of each of these branches, including the intermediate ones. A leaf cluster is just a few green circles.
It was a quick fun project, and Flash made things like that easy.
I decided to port that code to HTML5. One thing I never liked in Flash was the UI elements (e.g. mxml), but in HTML5 it's much easier to add a slider, so I added a slider. Maybe I should try p5.js for quick experiments.
I also tweaked the leaf drawing. In the original Flash version, I drew the leaves in the recursive pass, but that meant some branches were on top of leaves and and the leaves were drawn left to right. It didn't matter at the original size I drew the trees (screenshot) but once I had a slider, I could see the artifacts. I moved the leaf drawing to run after all the branches, and then drew them top to bottom, and was happier with the results.
I'm pretty happy with it, but I think if I revisit this, I'd like to add even more sliders to replace all the hard-coded parameters.
Try the procedurally tree generator here.
Labels: flash
Post a Comment