This is an interactive web application demonstrating the basic algorithm for triangulation of a monotone polygon. It allows you to move forward and backward in the algorithm execution timeline and see what's happening at any point (a description of the current step and values of internal variables).
2 modes: editing the input data (monotone polygon) and playback of the triangulation process:
polygon editing:
playing back the triangulation process:
Tip: you can "export" the canvas contents as an image by right clicking on it and selecting "Save image as..."
pnpm install
to download all dependencies
pnpm run dev
(or directly vite
) to start the development server
Note: you should also be able to use npm
instead of pnpm
Now, to build and serve the app:
pnpm run build
(or directly vite build
) to build the app as a static website (just HTML+CSS+JS) into the dist
directory
now serve the contents of the dist
directory using any HTTP server, for example:
cd dist && python start.py
(uses the included python script to start a simple HTTP server)cd dist && php -S localhost:8000
src/App.svelte
- the main application component (contains and manages everything else)src/DemoCanvas.svelte
- component rendering polygon and triangulation state + interactionssrc/SideView.svelte
- component for the sidebar with control and status overviewsrc/StateTrace.ts
- helper class for recording and replaying object state changessrc/triangulation.ts
- implementation of the triangulation algorithm and progress playbacksrc/Vertex.ts
- polygon vertexsrc/app.css
- global styles of the web applicationComputational Geometry [de Berg, Cheong, van Kreveld, Overmars; 2008]
most of the implementation of the algorithm procedure was inspired by the video "04 13 polygon triangulation - triangulating a y monotone" by peyman afshani
Current limitations and missing features (in no particular order) to be added: