QuadTree

This is a quadtree based 2D physics system that uses html and javascript with svg elements to achieve collision detection and correction.

The video below demonstrates how QuadTree works, if you want to try out QuadTree for yourself simply follow the Quickstart or for a brief summary of the codebase refer to Explanation. QuadTree is functional but has still room for general improvements and further feature implementation for example: Three diffing, three balancing etc.

demovideo2.mp4

Quickstart

#1 clone this repository

git clone https://github.com/krissendev/QuadTree

#2 open project folder

cd QuadTree   #enter into the folder/dir 

#3 run localhost server

• either by running "liveserver(Five Server)" plugin in vscode
  
• with node.js installed, install package:"npm install -g http-server" then run: "http-server"
  
• or some other form of local server environment
  
  

Explanation

The general codeflow is currently

painting svg points: index.html -> index.js -> /visualization/addCircle.js
generating quadTree: index.html -> index.js -> /quadTree/addQuadTree.js
//𝑤ℎ𝑖𝑐ℎ 𝑢𝑠𝑒𝑠 𝑟𝑒𝑠𝑜𝑢𝑟𝑐𝑒𝑠 𝑓𝑟𝑜𝑚 '/𝑞𝑢𝑎𝑑𝑇𝑟𝑒𝑒'
drawing rectangles:  index.html -> index.js -> /visualization/addRect.js
//𝑜𝑛𝑙𝑦 𝑓𝑜𝑟 𝑑𝑒𝑏𝑢𝑔𝑔𝑖𝑛𝑔 𝑣𝑖𝑠𝑢𝑎𝑙𝑖𝑧𝑎𝑡𝑖𝑜𝑛 𝑝𝑢𝑟𝑝𝑜𝑠𝑒𝑠
collision checking:  index.html -> index.js -> /physics/physics.js
//𝘸𝘩𝘪𝘤𝘩 𝘶𝘴𝘦𝘴 𝘳𝘦𝘴𝘰𝘶𝘳𝘤𝘦𝘴 𝘧𝘳𝘰𝘮 '/𝘱𝘩𝘺𝘴𝘪𝘤𝘴' 𝘢𝘴𝘸𝘦𝘭𝘭 𝘢𝘴 𝘸𝘪𝘯𝘥𝘰𝘸 𝘣𝘰𝘶𝘯𝘥 '𝘴𝘷𝘨𝘘𝘶𝘢𝘥𝘛𝘳𝘦𝘦' 𝘢𝘯𝘥 '𝘘𝘶𝘢𝘥𝘛𝘳𝘦𝘦' 𝘰𝘣𝘫𝘦𝘤𝘵𝘴 𝘧𝘳𝘰𝘮 '/𝘲𝘶𝘢𝘥𝘛𝘳𝘦𝘦/addQuadTree.js'