https://github.com/tckerr/collision

Collision is a Javascript library that provides basic 2D OBB collision detection and resolution.
https://github.com/tckerr/collision

Last synced: about 2 months ago
JSON representation

Collision is a Javascript library that provides basic 2D OBB collision detection and resolution.

• Host: GitHub
• URL: https://github.com/tckerr/collision
• Owner: tckerr
• Created: 2016-01-16T15:51:35.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-16T15:54:01.000Z (about 9 years ago)
• Last Synced: 2023-03-24T14:42:02.363Z (almost 2 years ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
Description

---

Collision is a Javascript library that provides basic 2D rectangular [OBB](https://en.wikipedia.org/wiki/Bounding_volume) collision detection and resolution. To see an example in action, check out this [asteroid generator](http://www.tckerr.com/cdr/) (turn off "immune" in the options.)

Instructions

---

Download and include the library:

```

```

You will then be able to access the library through the ```Collision``` object. First, set up your objects with axis-aligned bounding boxes, like so:

```

var A = {

    UL: {x: 10, y: 10},

    UR: {x: 59, y: 10},

    LR: {x: 59, y: 59},

    LL: {x: 10, y: 59}

}

var B = {

    UL: {x: 110, y: 80 },

    UR: {x: 159, y: 80 },

    LR: {x: 159, y: 159},

    LL: {x: 110, y: 159}

}

```

To test for collision, simply run ```Collision.test(A,B);```, where A is the object who is in motion. The resulting object will have the following properties:

- ```did_collide```: A boolean representing collision or not.

- ```entity```: The object that A is in collision with (in this case, B)

- ```projection```: The resolution vector for object A. This is an object like ```{x: 5, y: -10}``` such that adding those values to each of A's coordinates will resolve collision. Note: if there is no collision, this property will always be ```{x: 0, y: 0}```

Examples

---

*Here are two objects not in collision:*

![no collision](http://i.imgur.com/LZAdSdv.jpg)

Here is their object representations:

```

var A = {

    UL: {x: 10, y: 10},

    UR: {x: 59, y: 10},

    LR: {x: 59, y: 59},

    LL: {x: 10, y: 59}

}

var B = {

    UL: {x: 110, y: 80 },

    UR: {x: 159, y: 80 },

    LR: {x: 159, y: 159},

    LL: {x: 110, y: 159}

}

```

Running test return false:

```

Collision.test(A,B); //did_collide will return false

```

*Here we have two objects in collision:*

![collision](http://i.imgur.com/ZjWejzw.jpg)

Here is their object representations:

```

var A = {

    UL: {x: 30, y: 20},

    UR: {x: 59, y: 20},

    LR: {x: 30, y: 89},

    LL: {x: 59, y: 89}

}

var B = {

    UL: {x: 40, y: 70},

    UR: {x: 99, y: 70 },

    LR: {x: 99, y: 99},

    LL: {x: 40, y: 99}

}

```

Let's check for collision, then add the result to A:

```

var result = Collision.test(A,B); //did_collide will return true, so add the projection

A = {

    UL: {x: 30+result.projection.x, y: 20+result.projection.y},

    UR: {x: 59+result.projection.x, y: 20+result.projection.y},

    LR: {x: 30+result.projection.x, y: 89+result.projection.y},

    LL: {x: 59+result.projection.x, y: 89+result.projection.y}

}

var result = Collision.test(A,B); //did_collide will return false

```

Here is the result of adding the projection -- no collision:

![resolved](http://i.imgur.com/SZZAaBq.jpg)

This is a simple example using axis-aligned boxes. See the example in the description for an implementation that uses oriented bounding boxes.