bmoren/p5.collide2d

A collision detection library for 2D geometry in p5.js

p5.collide2d's Issues

Add example with rotated geometry

Option to calculate intersection points for circles

may have missed this, but would be nice to be able to get circle/circle and circle/line intersection points as well (either 1 or 2)

collidePointArc method is not included in minified version

statically hosted file

need to add a statically hosted file that can be used to embed script in sketches without actually downloading it

How do I use this in p5 instance mode and React?

Hi there, I'm trying to incorporate using p5.collide2D into React. To do that, I'm using p5-react-wrapper and also I need to write my p5 sketch in instance mode.

However I'm having trouble using this library.

I did the import "p5.collide2d" and if I try to use it p5.collidePointRect... I get an error.
I'm sure the library is loaded because I see the following in the console.
### p5.collide v0.7.3 ###.

However I'm not sure how to call the API.

module version of the library now available on npmjs

Hello everyone,
I have formated it into ES5 module form, and upload to npmjs
Now everyone can install it and use it like module
Leave me a comment if you liked it ♥
Link: https://www.npmjs.com/package/p5collide

LineCircleCollision does not work when given vectors.

Interior option for collidePolyPoly()

I was having issues with collidePolyPoly() not detecting collisions when one polygon is inside another. Looking at the source I see that collidePolyPoly() detects when p2 is inside p1, but not when p1 is inside p2. It seems like that is an equally valid collision, unless I am misunderstanding something.

Add licence file

https://help.github.com/articles/adding-a-license-to-a-repository/

CDN links for NPM still point to v.0.6

These 2 CDN links below:

1. https://cdn.JsDelivr.net/npm/p5.collide2d
2. https://Unpkg.com/p5.collide2d

are grabbing the previous p5.collide2d version 0.6 instead of the newly released 0.7!

We can also navigate all files via these links:

1. https://cdn.JsDelivr.net/npm/p5.collide2d/
2. https://Unpkg.com/p5.collide2d/

RectMode Center

the rect mode center mode is not supported in the library

change examples to es6 / classes

npm package

Please publish this package on npmjs.com 😊

Undefined parameters for collidePointPoint

Just a small note, on line 382

p5.prototype.collidePointPoint = function (x,y,x2,y2, buffer) {
    if(buffer == undefined){
      buffer = 0;
    }

    if(dist(x,y,z,x2) <= buffer){//I think this should be (x,y,x2,y2)?
      return true;
    }

  return false;
};

Collide rotated rects

p5.collide2d.js lib can't collide rotated rects.
I'm suggesting to add this feature, bcs I lost much time to write it myself.

/*
 * collide rotated rects  
 */

// get corners of rects
// x - center x of rect
// y - center y of rect
// w - width of rect
// h - height of rect
// a - angle
p5.prototype.getCorners = function getCorners(x, y, w, h, a) {
  return {
    get topLeft() {
      var cx = x - ((w / 2) * cos(a)) + ((h / 2) * sin(a));
      var cy = y - ((w / 2) * sin(a)) - ((h / 2) * cos(a));
      return {
        x: cx,
        y: cy
      };
    },
    get topRight() {
      var cx = x + ((w / 2) * cos(a)) + ((h / 2) * sin(a));
      var cy = y + ((w / 2) * sin(a)) - ((h / 2) * cos(a));
      return {
        x: cx,
        y: cy
      };
    },
    get bottomLeft() {
      var cx = x - ((w / 2) * cos(a)) - ((h / 2) * sin(a));
      var cy = y - ((w / 2) * sin(a)) + ((h / 2) * cos(a));
      return {
        x: cx,
        y: cy
      };
    },
    get bottomRight() {
      var cx = x + ((w / 2) * cos(a)) - ((h / 2) * sin(a));
      var cy = y + ((w / 2) * sin(a)) + ((h / 2) * cos(a));
      return {
        x: cx,
        y: cy
      };
    },
    toArray: function() {
      return [
        this.topLeft,
        this.topRight,
        this.bottomRight,
        this.bottomLeft
      ];
    }
  }
}

// collide 2 rects by corners as a polies

p5.prototype.collideRects = function collideRects(x1, y1, w1, h1, a1, x2, y2, w2, h2, a2) {
  var c1 = p5.prototype.getCorners(x1, y1, w1, h1, a1).toArray();
  var c2 = p5.prototype.getCorners(x2, y2, w2, h2, a2).toArray();
  return p5.prototype.collidePolyPoly(c1, c2, true);
}

// vector version of colliderects

p5.prototype.collideRectsVector = function collideRectsVector(p1, s1, a1, p2, s2, a2) {
  return p5.prototype.collideRects(p1.x, p1.y, s1.x, s1.y, a1, p2.x, p2.y, s2.x, s2.y, a2);
}

my version of code

Randomly placing objects without touching example broken

Support for instantiated sketches?

Is there a way to use this library from an instantiated sketch, currently I can call the the collide2d methods using the namespace created, i.e. p.collideCirclePoly() but when subsequent methods are called an error is thrown as these are not found in the global scope.

Chrome: index.js:258 Uncaught ReferenceError: collideLineCircle is not defined

Could be I'm missing something simple.
Many thanks.

move live examples to the p5.js editor within a collection

[Fix/housekeeping] CDN Update issue, [AUTO] Bump Version Tag?

Issue:

Hi @bmoren! i was testing out code with the latest vector pull request merged #28 , looks like CDN's doesn't register the change because the version number hasnt been updated.

Solution:

Add a updated tag to reflect the change

v0.6 -> v0.7 

Link to Example of cdn not updating issue

Photos of issue

Incorrect Documentation for collideRectCircle at GitHub

There is a type in p5.collide2D examples & documentation for collideRectCircle().

Here is the typo, collideRectRect(x, y, width, height, x2, y2, width2, height2 ), it should say, collideRectCircle(x1, y1, width1, height1, cx, cy, diameter). The example uses correct function.

Add unit tests for all function to validate on commit

js unit tests with examples of correct collisions. and examples of non collisions

pros

• reduce time required to make updates to function and not have to manully test each one

cons

• having to write all those unit tests :)

CollideRectPoly has some broken functionality

When using the collideRectPoly method with the internalCollision option set to true, everything works fine until the rectangle is bigger than the polygon. Once the rect is bigger and the polygon is inside the rect, it will not result in an output even with the internalCollision option set. It works fine when the rect is smaller and is inside the polygon though. Not sure if this is intended or not but definitely caused some issues in my project and I had to switch to using collidePolyPoly. Example: https://editor.p5js.org/akgaming1322/sketches/-zQIP8tAj

CollidePointPoint not guaranteed to detect point-point collisions with default buffer

I tried using collidePointPoint in my missile command game @ https://matthew-herman.github.io/personal-website/projects.html, using collidePointPoint without the buffer argument. After pressing spacebar, the aim is to have the blue line terminate when reaching the target white cross. However, using collidePointPoint sometimes does not detect the collision. I coded it as follows:

		if (collidePointPoint(this.xPos, this.yPos, this.xTarget, this.yTarget)) {
			var index = arrFiredMissiles.indexOf(this);
			arrFiredMissiles.splice(index, 1);
			arrExplosions.push(new Explosion(this.xPos, this.yPos));
		}

I think this is due to the use of floating points. I think this behavior with the default buffer should be explained in the readme because it could cause bugs, which are not easy to trace.

Rotating rectangle

How do I detect collision on a rotated rectangle?

collideLinePoly

There is double semicolon (;) on https://github.com/bmoren/p5.collide2D#collidelinepoly 's 2nd line :)

CDN support?

Hey great work on the collision detection routines.

How can we add that to CDN?

test if winding angle is faster for point/poly

https://twitter.com/FreyaHolmer/status/1232826293902888960
http://geomalgorithms.com/a03-_inclusion.html

Can you guys add some functionality?

don't be wrong, it's a pretty helpful plugin for my games. but, it's only detect the collision which only a bool, I have to smuggle some code so I know which direction the collision came in a rect to rect and circle to circle. so then I can use it on my platformer game. Can you guys add that?

increase performance with distSquared instead of dist

When you need to compare distances between points or magnitudes of vectors, try using distance squared.

https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#math-tips

rect collisions don't account for rectMode

When rectMode is set to CENTER, collision with a rect still acts like it is drawn from the top-left.

move documentation to the wiki feature or seperate page?

is this a good idea? maybe a series of md files, or a gh-pages documentation instead?

I think this would clear up the read-me a bit and allow for some more in-depth examples.

add visual examples like collide point/ellipse to all examples