Let's make an interactive tree designer


For the next workshop I’m working on an interactive tree designer. Currently it’s very limited. You can find it at https://software-garden.gitlab.io/tree-designer/ (source code at https://gitlab.com/software-garden/tree-designer). Quick instructions for current version:

  • There are only 4 colors.
  • Chose the color by pressing 1 - 4 key on the keyboard. The color of the axiom should change.
  • Click on one of the rule designers to add a child branch of selected color.
  • Press / key to play or pause the animation
  • Press . to go one frame forward, shift + . for one generation.
  • Press , to go one frame back, shift + , for one generation.

There is no way to change the childrens position yet or even remove them, so if you make a mistake you have to reload the page and start from scratch. I know it sucks, but I have very limited time to work on this. I hope some of you can help and we can make it really nice together.