The canvas is 600x600 in dimension.
Left click to draw a red tree with the recursion level 4 at the mouse click position. Right click to draw a blue tree with the recursion level 6 at the mouse click position. A red tree's trunk is 50 in length, blue the 40. Each branch' length is 1/2 of its father's.
Click on the toggle below canvas to change view from top to side. Click back and change the view back. The second toggle is to switch between orthographic view and perspective view. The third toggle is to switch between flat shading and wireframe.
Click on the first button to save your current work to file. Click on the second button to load a scene from file. Then click "submit" to see your previous work. The awesome part is that you can save multiple scenes and load them later at your will!
I calculate all the coordinates for a whole tree and it's normals and store them in the ./points.js, so that the web page can be immediately loaded without delay caused by calculation. There are 4 arrays in the ./points.js, namely cylinderl (the tree created by a left click), cylinderr (by a right click), nl (normals for a left click tree), nr (normals for a right one). You may want to open the console and see their values.
The algorithm for the calculation is in ./algorithm.js, basically transforming one cylinder to where it should be and save the coordinates in arrays. The file ./algorithm.js has detailed documentation for you to check.
Homepage | | My canvas