Order Description

Objectives: Create a 3D model and render it in wireframe. Description: This quarter, we will be working though a series of assignments that will eventually allow us to reforest a virtual Amazon. For this assignment, we will start off with a basic 3D skeleton of trees. Trees will be defined using Lindenmayer or L-systems which will produce self-similar or fractal structures. Specifically, we will first look at extending the second example on Fractal (binary) tree from this link to 3D by having three (rather than two) branches at each level, and orienting those branches in 3D space instead of just a 2D plane. Following what you did in Lab 1, each time the user left clicks on the canvas, you will plant a red tree (instead of drawing a red circle) at that location; and each time the user right clicks on the canvas, you will plant a blue tree at that location. Note that the trees are in 3D and hence the canvas serves as the ground.

Details: How do we make a 3D tree? It's basically a geometric interpretation of sentences produced by a set of rewriting rules. Using the notation from the wiki page above, our basic tree will be defined by: variables : 0, 1 constants: a,b,c axiom : 0 rules : (1 -> 11), (0 -> 1a0b0c0) where the constants [,] are replaced with a,b,c and their interpretations are replaced with: a: turn angles alpha = 0, beta = 45 b: turn angles alpha = 120, beta = 45 c: turn angles alpha = 240, beta = 45 With the left click, create a red tree with recursive depth of 4. Use line segments of length 50. With the right click, create a blue tree with a recursive depth of 6. Use line segments of length 40. Note that rather than creating unique trees for each mouse click, you may consider creating these two varieties first and then just instancing them later on. Displaying a tree: The tree shall be displayed in wireframe. A simple wireframe drawing will show the "skeleton" of the object by drawing a line segment for each of the tree branch. The leaf is not drawn for now. The canvas defines our ground. Since we're essentially looking "down" on the canvas, we will be looking at our trees from the top. Hence, what we see at this point won't look like what's displayed on the wiki, but rather the top view. That is, the tree grows up along the positive z-axis. We set the ground coordinates as x-axis is positive going right, and y-axis is positive going up. This creates a right-handed coordinate system for our virtual world. We will also need to adjust the world coordinates so that the world origin is at the center of the canvas.

The viewer is at location (0,0,¡Þ) in the world. This is the default view. An alternative view would be to have the viewer at (0, -¡Þ, 75). Add a toggle button to switch between these two views.

Resources: https://www.google.com/imgres?imgurl=https://www.vexlio.com/blog/drawing-simple-organics-with-l-systems/tree-two.png&imgrefurl=https://www.vexlio.com/blog/drawing-simple-organics-with-l-systems/&docid=rfop8CR6HNC9oM&tbnid=k3lgMxSG7kAIjM:&vet=1&w=300&h=211&source=sh/x/im https://www.google.com/imgres?imgurl=https://cgjennings.ca/media/articles/y-tree.png&imgrefurl=https://cgjennings.ca/articles/l-systems.html&docid=f1hn2WVkjkbyoM&tbnid=0rqcPTICkI3tCM:&vet=1&w=267&h=241&source=sh/x/im https://www.w3schools.com/howto/howto_css_switch.asp https://www.tutorialspoint.com/webgl/webgl_modes_of_drawing.htm

Grading: Rubric:

You start off with 100 points. You earn additional credit by turning in your assignment early and/or implementing additional features (not applicable for this assignment). You lose credit for missing functionality, incorrect results, poorly documented or formatted code, or not following instructions.

Below is a partial list:

- up to 10 points off for poor features.html file - up to 10 points off for inadequate comments or hard-to-read code - up to 10 points off for not following instructions - up to 10 points off for special handling to grade your homework (usually because you did not check that it runs on the computers in the lab first). - functionality points depending on importance

Make sure you: a. submit the right files you want us to grade, b. have tested your code on the browsers in the lab. c. follow the general instructions described in overview.html