{"id":21025596,"url":"https://github.com/robertcorponoi/collider2d","last_synced_at":"2025-06-15T22:11:13.515Z","repository":{"id":47060084,"uuid":"234437842","full_name":"robertcorponoi/collider2d","owner":"robertcorponoi","description":"A 2D collision checker for modern JavaScript games.","archived":false,"fork":false,"pushed_at":"2021-09-15T10:39:43.000Z","size":387,"stargazers_count":14,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-13T04:00:11.565Z","etag":null,"topics":["2d-collision-checker","axis-aligned-bounding-box","box","circle","collider2d","collision","polygon","sat","vector"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robertcorponoi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-17T00:24:03.000Z","updated_at":"2025-03-28T15:29:18.000Z","dependencies_parsed_at":"2022-09-05T12:00:47.282Z","dependency_job_id":null,"html_url":"https://github.com/robertcorponoi/collider2d","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertcorponoi%2Fcollider2d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertcorponoi%2Fcollider2d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertcorponoi%2Fcollider2d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertcorponoi%2Fcollider2d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robertcorponoi","download_url":"https://codeload.github.com/robertcorponoi/collider2d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254322805,"owners_count":22051669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d-collision-checker","axis-aligned-bounding-box","box","circle","collider2d","collision","polygon","sat","vector"],"created_at":"2024-11-19T11:34:47.678Z","updated_at":"2025-05-15T10:31:07.673Z","avatar_url":"https://github.com/robertcorponoi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCollider2D\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA 2D collision checker for modern JavaScript games.\u003cp\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![NPM version](https://img.shields.io/npm/v/collider2d.svg?style=flat)](https://www.npmjs.com/package/collider2d)\n  [![Known Vulnerabilities](https://snyk.io/test/github/robertcorponoi/collider2d/badge.svg)](https://snyk.io/test/github/robertcorponoi/collider2d)\n  ![npm](https://img.shields.io/npm/dt/collider2d)\n  [![NPM downloads](https://img.shields.io/npm/dm/collider2d.svg?style=flat)](https://www.npmjs.com/package/collider2d)\n  \u003ca href=\"https://badge.fury.io/js/collider2d\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/robertcorponoi/collider2d.svg\" alt=\"issues\" height=\"18\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://badge.fury.io/js/collider2d\"\u003e\u003cimg src=\"https://img.shields.io/github/license/robertcorponoi/collider2d.svg\" alt=\"license\" height=\"18\"\u003e\u003c/a\u003e\n  [![Gitter](https://badges.gitter.im/gitterHQ/gitter.svg)](https://gitter.im/robertcorponoi)\n\n\u003c/div\u003e\n\n**Table of Contents**\n\n- [Geometry](#geometry)\n  - [Vector](#vector)\n  - [Circle](#circle)\n  - [Box](#box)\n  - [Polygon](#polygon)\n- [Collisions](#collisions)\n  - [pointInCircle](#pointInCircle)\n  - [pointInPolygon](#pointInPolygon)\n  - [testPolygonPolygon](#testPolygonPolygon)\n  - [testPolygonCircle](#testPolygonCircle)\n  - [testCircleCircle](#testCircleCircle)\n  - [testCirclePolygon](#testCirclePolygon)\n\n## **Prologue**\n\nNote, this project uses https://github.com/jriecken/sat-js as a foundation and builds on it. I will actively send updates that I find useful to the original repository as I find it to be a great resource still.\n\nIf you find collider2d useful please check out the original repository and give credit to the author.\n\n## **Install**\n\nTo install collider2d, use:\n\n```bash\n$ npm install collider2d\n```\n\n## **Initialization**\n\nIf you're using collider2d in a browser environment, you can use the `collider2d.js` file found in the root directory or just a reference to the package if you're using webpack.\n\n**browser**\n\n```js\n// Non-webpack environment:\nimport { Vector, Box, Circle, Polygon, Collider2d } from '../node_modules/collider2d/collider2d.js';\n\n// Webpack/other bundler environment:\nimport { Vector, Box, Circle, Polygon, Collider2d } from 'collider2d';\n```\n\nand in a Node environment, you can imply require the module:\n\n**node**\n\n```js\nconst { Vector, Box, Circle, Polygon, Collider2d } = require('collider2d');\n```\n\nThe `Vector`, `Box`, `Circle`, and `Polygon` classes are used to create the shapes to test and then the `Collider2d` class is used to test collisions using the created shapes. Just like with the geometry classes, you'll need to create a new instance of the class to use the collision tests. In the examples below you'll see:\n\n```js\nconst collision = collider2d.testPolygonPolygon();\n```\n\nThis implies that an instance of the `Collider2d` is created beforehand like so:\n\n```js\nconst collider2d = new Collider2d();\n```\n\n## **Geometry**\n\ncollider2d revolves around points and shapes, more specifically vectors, circles, and polygons.\n\n## **Vector**\n\nA vector is a point in 2D space that has a x and y position.\n\n| property \t| type   \t| description                   \t| default \t|\n|----------\t|--------\t|-------------------------------\t|---------\t|\n| x        \t| number \t| The x position of the vector. \t| 0       \t|\n| y        \t| number \t| The y position of the vector. \t| 0       \t|\n\n**example:**\n\n```js\nconst vec1 = new Vector(10, 25);\n```\n\nTo see the full list of properties and methods for circles, check out the [vector documentation](docs/vector.md).\n\n## **Circle**\n\nA circle consists of a center position and a radius.\n\n| property \t| type   \t| description                                     \t| default      \t|\n|----------\t|--------\t|-------------------------------------------------\t|--------------\t|\n| position \t| Vector \t| A vector representing the center of the circle. \t| vector(0, 0) \t|\n| radius   \t| number \t| The radius of the circle.                       \t| 0            \t|\n\n**example:**\n\n```js\nconst circle = new Circle(new Vector(5, 5), 10);\n```\n\nTo see the full list of properties and methods for circles, check out the [circles documentation](docs/circle.md).\n\n## **Polygon**\n\nA polygon consists of a convex shape with any number of points (specified in a counter-clockwise order).\n\n| property \t| type          \t| description                                                                                 \t| default      \t|\n|----------\t|---------------\t|---------------------------------------------------------------------------------------------\t|--------------\t|\n| position \t| Vector        \t| A vector representing the origin of the polygon (all other points are relative to this one). \t| vector(0, 0) \t|\n| points   \t| Array\u003cVector\u003e \t| An array of vectors representing the points of the polygon, in counter-clockwise order.     \t| 0            \t|\n\n**example:**\n\n```js\nconst polygon = new Polygon(new Vector(0, 0), [\n  new Vector(0, 0),\n  new Vector(40, 0),\n  new Vector(40, 40),\n  new Vector(0, 40)\n]);\n```\n\nTo see the full list of properties and methods for polygons, check out the [polygon documentation](docs/polygon.md).\n\n## **Box**\n\nA box represents an axis-aligned bounding box with a width and a height.\n\n| property \t| type          \t| description                                                                                 \t| default      \t|\n|----------\t|---------------\t|---------------------------------------------------------------------------------------------\t|--------------\t|\n| position \t| Vector        \t| A vector representing the position of this box.                                              \t| vector(0, 0) \t|\n| width   \t| number        \t| The width of this box.                                                                      \t| 0            \t|\n| height   \t| number        \t| The height of this box.                                                                      \t| 0            \t|\n\n**example:**\n\n```js\nconst box = new Box(new Vector(5, 10), 100, 250);\n```\n\nTo see the full list of properties and methods for boxes, check out the [box documentation](docs/box.md).\n\n## **Collisions**\n\nThere are three different types of collisions: point, circle, and polygon collisions.\n\nSome collisions (testCircleCircle, testPolygonPolygon, testPolygonCircle, testCirclePolygon) have a `details` parameter that can be used to return extra details about the collision, if there is one.\n\nThe structure of the collision details object looks like:\n\n| property \t| type                  \t| description                                                                                         \t| default \t|\n|----------\t|-----------------------\t|-----------------------------------------------------------------------------------------------------\t|---------\t|\n| a        \t| Vector,Circle,Polygon \t| The first collision object                                                                          \t|         \t|\n| b        \t| Vector,Circle,Polygon \t| The second collision object                                                                         \t|         \t|\n| overlapN \t| Vector                \t| A unit vector representing the direction and magnitude of the overlap.                              \t|         \t|\n| overlapV \t| Vector                \t| A vector representing the minimum change necessary to extract the first object from the second one. \t|         \t|\n| overlap  \t| number                \t| The amount that is overlapping.                                                                     \t|         \t|\n| aInB     \t| boolean               \t| Returns true if the first collision object is completely in the second collision object.            \t|         \t|\n| bInA     \t| boolean               \t| Returns true if the second collision object is completely in the first collision object.            \t|         \t|\n\nNote that if you pass in true for the detail parameter and there is a collision, there will not be a boolean returned but the collision details object instead. If there is no collision then it will still return false.\n\n## **Point Collisions**\n\n### **pointInCircle**\n\nChecks to see if a point is inside of a circle.\n\nReturns true if the point is in the circle or false otherwise.\n\n| property \t| type   \t| description         \t| default \t|\n|----------\t|--------\t|---------------------\t|---------\t|\n| point    \t| Vector \t| The point to test.  \t|         \t|\n| circle   \t| Circle \t| The circle to test. \t|         \t|\n\n**example:**\n\n```js\nconst circle = new Circle(new Vector(100, 100), 20);\n\nconst collision = collider2d.pointInCircle(new Vector(110, 110), circle); // true\n```\n\n### **pointInPolygon**\n\nChecks to see if a point is inside of a convex polygon.\n\nReturns true if the point is in the polygon or false otherwise.\n\n| property \t| type   \t| description         \t| default \t|\n|----------\t|--------\t|---------------------\t|---------\t|\n| point    \t| Vector \t| The point to test.  \t|         \t|\n| polygon  \t| Polygon\t| The polygon to test. \t|         \t|\n\n**example:**\n\n```js\nconst triangle = new Polygon(new Vector(30, 0), [\n  new Vector(0, 0),\n  new Vector(30, 0),\n  new Vector(0, 30)\n]);\n\nconst collision = collider2d.pointInPolygon(new Vector(35, 5), triangle); // true\n```\n\n## **Polygon Collisions**\n\n### **testPolygonPolygon**\n\nChecks whether polygons collide.\n\nReturns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.\n\n| property \t| type    \t| description                                                                                                                                 \t| default \t|\n|----------\t|---------\t|---------------------------------------------------------------------------------------------------------------------------------------------\t|---------\t|\n| a        \t| Polygon \t| The first polygon.                                                                                                                          \t|         \t|\n| b        \t| Polygon \t| The second polygon.                                                                                                                         \t|         \t|\n| details  \t| boolean \t| If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true \t|         \t|\n\n**example:**\n\n```js\nconst polygon1 = new Polygon(new Vector(0, 0), [\n  new Vector(0, 0),\n  new Vector(40, 0),\n  new Vector(40, 40),\n  new Vector(0, 40)\n]);\n\nconst polygon2 = new Polygon(new Vector(30, 0), [\n  new Vector(0, 0),\n  new Vector(30, 0),\n  new Vector(0, 30)\n]);\n\n// No details\nconst collided = collider2d.testPolygonPolygon(polygon1, polygon2); // true\n\n// Details\nconst collidedDetails = collider2d.testPolygonPolygon(polygon1, polygon2, true);\nconsole.log(collidedDetails.overlap); // 10\n```\n\n### **testPolygonCircle**\n\nCheck if a polygon and a circle collide.\n\nReturns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.\n\n| property \t| type    \t| description                                                                                                                                 \t| default \t|\n|----------\t|---------\t|---------------------------------------------------------------------------------------------------------------------------------------------\t|---------\t|\n| polygon  \t| Polygon \t| The polygon to check.                                                                                                                       \t|         \t|\n| circle   \t| Circle  \t| The circle to check.                                                                                                                        \t|         \t|\n| details  \t| boolean \t| If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true \t|         \t|\n\n**example:**\n\n```js\nconst circle = new Circle(new Vector(50, 50), 20);\n\nconst polygon = new Polygon(new Vector(0, 0), [\n  new Vector(0, 0),\n  new Vector(40, 0),\n  new Vector(40, 40),\n  new Vector(0, 40)\n]);\n\n// No details\nconst collided = collider2d.testPolygonCircle(polygon, circle); // true\n\n// Details\nconst collidedDetails = collider2d.testPolygonCircle(polygon, circle, true);\nconsole.log(collidedDetails.overlap.toFixed(2)); // 5.86\n```\n\n## **Circle Collisions**\n\n### **testCircleCircle**\n\nCheck if two circles collide.\n\nReturns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.\n\n| property \t| type    \t| description                                                                                                                                 \t| default \t|\n|----------\t|---------\t|---------------------------------------------------------------------------------------------------------------------------------------------\t|---------\t|\n| a        \t| Circle  \t| The first circle.                                                                                                                           \t|         \t|\n| b        \t| Circle  \t| The second circle.                                                                                                                          \t|         \t|\n| details  \t| boolean \t| If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true \t|         \t|\n\n**example:**\n\n```js\nconst circle1 = new Circle(new Vector(0, 0), 20);\nconst circle2 = new Circle(new Vector(30, 0), 20);\n\n// No details\nconst collided = collider2d.testCircleCircle(circle1, circle2); // true\n\n// Details\nconst collidedDetails = collider2d.testCircleCircle(circle1, circle2, true);\nconsole.log(collidedDetails.overlap); // 10\n```\n\n### **testCirclePolygon**\n\nCheck if a circle and a polygon collide.\n\n**NOTE:** This is slightly less efficient than polygonCircle as it just runs polygonCircle and reverses everything at the end.\n\nReturns true if the circles collide or false otherwise. If details is set to true and a collision occurs then a collision details object will be returned instead of true.\n\n| property \t| type    \t| description                                                                                                                                 \t| default \t|\n|----------\t|---------\t|---------------------------------------------------------------------------------------------------------------------------------------------\t|---------\t|\n| circle   \t| Circle  \t| The circle to check.                                                                                                                        \t|         \t|\n| polygon  \t| Polygon \t| The polygon to check.                                                                                                                       \t|         \t|\n| details  \t| boolean \t| If set to true and there is a collision, an object highlighting details about the collision will be returned instead of just returning true \t|         \t|\n\n**example:**\n\n```js\nconst circle = new Circle(new Vector(50, 50), 20);\n\nconst polygon = new Polygon(new Vector(0, 0), [\n  new Vector(0, 0),\n  new Vector(40, 0),\n  new Vector(40, 40),\n  new Vector(0, 40)\n]);\n\n// No details\nconst collided = collider2d.testCirclePolygon(circle, polygon); // true\n\n// Details\nconst collidedDetails = collider2d.testCirclePolygon(circle, polygon, true);\n```\n\n## **Tests**\n\nTo run the tests available for collider2d use:\n\n```bash\n$ npm run test\n```\n\n## **License**\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertcorponoi%2Fcollider2d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertcorponoi%2Fcollider2d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertcorponoi%2Fcollider2d/lists"}