about irregular collision (javascript)

[david1977]

Is gasp having the feature for irregular collision ? Or Is javascript having the ability doing irregular collision?

thank you!
 

[GreenSock]

No, sorry, irregular collision detection is not something GSAP handles. 

[OSUblake]

What are you trying to do? You might not need to use something complicated. Here's the most common types of 2D collision detection.

 

Axis-Aligned Bounding Box (AABB)

Checks if there is a gap between two rectangles. Axis-aligned means that there is no rotation. This is what GSAP uses for Draggable's hit test. 

 

Circle Collision

Checks for a collision between two circles by comparing the sum of their radii with the distance between the center of the two circles. Really simple to do...

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

Separating Axis Theorem (SAT)

Can detect a collision between two convex shapes. Probably the most commonly used type of advanced collision detection. I can't recommend any libraries that do this, but there are 1000s of them. Just search around for a JavaScript version. Here's a demo that shows all the intersections between 20 rotating boxes.

See the Pen 40b18190c60161960d8d12ff4fa71d1d?editors=0010 by osublake (@osublake) on CodePen

 

Ray Casting

This can be used to detect collisions on concave and convex shapes, but it can also be very slow depending on how many rays you cast. I used a little library called PolyK to do this in the past. It also has a couple other methods that you could use like Point Intersection and Closest Edge. Note that those demos are using WebGL, so don't expect that type of performance if you're not.

http://polyk.ivank.net/?p=demos&d=raycast

[PointC]

Those are great Blake.

 

I especially like the simplicity of the circle one. That could be quite handy. One might imagine that would be more complex, but your pen certainly shows how easily it can be done.

 

Very nice sir.

[david1977]

Thanks for help.

 

Besides having polygon collision test, could it have another collision like this picture?

[OSUblake]

@@PointC
 
The circle collision detection shocks everyone by it's simplicity. I actually learned about it from that HTML5 Animation book I recommended. It's pretty easy to understand when you see a comparison. 
 

 
 
@@david1977
 
Those are pretty complicated shapes. First off, most computer graphics are drawn as polylines/polygons, so don't let the terminology throw you off. You can approximate curves as a bunch of lines and do hit testing that way. Here's an example of that. Turning the tolerance down makes it more accurate.

See the Pen jbVPqw by osublake (@osublake) on CodePen

 
There's a couple of libraries that might help you do collision detection that way.
 
Paper.js
This is probably going to be easiest way to get started doing collision detection on shapes like that.
http://paperjs.org/examples/hit-testing/
 
JavaScript Clipper
This can be used to do collision detection similar to Paper.js, but it's harder to use. It was originally written in C#, so the syntax doesn't follow JavaScript naming conventions, and for precision you have to convert everything to an integer, so you can't use decimal points.
https://sourceforge.net/projects/jsclipper/
 
Check Pixel Color
Another way to do hit detection is to draw your shapes onto a canvas as a solid color and check the color of the pixels you want to test. I wrote a little post about that here. In the future, SVG and Canvas should let you do something similar to do this, but browser support is limited for the time being.
http://greensock.com/forums/topic/12502-draggable-throwprops-dom-hit-detection/?p=52101
 
Rachel Smith also wrote a post about using this technique here.
http://codepen.io/rachsmith/post/getting-getimagedata
 
From this example...

See the Pen dGYWxP by rachsmith (@rachsmith) on CodePen

 
The snowflakes land on Shia's outline by checking the color of the pixels against this image. If the pixel doesn't have a color, there is no collision.

 
 
Broad and Narrow Phase
For advanced collision detection, it also a good idea to split the processing up into two different phases, broad and narrow. From MDN...

 

Collision Performance

While some of these algorithms for collision detection are simple enough to calculate, it can be a waste of cycles to test *every* entity with every other entity. Usually games will split collision into two phases, broad and narrow.

Broad Phase
Broad phase should give you a list of entities that *could* be colliding. This can be implemented with a spacial data structure that will give you a rough idea of where the entity exists and what exist around it. Some examples of spacial data structures are Quad Trees, R-Trees or a Spacial Hashmap.

Narrow Phase
When you have a small list of entities to check you will want to use a narrow phase algorithm (like the ones listed above) to provide a certain answer as to whether there is a collision or not.

 
QuadTrees are probably the most common way of splitting the detection up into phases. Here's an example of that. You can see in the bottom right corner the number of candidates, which would be the shapes you need to check. All the other entities can be ignored.

http://timohausmann.de/quadtree.js/dynamic.html

 

Here's the repo for that library.

https://github.com/timohausmann/quadtree-js/
 

[david1977]

Thank you, David.

 

What the kind and professional man you are !