<h1 id="heading-overview">Overview</h1>
<ul>
<li><code>index.html</code>: Added scripts for <code>building.js</code> and <code>tree.js</code>.</li>
<li><code>js/items/building.js</code>: New class <code>Building</code> for drawing buildings.</li>
<li><code>js/items/tree.js</code>: New class <code>Tree</code> for drawing trees.</li>
<li><code>js/math/graph.js</code>: Added static method <code>load()</code> for loading graph info.</li>
<li><code>js/math/utils.js</code>: Added functions <code>lerp2D()</code>, <code>getFake3dPoint()</code>, and <code>getRandomColor()</code>.</li>
<li><code>js/primitives/polygon.js</code>: Added <code>join</code> option to <code>draw()</code> method.</li>
<li><code>js/world.js</code>: Changed representation of buildings, added trees, changed how they are drawn and added a <code>viewPoint</code> parameter to the <code>draw(ctx, viewPoint)</code> method.</li>
</ul>
<h1 id="heading-file-wise-changes-made">File wise changes made</h1>
<h3 id="heading-indexhtml">index.html</h3>
<ul>
<li>Added the scripts <code>js/items/tree.js</code> and <code>js/items/building.js</code> in the <code>&lt;head&gt;</code> tag</li>
<li>Removed <code>world.draw(ctx);</code> and added the following code:<ul>
<li>Created a variable <code>viewPoint</code></li>
<li>Added <code>world.draw(ctx, viewPoint);</code></li>
<li>Added <code>ctx.globalAlpha = 0.3;</code></li>
<li>Added <code>graphEditor.display();</code></li>
<li>Added <code>requestAnimationFrame(animate);</code></li>
</ul>
</li>
</ul>
<h3 id="heading-jsitemsbuildingjs">js/items/building.js</h3>
<ul>
<li>Added a new class called <code>Building</code> which takes a polygon and a height as parameters</li>
<li><code>Building</code> has a <code>draw()</code> method that draws the building in the context provided</li>
<li>The <code>draw()</code> method creates the base, the sides, the ceiling, the roof, and the top midpoints of the building</li>
<li>It then draws the base, the sides, the ceiling, and the roof of the building</li>
</ul>
<h3 id="heading-jsitemstreejs">js/items/tree.js</h3>
<ul>
<li>Added a new class called <code>Tree</code> which takes a center, a size, and a height as parameters</li>
<li><code>Tree</code> has a <code>draw()</code> method that draws the tree in the context provided</li>
<li>The <code>draw()</code> method generates a base polygon for the tree, and then draws it</li>
<li>It then creates a top point for the tree, and draws the trunk of the tree</li>
<li>It then draws the leaves of the tree using a loop that creates a series of polygons and draws them</li>
</ul>
<h3 id="heading-jsmathgraphjs">js/math/graph.js</h3>
<ul>
<li>Added a static method called "load" which takes a Graph object as a parameter</li>
<li>The "load" method creates a new Graph object with the points and segments from the JSON object</li>
<li>It then returns the new Graph object</li>
<li>Added a "hash" method to the Graph class which returns a JSON string representation of the Graph object</li>
</ul>
<h3 id="heading-jsmathutilsjs">js/math/utils.js</h3>
<ul>
<li>Added a function called <code>lerp2D</code> which takes two points and a value between 0 and 1 as parameters</li>
<li>The <code>lerp2D</code> function returns a new point which is the linear interpolation between the two points, with the value t specifying the weighting between the two points</li>
<li>Added a function called <code>getFake3dPoint</code> which takes a point, a view point, and a height as parameters</li>
<li>The <code>getFake3dPoint</code> function returns a new point which is the 3D projection of the point onto the plane defined by the view point and the height</li>
</ul>
<h3 id="heading-jsprimitivespolygonjs">js/primitives/polygon.js</h3>
<ul>
<li>Added a <code>join</code> parameter to the <code>draw</code> method of the Polygon class</li>
<li>The <code>join</code> parameter specifies the type of join to be used when drawing the polygon</li>
</ul>
<h3 id="heading-jsworldjs">js/world.js</h3>
<ul>
<li>Changed <code>...this.buildings.map((b) =&gt; b.points).flat()</code> to <code>...this.buildings.map((b) =&gt; b.base.points).flat()</code> in the <code>#generateTrees()</code> method</li>
<li>Added <code>viewPoint</code> as a parameter to the <code>draw</code> method of the World class</li>
<li>Changed <code>for (const tree of this.trees)</code> to <code>items.sort(...)</code> and <code>for (const item of items)</code> in the <code>draw</code> method of the World class</li>
<li>Changed <code>tree.draw(ctx, { size: this.treeSize, color: "rgba(0,0,0,0.5)" });</code> to <code>item.draw(ctx, viewPoint);</code> in the <code>draw</code> method of the World class</li>
<li>Changed <code>for (const bld of this.buildings) { bld.draw(ctx); }</code> to <code>for (const bld of this.buildings) { bld.draw(ctx); }</code> in the <code>draw</code> method of the World class</li>
</ul>
<h1 id="heading-summary">Summary</h1>
<ul>
<li>index.html:<ul>
<li>Added </li></ul></li></ul>


# Overview
- `index.html`: Added scripts for `building.js` and `tree.js`.
- `js/items/building.js`: New class `Building` for drawing buildings.
- `js/items/tree.js`: New class `Tree` for drawing trees.
- `js/math/graph.js`: Added static method `load()` for loading graph info.
- `js/math/utils.js`: Added functions `lerp2D()`, `getFake3dPoint()`, and `getRandomColor()`.
- `js/primitives/polygon.js`: Added `join` option to `draw()` method.
- `js/world.js`: Changed representation of buildings, added trees, changed how they are drawn and added a `viewPoint` parameter to the `draw(ctx, viewPoint)` method.

# File wise changes made
### index.html
- Added the scripts `js/items/tree.js` and `js/items/building.js` in the `<head>` tag
- Removed `world.draw(ctx);` and added the following code:
    - Created a variable `viewPoint`
    - Added `world.draw(ctx, viewPoint);`
    - Added `ctx.globalAlpha = 0.3;`
    - Added `graphEditor.display();`
    - Added `requestAnimationFrame(animate);`

### js/items/building.js
- Added a new class called `Building` which takes a polygon and a height as parameters
- `Building` has a `draw()` method that draws the building in the context provided
- The `draw()` method creates the base, the sides, the ceiling, the roof, and the top midpoints of the building
- It then draws the base, the sides, the ceiling, and the roof of the building

### js/items/tree.js
- Added a new class called `Tree` which takes a center, a size, and a height as parameters
- `Tree` has a `draw()` method that draws the tree in the context provided
- The `draw()` method generates a base polygon for the tree, and then draws it
- It then creates a top point for the tree, and draws the trunk of the tree
- It then draws the leaves of the tree using a loop that creates a series of polygons and draws them

### js/math/graph.js
- Added a static method called "load" which takes a Graph object as a parameter
- The "load" method creates a new Graph object with the points and segments from the JSON object
- It then returns the new Graph object
- Added a "hash" method to the Graph class which returns a JSON string representation of the Graph object

### js/math/utils.js
- Added a function called `lerp2D` which takes two points and a value between 0 and 1 as parameters
- The `lerp2D` function returns a new point which is the linear interpolation between the two points, with the value t specifying the weighting between the two points
- Added a function called `getFake3dPoint` which takes a point, a view point, and a height as parameters
- The `getFake3dPoint` function returns a new point which is the 3D projection of the point onto the plane defined by the view point and the height

### js/primitives/polygon.js
- Added a `join` parameter to the `draw` method of the Polygon class
- The `join` parameter specifies the type of join to be used when drawing the polygon

### js/world.js
- Changed `...this.buildings.map((b) => b.points).flat()` to `...this.buildings.map((b) => b.base.points).flat()` in the `#generateTrees()` method
- Added `viewPoint` as a parameter to the `draw` method of the World class
- Changed `for (const tree of this.trees)` to `items.sort(...)` and `for (const item of items)` in the `draw` method of the World class
- Changed `tree.draw(ctx, { size: this.treeSize, color: "rgba(0,0,0,0.5)" });` to `item.draw(ctx, viewPoint);` in the `draw` method of the World class
- Changed `for (const bld of this.buildings) { bld.draw(ctx); }` to `for (const bld of this.buildings) { bld.draw(ctx); }` in the `draw` method of the World class

# Summary
- index.html:
  - Added <script> tags for items/tree.js and items/building.js.
  - Changed the way the viewport is offset when drawing the world.
- js/items/building.js:
  - Added a new class, Building, which represents a building with a polygonal base and a height.
  - Buildings can be drawn with a variety of colors and styles.
- js/items/tree.js:
  - Added a new class, Tree, which represents a tree with a center point, a size, and a height.
  - Trees can be drawn with a variety of colors and styles, and their appearance changes as they get closer to the viewer.
- js/math/graph.js:
  - Added a static method, load, which can be used to create a Graph object from a JSON string.
  - Added a hash method, which returns a string that can be used to uniquely identify a Graph object.
- js/math/utils.js:
  - Added a new function, lerp2D, which linearly interpolates between two points.
  - Added a new function, getFake3dPoint, which takes a point and a height and returns a new point that is offset in the z-direction.
- js/primitives/polygon.js:
  - Added a new parameter, join, to the draw method. This parameter controls the shape of the joints between the line segments that make up the polygon.
- js/world.js:
  - Changed the way that trees are generated. Trees are now generated randomly within the bounds of the world, and their positions are checked to ensure that they are not too close to other trees.
  - Changed the way that buildings are generated. Buildings are now generated by first generating a polygonal base, and then extruding the base upwards to create the building's walls.
  - Changed the way that the world is drawn. The world is now drawn in 3D, with buildings and trees appearing closer or farther away depending on their distance from the viewer.
  - Added a new method, draw, which takes a viewPoint parameter. This parameter is used to determine the position of the viewer, and the world is drawn accordingly.


New buildings, trees, and math functions

Overview

File wise changes made

index.html

js/items/building.js

js/items/tree.js

js/math/graph.js

js/math/utils.js

js/primitives/polygon.js

js/world.js

Summary