Is there a way to add collision detection between layers? For example, if there are 2 circle layers which are draggable within the canvas, can we do something that they do not intersect each other, but instead bounce off when they collide?
Yes! Eelco Lempsink is your man for this. ;-)
Also following ...
Perhaps you can check the x & y values of both the layers. If they are the same, bounce
To provide an alternative solution, you can use force layouts and D3.js to achieve this.
The big challenge is limiting the calculations that need to be performed. This is one way to do it. Drag the boxes, and when they touch they'll turn red – http://share.framerjs.com/7v939uur00j7/
Here is what I found - it is possible to include p5js in framer.https://www.facebook.com/groups/framerjs/permalink/709139179213156/
I played a bit with collision once, but it’s pretty tricky to get correct in Framer itself. I would love to see what you come up with Dhruv!
Here are two prototypes of my experiments:- Very (very) rough bounce on collision (with squares): http://share.framerjs.com/ht8zup3hy9pg/- Collision detection for circles (relatively easy, using Pythagoras’ theorem): http://share.framerjs.com/kh1efuyueee4/
Thanks Eelco! Ideally, I'd like to be able to create simulations like the ones I have created here - http://dhruv.work/Kin And the combine them with gravity using the phone's accelerometer. The dating app - "happn", uses something very similar.
Thats is a good start for 2D collision detection https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection