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.
Do a shift+click on a tree to select it and change its color to green. The glosiness is also changed.
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).
When do the picking part, I firstly re-draw all the trees with different colors. This is done by changing the rgba.r's value. Then, I read the pixel's rgba and compares the r value with all the trees' r values. If there is one tree that satisfies the match, store the tree's left/right and xy coordinates.
The algorithm for the trees calculation is in ./algorithm.js. It has detailed documentation for you to check.
Homepage | | My canvas