Jump to content


about irregular collision (javascript)

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

thank you!


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.


  • Like 4
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Thanks for help.


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

Link to comment
Share on other sites

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. 
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.
This is probably going to be easiest way to get started doing collision detection on shapes like that.
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.
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.
Rachel Smith also wrote a post about using this technique here.
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.



Here's the repo for that library.


  • Like 3
Link to comment
Share on other sites

Thank you, David.


What the kind and professional man you are !

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.