This demonstration seeks to showcase the behaviours of two algorithms; Separating Axis Theorem and Diagonals.
The user experience is optimized for your computer, but mobile support also exists.
If you want to skip the tutorial, click the "Skip" button below. Otherwise, click on the buttons in the bottom right or use the arrow keys on your keyboard.
Creating Polygons
Create a new polygon by inputting its amount of sides and choosing if it should be pushable before clicking "Create Polygon".
The values on the input section are used when creating new polygons, not to modify existing polygons.
If existing polygons would collide with the new polygon, those polygons will blink red and no new polygon is created.
Controlling the Polygons
The purpose is to create multiple polygons in order to drive them into each other and observe how the collisions are handled.
Click on a polygon to select it and you can then move the selected polygon by pressing W, A, S, or D on your keyboard.
Configure Your Experience
Choose which algorithm should be used by opening the settings.
You may also change the movement speed and rotation speed of the polygons.
Your settings are maintained between sessions by storing them in Local Storage. Keep in mind that unless you save the settings, they will be discarded.
Additional Controls
You may zoom in and out (CTRL + Scroll) to change the scale of the viewport.
Change whether or not the selected polygon should be pushable by pressing P on your keyboard.
Close a pop-up (like this one) by clicking outside it or by pressing ESC. Pressing ESC also opens the "Settings" modal if no other modal is open.
Save the settings by pressing ENTER.
That's It!
I hope you will enjoy this project as much as I did making it!
For the source code and more information regarding the algorithms and this project, visit my GitHub.