feat: improve readme

Author: nenjack

README.md

@@ -13,6 +13,7 @@ Detect-Collisions 💫 is a lightning-fast ⚡️ TypeScript library built to de
 - [Tank](https://prozi.github.io/detect-collisions/demo/)
 - [Stress Test](https://prozi.github.io/detect-collisions/demo/?stress)
 - [Stackblitz](https://stackblitz.com/edit/detect-collisions)
+- [CodePan](https://code.pietal.dev/#/boilerplate/detect-collisions?pans=html,console)
 
 ## Installation
 
@@ -160,7 +161,10 @@ Detect-Collisions provides the functionality to gather raycast data. Here's how:
 ```ts
 const start = { x: 0, y: 0 };
 const end = { x: 0, y: -10 };
-const hit = system.raycast(start, end);
+const hit = system.raycast(start, end, (body, ray) => {
+  // if you don't want the body to be hit by raycast return false
+  return true;
+});
 
 if (hit) {
   const { point, body } = hit;
@@ -171,6 +175,12 @@ if (hit) {
 
 In this example, `point` is a `Vector` with the coordinates of the nearest intersection, and `body` is a reference to the closest body.
 
+## Usage in Browsers
+
+Just do what I did here, import from proper cdn as module, and v'oila:
+
+<https://code.pietal.dev/#/boilerplate/detect-collisions?pans=html,console>
+
 ## Contributing to the Project
 
 We welcome contributions! Feel free to open a merge request. When doing so, please adhere to the following code style guidelines:

docs/index.html

@@ -6,6 +6,7 @@
 <li><a href="https://prozi.github.io/detect-collisions/demo/" target="_blank" class="external">Tank</a></li>
 <li><a href="https://prozi.github.io/detect-collisions/demo/?stress" target="_blank" class="external">Stress Test</a></li>
 <li><a href="https://stackblitz.com/edit/detect-collisions" target="_blank" class="external">Stackblitz</a></li>
+<li><a href="https://code.pietal.dev/#/boilerplate/detect-collisions?pans=html,console" target="_blank" class="external">CodePan</a></li>
 </ul>
 <a id="md:installation" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Installation<a href="#md:installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">i</span><span class="hl-1"> </span><span class="hl-2">detect-collisions</span><span class="hl-1"> </span><span class="hl-3">--save</span>
 </code><button type="button">Copy</button></pre>
@@ -53,10 +54,12 @@
 </code><button type="button">Copy</button></pre>
 
 <a id="md:raycasting" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Raycasting<a href="#md:raycasting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Detect-Collisions provides the functionality to gather raycast data. Here's how:</p>
-<pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">start</span><span class="hl-1"> = { </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-6">y:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1"> };</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">end</span><span class="hl-1"> = { </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-6">y:</span><span class="hl-1"> -</span><span class="hl-7">10</span><span class="hl-1"> };</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">hit</span><span class="hl-1"> = </span><span class="hl-6">system</span><span class="hl-1">.</span><span class="hl-0">raycast</span><span class="hl-1">(</span><span class="hl-6">start</span><span class="hl-1">, </span><span class="hl-6">end</span><span class="hl-1">);</span><br/><br/><span class="hl-8">if</span><span class="hl-1"> (</span><span class="hl-6">hit</span><span class="hl-1">) {</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> { </span><span class="hl-4">point</span><span class="hl-1">, </span><span class="hl-4">body</span><span class="hl-1"> } = </span><span class="hl-6">hit</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">({ </span><span class="hl-6">point</span><span class="hl-1">, </span><span class="hl-6">body</span><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
+<pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">start</span><span class="hl-1"> = { </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-6">y:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1"> };</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">end</span><span class="hl-1"> = { </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-6">y:</span><span class="hl-1"> -</span><span class="hl-7">10</span><span class="hl-1"> };</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">hit</span><span class="hl-1"> = </span><span class="hl-6">system</span><span class="hl-1">.</span><span class="hl-0">raycast</span><span class="hl-1">(</span><span class="hl-6">start</span><span class="hl-1">, </span><span class="hl-6">end</span><span class="hl-1">, (</span><span class="hl-6">body</span><span class="hl-1">, </span><span class="hl-6">ray</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">// if you don&#39;t want the body to be hit by raycast return false</span><br/><span class="hl-1">  </span><span class="hl-8">return</span><span class="hl-1"> </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">if</span><span class="hl-1"> (</span><span class="hl-6">hit</span><span class="hl-1">) {</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> { </span><span class="hl-4">point</span><span class="hl-1">, </span><span class="hl-4">body</span><span class="hl-1"> } = </span><span class="hl-6">hit</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">({ </span><span class="hl-6">point</span><span class="hl-1">, </span><span class="hl-6">body</span><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 
 <p>In this example, <code>point</code> is a <code>Vector</code> with the coordinates of the nearest intersection, and <code>body</code> is a reference to the closest body.</p>
+<a id="md:usage-in-browsers" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Usage in Browsers<a href="#md:usage-in-browsers" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Just do what I did here, import from proper cdn as module, and v'oila:</p>
+<p><a href="https://code.pietal.dev/#/boilerplate/detect-collisions?pans=html,console" target="_blank" class="external">https://code.pietal.dev/#/boilerplate/detect-collisions?pans=html,console</a></p>
 <a id="md:contributing-to-the-project" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Contributing to the Project<a href="#md:contributing-to-the-project" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>We welcome contributions! Feel free to open a merge request. When doing so, please adhere to the following code style guidelines:</p>
 <ul>
 <li>Execute the <code>npm run precommit</code> script prior to submitting your merge request</li>
@@ -70,4 +73,4 @@
 
 <a id="md:license" class="tsd-anchor"></a><h2 class="tsd-anchor-link">License<a href="#md:license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>MIT</p>
 <a id="md:you-can-buy-me-a-coffee" class="tsd-anchor"></a><h2 class="tsd-anchor-link">You can buy me a coffee<a href="#md:you-can-buy-me-a-coffee" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><a href="https://paypal.me/jacekpietal" target="_blank" class="external">https://paypal.me/jacekpietal</a></p>
-</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:detect-collisions"><span>Detect-<wbr/>Collisions</span></a><ul><li><a href="#md:introduction"><span>Introduction</span></a></li><li><a href="#md:demos"><span>Demos</span></a></li><li><a href="#md:installation"><span>Installation</span></a></li><li><a href="#md:api-documentation"><span>API <wbr/>Documentation</span></a></li><li><a href="#md:usage"><span>Usage</span></a></li><li><ul><li><a href="#md:step-1-initialize-collision-system"><span>Step 1: <wbr/>Initialize <wbr/>Collision <wbr/>System</span></a></li><li><a href="#md:step-2-understand-body-attributes"><span>Step 2: <wbr/>Understand <wbr/>Body <wbr/>Attributes</span></a></li><li><a href="#md:step-3-create-and-manage-bodies"><span>Step 3: <wbr/>Create and <wbr/>Manage <wbr/>Bodies</span></a></li><li><a href="#md:step-4-manipulate-bodies"><span>Step 4: <wbr/>Manipulate <wbr/>Bodies</span></a></li><li><a href="#md:step-5-collision-detection-and-resolution"><span>Step 5: <wbr/>Collision <wbr/>Detection and <wbr/>Resolution</span></a></li><li><a href="#md:step-6-cleaning-up"><span>Step 6: <wbr/>Cleaning <wbr/>Up</span></a></li></ul></li><li><a href="#md:visual-debugging-with-rendering"><span>Visual <wbr/>Debugging with <wbr/>Rendering</span></a></li><li><a href="#md:raycasting"><span>Raycasting</span></a></li><li><a href="#md:contributing-to-the-project"><span>Contributing to the <wbr/>Project</span></a></li><li><a href="#md:additional-considerations"><span>Additional <wbr/>Considerations</span></a></li><li><ul><li><a href="#md:why-not-use-a-physics-engine"><span>Why not use a physics engine?</span></a></li></ul></li><li><a href="#md:benchmark"><span>Benchmark</span></a></li><li><a href="#md:license"><span>License</span></a></li><li><a href="#md:you-can-buy-me-a-coffee"><span>You can buy me a coffee</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>Detect-Collisions</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:detect-collisions"><span>Detect-<wbr/>Collisions</span></a><ul><li><a href="#md:introduction"><span>Introduction</span></a></li><li><a href="#md:demos"><span>Demos</span></a></li><li><a href="#md:installation"><span>Installation</span></a></li><li><a href="#md:api-documentation"><span>API <wbr/>Documentation</span></a></li><li><a href="#md:usage"><span>Usage</span></a></li><li><ul><li><a href="#md:step-1-initialize-collision-system"><span>Step 1: <wbr/>Initialize <wbr/>Collision <wbr/>System</span></a></li><li><a href="#md:step-2-understand-body-attributes"><span>Step 2: <wbr/>Understand <wbr/>Body <wbr/>Attributes</span></a></li><li><a href="#md:step-3-create-and-manage-bodies"><span>Step 3: <wbr/>Create and <wbr/>Manage <wbr/>Bodies</span></a></li><li><a href="#md:step-4-manipulate-bodies"><span>Step 4: <wbr/>Manipulate <wbr/>Bodies</span></a></li><li><a href="#md:step-5-collision-detection-and-resolution"><span>Step 5: <wbr/>Collision <wbr/>Detection and <wbr/>Resolution</span></a></li><li><a href="#md:step-6-cleaning-up"><span>Step 6: <wbr/>Cleaning <wbr/>Up</span></a></li></ul></li><li><a href="#md:visual-debugging-with-rendering"><span>Visual <wbr/>Debugging with <wbr/>Rendering</span></a></li><li><a href="#md:raycasting"><span>Raycasting</span></a></li><li><a href="#md:usage-in-browsers"><span>Usage in <wbr/>Browsers</span></a></li><li><a href="#md:contributing-to-the-project"><span>Contributing to the <wbr/>Project</span></a></li><li><a href="#md:additional-considerations"><span>Additional <wbr/>Considerations</span></a></li><li><ul><li><a href="#md:why-not-use-a-physics-engine"><span>Why not use a physics engine?</span></a></li></ul></li><li><a href="#md:benchmark"><span>Benchmark</span></a></li><li><a href="#md:license"><span>License</span></a></li><li><a href="#md:you-can-buy-me-a-coffee"><span>You can buy me a coffee</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>Detect-Collisions</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "detect-collisions",
-  "version": "9.23.2",
+  "version": "9.24.0",
   "description": "Points, Lines, Boxes, Polygons (also hollow), Ellipses, Circles. RayCasting, offsets, rotation, scaling, bounding box padding, flags for static and ghost/trigger bodies",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -73,11 +73,11 @@
     "sat": "^0.9.0"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin": "^2.10.0",
-    "@types/node": "^22.8.6",
+    "@stylistic/eslint-plugin": "^2.10.1",
+    "@types/node": "^22.9.0",
     "@types/rbush": "^4.0.0",
     "chef-express": "^2.4.2",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-plugin-json": "^4.0.1",
     "html-webpack-plugin": "^5.6.3",
     "husky": "^9.1.6",
@@ -88,9 +88,9 @@
     "tinybench": "^3.0.3",
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
-    "typedoc": "^0.26.10",
+    "typedoc": "^0.26.11",
     "typescript": "^5",
-    "webpack": "^5.96.0",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"
   },