Collision Detection

[Shehroz]

Hy, i need collision detection bubbles with mouse interation. Like this https://www.qurieux.fr/en/

[Rodrigo]

Hi @Shehroz and welcome to the GreenSock forums!

 

That definitely can be animated with GSAP, but collision detection/interaction is a complicated thing which is a bit out of the reach of what GSAP does. You should investigate a physics library in order to accommodate that and, as I mentioned, you can animate things using GSAP. We don't have the time resources to provide this type of solutions since GSAP is not designed for that type of things and we need to keep the forums focused on GSAP related questions.

 

You can check these resources:

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection

 

This guy has a lot of excellent resources (I've watched a few videos and he explains things really well):

Hopefully these help you get started. Let us know if you have any GSAP related issue and remember to create a minimal demo as well.

 

Happy Tweening!

[Shrug ¯\_(ツ)_/¯]

2 hours ago, Rodrigo said:

collision detection/interaction is a complicated thing which is a bit out of the reach of what GSAP does. You should investigate a physics library in order to accommodate that

 

👆Indeed. That site appears to be using Matter.js for the collision detection logic / effects.

 

As Rodrigo pointed out in his post, you can benefit greatly from understanding the general logic of basic collisions yourself before using a complex library like Matter.js to go further.

[SteveS]

Not as well established, but something I have been playing with is Rapier.js

 

Its documentation isn't the best yet and there's few resources on it, but it is still pretty cool if you want to try it out.

[Shehroz]

13 hours ago, Shrug ¯\_(ツ)_/¯ said:

 

👆Indeed. That site appears to be using Matter.js for the collision detection logic / effects.

 

As Rodrigo pointed out in his post, you can benefit greatly from understanding the general logic of basic collisions yourself before using a complex library like Matter.js to go further.

how can i add stars as bodies in matter.js

[GSAP Helper]

Anyone is welcome to answer your question, but please beware that these forums are only supposed to be for GSAP-specific questions. Matter.js is a 3rd party library that's totally unrelated to GSAP, so you probably won't get many answers here for things like that.

 

Good luck with your project. 

[Shrug ¯\_(ツ)_/¯]

Matter.js is not a GSAP product, so there is no support provided for it here, that is out of the scope of this forum. However you will find many example demos on their site, CodePen, etc., all the links can be found on their site. Maybe take a look at using sprites (again many examples can be found for this) in doing so you can use any desired shape or object.

 

All the best on your project.