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 tree, or you may want to translate the sphere, you need to do a click on the canvas blank, then click on another tree or the sphere. After a selection, you can translate/rotate/scale the tree if you follow the operation instructions of prog3. You can find these instructions on the course website, or my prog3's guide page:)
There is a second light source, a yellow sphere. It is by default TURNED ON. Click on the sphere to TURN IT OFF. If there is no trees currently being selected, you can use the left buttton and drag your mouse on the canvas to translate the sphere around.
Zooming: scroll the wheel up to zoom out. Scroll down to zoom in.
Panning: with no trees selected, click on the blank and drag to change your view.
Moving in-n-out: with no trees selected, click on the background with the middle mouse and scrolls the wheel, and it will move the camera in or out along the z-coordinate of the viewing coordinate frame.
Yaw: double click on one tree and enter into a new view. You now are placed at the clicked tree's positions, and you can view the surroundings in 360 degrees. You may as well check this effect from a prespective view. Click on the background to change back to normal view.
Examine: click on a tree and press 'e' on your keyboard. You are now rotated by this tree, and you can check it from 360 degrees. Press 'e' again to change back to normal view.
Modify background: press shift and left drag your mouse on the canvas will turn the trace of your mouse to hills. press ctrl and left drag will turn the trace to basins.
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