The canvas is 600x600 in dimension.
Left click to draw a red tree, right click to draw a blue tree.
Click on the toggle below canvas to change view from top to side. The second toggle is to switch between orthographic view and perspective view. The checkbox under two toggles is to choose between flat, smooth or 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.
Click on a visible tree to select it. You can only select one tree at a time. When you want to select another one, you need to do a click on the canvas blank, then click on another tree. After a selection, you have the following options:
1. Translation: the displacement between a left mouse down event and the left mouse up event indicates the amount of movement to be applied to the picked object. BONUS: The 2D translation is REALTIME, meaning that you can see the tree going with your mousemove. The movement in the z direction can be done clicking on the middle button of a mouse and drag it. You may see that after several drag operations, the tree suddenly disappears, cause it flies off the range of your view. You can drag your mouse at a low rate to see how it disappears part by part.
2. Scaling: scrolling up your scrolling wheel will increase the object, while scrolling down will decrease the object.
3. Rotation: A right mouse down with horizontal motion until a mouse up event indicates a rotation about the z-axis of the object. A right mouse down with a vertical motion until a mouse up event indicates a rotation about the x-axis of the object. BONUS: the rotation is also REALTIME.
All the transformations are cumulative.
I calculate all the coordinates for a whole tree and it's normals and store them in the ./point.js. There are 6 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 under smooth shading), nr (normals for a right one under smooth shading), nnl (normals for a left click under flat shading), nnr (normals for a right click under flat shading). The algorithm for the trees calculation is in ./algorithm.js. It has detailed documentation for you to check.
Homepage | | My canvas