How to check for collision detection with rotated polygons using p5.collide2D

p5.js Libraries
1

Hello Processing and p5.js community!

I am having difficulty understanding how to detect when two rotated polygons have collided using the p5.collide2D library. Although my shapes are Rects I have tried to convert them into polygons and rotate them with p5.Vector.rotate() as suggested by this post and based on documentation from the Collision Detection for Processing guide.

Here is a link to my code. .

I know that my method of making polygons 1 and 2 isn’t ideal but it was the best way for me to wrap my head around converting the Rects to vertexes.

How can I detect if these two rotated polygon objects have touched?

Ultimately my goal is to create a sketch with many rotated (rectangular) polygons, lines and circles and delete the polygons that overlap so that none of them touch.

Apologies if it would have been better to continue the other thread instead of making a this one. Thanks for your help!

2

Hello and welcome @cyberia2020, :tada:

There’s an example from p5.collide2D project showing polygon to polygon collision detection. Could that be a good starting point?

If you can get the example to run, it should be relatively easy to adapt to your codebase after that.

3

Thank you for the reply Sven! In the end I was only able to get the collision detection for rotated polygons working when I started using bohnacker p5js-screenPosition library After checking the screen position of my two polygons I was able to successfully detect hits.