Merge branch 'main' of https://github.com/jasparm/polyfusion

documentation/src/SUMMARY.md

@@ -25,7 +25,15 @@
   - [Scene Manager](./documentation/3d/scene_manager.md)
   - [Shape Manager](./documentation/3d/shape_manager.md)
   - [Custom Shape](./documentation/3d/custom_shape.md)
-- [2D](./documentation/2d/2d.md)
+- [2D](./end_user_guides/2d_guidelines/overview.md)
+  - [Creating Shapes](./end_user_guides/2d_guidelines/creating_shapes/creating_shapes.md)
+  - [Selecting Shapes](./end_user_guides/2d_guidelines/selecting_shapes/selecting_shapes.md)
+  - [Editing Shapes](./end_user_guides/2d_guidelines/editing_shapes/editing_shapes.md)
+  - [Saving Shapes](./end_user_guides/2d_guidelines/saving_shapes/saving_shapes.md)
+  - [Loading Shapes](./end_user_guides/2d_guidelines/loading_shapes/loading_shapes.md)
+  - [Monte Carlo IoU Estimation](./end_user_guides/2d_guidelines/algorithms/monte_carlo.md)
+  - [Exact IoU Calculation](./end_user_guides/2d_guidelines/algorithms/sutherland-hodgman.md)
+
 - [Server](./documentation/server/server.md)
   - [Endpoints](./documentation/server/endpoints.md)
 - [Testing](./documentation/testing/testing.md)

documentation/src/end_user_guides/2d_guidelines/algorithms/monte_carlo.md

@@ -0,0 +1,15 @@
+# Monte Carlo IoU Estimation
+
+The first algorithm that we have is our Monte Carlo Estimation.
+
+To see this in action, ideally create two shapes of reasonable size and overlap them both such that there is a section of both shapes that is intersecting.
+
+Then, navigate to the Monte Carlo Icon and select it to see it run.
+
+Circles will appear on the screen.
+
+Blue circles represent those in the intersection area, with red being those in the union area.
+
+You can hit pause to pause the simulation and clear the canvas to end the simulation.
+
+<video src="Screen Recording 2024-10-10 at 5.47.18 pm.mov" controls></video>

documentation/src/end_user_guides/2d_guidelines/algorithms/sutherland-hodgman.md

@@ -0,0 +1,11 @@
+# Sutherland Hodgman Intersection
+
+Our second IoU algorithm is the Sutherland-Hodgman algorithm.
+
+To see this one in action, overlap two shapes and select them both.
+
+Once they are both selected, the intersection button will be clickable.
+
+Click that button and the intersection area will be visualised and the resulting shape will be available to be used on the canvas with its area available to view.
+
+<video src="Screen Recording 2024-10-10 at 5.51.27 pm.mov" controls></video>

documentation/src/end_user_guides/2d_guidelines/creating_shapes/creating_shapes.md

@@ -0,0 +1,23 @@
+# Creating Shapes
+
+To create a shape, begin by selecting the 'Create Shape' button on the toolbar.
+
+![Create Shape Icon](<Screenshot 2024-10-10 at 5.22.07 pm.png>)
+
+Once this has been selected, you can click anywhere on the canvas to add a point.
+
+At least 3 points must be added in order for the shape to be saved.
+
+<video src="Screen Recording 2024-10-10 at 5.23.42 pm.mov" controls></video>
+
+Multiple shapes can be added to the canvas at one time.
+
+They can also be moved by simply clicking and dragging on one or more shapes.
+
+<video src="Screen Recording 2024-10-10 at 5.31.14 pm.mov" controls></video>
+
+While creating shapes, you can undo and redo points that you have made.
+
+Additionally, shapes are ensured to be convex and you will notice that you cannot place points that will make the shape concave.
+
+<video src="Screen Recording 2024-10-10 at 5.53.35 pm.mov" controls></video>

documentation/src/end_user_guides/2d_guidelines/editing_shapes/editing_shapes.md

@@ -0,0 +1,9 @@
+# Editing a Shape
+
+When a single shape is selected, it can be edited as well as having its important data points able to be viewed.
+
+Simply select a shape and then press the edit shape icon.
+
+The colour can be edited, as well as the name of the shape if it has been saved.
+
+<video src="Screen Recording 2024-10-10 at 5.38.31 pm.mov" controls></video>

documentation/src/end_user_guides/2d_guidelines/loading_shapes/loading_shapes.md

@@ -0,0 +1,13 @@
+# Loading Shapes
+
+To load a shape, simply navigate to the load shapes icon on the left.
+
+There will be a list of default shapes and custom shapes.
+
+Default shapes include basic polygons like a square and triangle that will always be available.
+
+Custom shapes are shapes that have been saved by the user.
+
+To then load the shape, select it from the list and it will appear on the canvas where it was saved.
+
+<video src="Screen Recording 2024-10-10 at 5.43.42 pm.mov" controls></video>

documentation/src/end_user_guides/2d_guidelines/overview.md

@@ -0,0 +1,28 @@
+# Overview
+
+This section will provide an overview on the 2d section of our project, outlining a suggested order for following our end user guidelines.
+
+## Beginning
+
+![alt text](<Screenshot 2024-10-10 at 5.13.36 pm.png>)
+
+This is the canvas you will see after navigating to the 2d canvas.
+On the left is the toolbar.
+
+Each button will have its seperate functionality and will have tooltips that outline what it does.
+
+Starting from the top button, I will outline briefly what each icon does.
+
+1. Creating a shape
+2. Selecting a shape
+3. Editing a shape (only allowed when a shape is selected)
+4. Load shapes
+5. Save shape (only allowed when a shape is selected)
+6. Intersection calculation (only allowed when two shapes are selected)
+7. Monte Carlo Estimation
+8. Undo (only works while creating a shape)
+9. Redo (only works while creating a shape)
+10. Clear canvas.
+
+## Navigating The Guidelines
+We suggest you begin with creating a shape, then look at selecting a shape, editing a shape, saving the shape, loading the shape and the algorithms section last.

documentation/src/end_user_guides/2d_guidelines/saving_shapes/saving_shapes.md

@@ -0,0 +1,7 @@
+# Saving a Shape
+
+To save a shape, simply select it and navigate to the save shape icon on the toolbar.
+
+Enter a unique name for the shape and hit save.
+
+<video src="Screen Recording 2024-10-10 at 5.41.26 pm.mov" controls></video>

documentation/src/end_user_guides/2d_guidelines/selecting_shapes/selecting_shapes.md

@@ -0,0 +1,15 @@
+# Selecting Shapes
+
+Shapes can be selected by firstly clicking on the select shape icon in the toolbar.
+
+Various functionality is allowed when shapes are selected.
+
+For example, when one shape is selected, we can edit it and save it.
+
+When two shapes are selected, we can calculate the intersection between the two if there is one.
+
+You can de-select a shape by clicking on it if it is selected and de-select all shapes by clicking on the canvas.
+
+Selected shapes can be deleted by pressing the delete key.
+
+<video src="Screen Recording 2024-10-10 at 5.33.05 pm.mov" controls></video>

expressThree/dist/modules/setup.js

@@ -301,6 +301,9 @@ export let setup = () => {
             state.points.push(state.undoPoints.pop());
         }
     });
+
+    // runTests();
+
 };
 
 // Making a function to handle resetting our selected shape mode