Collision control and smooth movement

Question

I was playing around creating 2 magnets 🧲 🧲 with collision control and smooth movement as well as draggable... but instead I have radical movement and the draggable sticks to the right. Any help

https://sololearn.com/compiler-playground/W8BaumBgi8eV/?ref=app

Answer 1

Bob_Li I'm thinking 🤔
In short there will be no action just recognition that they are together or simply a short touch side to side on either will separate them ( or something along that lines )

Answer 2

Bob_Li in the second code you identified bang! on collision top and bottom as "attrack" and bang! on side to side as "repel"

Answer 3

Sharpneli
I would have to rethink this whole setup, then. This simulated scenario sounds easier to implement in a canvas element, where objects are easier to manipulate. My current setup was adapted from BroFar's code, which is DOM element based. These are really constrained on how you can manipulate them.

So, yes. Maybe a canvas and OOP version.

Maybe you can give us a sneak peek at how the code is supposed to look like? I have seen simulations but the code is often too convoluted for me...

Answer 4

maybe something like this?
but this feels more like snapping rather than attracting...

https://github.com/lf2com/magnet.js/blob/master/README.md
https://sololearn.com/compiler-playground/WJxUuwHAegC0/?ref=app

Answer 5

About the drag issue, you have to substract half of the element's size. So for x, half of its width, and for y half of its height.

The magnet has W:30 and H:50, so you have to use -15px for width and -25px for height.

That way the drag is aligned in the middle. Or you can use something like magnet.clientWidth/2 and magnet.clientHeight/2 to avoid using fix numbers

For a smoother movement, you could try and add this style: transition:left 0.5s, top 0.5s; to both magnets with js, when collision is detected

var newLeft = touch.pageX - 15 + "px";
var newTop = touch.pageY - 25 + "px";

Answer 6

Bob_Li while I like the smoothness there is no reaction when the magnets are side by side repel or stable when they are on each end ( top and bottom )...
dealing with attrack and repel and they can't set on each other...

🍇 Alex Tușinean 💜 I like both approaches but magnets 🧲 are still getting stuck on far right ...

Answer 7

BroFar
attraction is still on the TODO list. Ironing out the collision detection was harder than I thought. Maybe you can pitch in? 😁

I am not sure of the intended effect ...
is the other block supposed to be attracted and move towards the block being dragged, or is it the dragged block that moves to the stationary block? Do they stay attached afterwards? How do you separate them? So many questions...