https://simblob.blogspot.com/2022/06/procedural-tree-generator.html Procedural tree generator From Red Blob Games's Blog * Home * Blog * Links * Twitter * About * * [ ] [ ] Navigation Blog Archive * V 2022 ( 6 ) + V June 2022 ( 1 ) o Procedural tree generator + > May 2022 ( 1 ) + > April 2022 ( 2 ) + > March 2022 ( 1 ) + > February 2022 ( 1 ) * > 2021 ( 10 ) + > December 2021 ( 1 ) + > November 2021 ( 1 ) + > June 2021 ( 1 ) + > May 2021 ( 1 ) + > April 2021 ( 2 ) + > March 2021 ( 1 ) + > January 2021 ( 3 ) * > 2020 ( 9 ) + > December 2020 ( 1 ) + > August 2020 ( 2 ) + > July 2020 ( 1 ) + > May 2020 ( 1 ) + > April 2020 ( 1 ) + > March 2020 ( 1 ) + > February 2020 ( 1 ) + > January 2020 ( 1 ) * > 2019 ( 24 ) + > December 2019 ( 3 ) + > November 2019 ( 3 ) + > October 2019 ( 4 ) + > August 2019 ( 1 ) + > May 2019 ( 3 ) + > April 2019 ( 2 ) + > March 2019 ( 4 ) + > February 2019 ( 1 ) + > January 2019 ( 3 ) * > 2018 ( 37 ) + > December 2018 ( 5 ) + > November 2018 ( 7 ) + > October 2018 ( 3 ) + > September 2018 ( 7 ) + > August 2018 ( 3 ) + > June 2018 ( 1 ) + > May 2018 ( 1 ) + > April 2018 ( 3 ) + > March 2018 ( 3 ) + > February 2018 ( 1 ) + > January 2018 ( 3 ) * > 2017 ( 14 ) + > December 2017 ( 2 ) + > November 2017 ( 1 ) + > September 2017 ( 1 ) + > August 2017 ( 1 ) + > July 2017 ( 3 ) + > June 2017 ( 3 ) + > May 2017 ( 2 ) + > April 2017 ( 1 ) * > 2016 ( 8 ) + > December 2016 ( 1 ) + > November 2016 ( 1 ) + > October 2016 ( 2 ) + > July 2016 ( 1 ) + > June 2016 ( 1 ) + > February 2016 ( 1 ) + > January 2016 ( 1 ) * > 2015 ( 9 ) + > July 2015 ( 1 ) + > May 2015 ( 1 ) + > April 2015 ( 1 ) + > March 2015 ( 4 ) + > February 2015 ( 1 ) + > January 2015 ( 1 ) * > 2014 ( 12 ) + > December 2014 ( 1 ) + > September 2014 ( 1 ) + > July 2014 ( 4 ) + > May 2014 ( 3 ) + > March 2014 ( 2 ) + > February 2014 ( 1 ) * > 2013 ( 9 ) + > December 2013 ( 1 ) + > November 2013 ( 1 ) + > September 2013 ( 1 ) + > August 2013 ( 1 ) + > June 2013 ( 2 ) + > May 2013 ( 2 ) + > February 2013 ( 1 ) * > 2012 ( 8 ) + > July 2012 ( 2 ) + > June 2012 ( 1 ) + > May 2012 ( 1 ) + > April 2012 ( 1 ) + > February 2012 ( 1 ) + > January 2012 ( 2 ) * > 2011 ( 2 ) + > December 2011 ( 1 ) + > October 2011 ( 1 ) * > 2010 ( 8 ) + > September 2010 ( 3 ) + > August 2010 ( 1 ) + > June 2010 ( 1 ) + > April 2010 ( 1 ) + > February 2010 ( 1 ) + > January 2010 ( 1 ) * > 2009 ( 15 ) + > November 2009 ( 1 ) + > August 2009 ( 1 ) + > July 2009 ( 1 ) + > June 2009 ( 3 ) + > May 2009 ( 3 ) + > April 2009 ( 1 ) + > March 2009 ( 2 ) + > January 2009 ( 3 ) * > 2008 ( 8 ) + > December 2008 ( 1 ) + > November 2008 ( 2 ) + > August 2008 ( 1 ) + > June 2008 ( 2 ) + > February 2008 ( 2 ) * > 2007 ( 8 ) + > November 2007 ( 1 ) + > July 2007 ( 1 ) + > June 2007 ( 2 ) + > April 2007 ( 1 ) + > March 2007 ( 1 ) + > February 2007 ( 1 ) + > January 2007 ( 1 ) * > 2006 ( 26 ) + > December 2006 ( 5 ) + > November 2006 ( 2 ) + > September 2006 ( 1 ) + > July 2006 ( 4 ) + > June 2006 ( 1 ) + > May 2006 ( 1 ) + > March 2006 ( 3 ) + > February 2006 ( 8 ) + > January 2006 ( 1 ) * > 2005 ( 9 ) + > December 2005 ( 2 ) + > August 2005 ( 1 ) + > July 2005 ( 4 ) + > June 2005 ( 1 ) + > May 2005 ( 1 ) * > 2004 ( 9 ) + > December 2004 ( 1 ) + > November 2004 ( 1 ) + > October 2004 ( 4 ) + > August 2004 ( 1 ) + > July 2004 ( 1 ) + > April 2004 ( 1 ) * > 2003 ( 12 ) + > December 2003 ( 2 ) + > November 2003 ( 2 ) + > September 2003 ( 1 ) + > August 2003 ( 1 ) + > July 2003 ( 1 ) + > May 2003 ( 1 ) + > April 2003 ( 1 ) + > February 2003 ( 3 ) Thursday, June 09, 2022 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: Set of procedurally generated trees Procedurally generated 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. Larger drawing of trees Trees with leaf pattern 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. - Amit - Thursday, June 09, 2022 0 comments: Post a Comment Older Post Home Subscribe to: Post Comments ( Atom ) Copyright (c) 2022 Red Blob Games