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

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 2

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 3

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 4

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...

Answer 5

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 6

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 7

Chris Coder
The bangs were just temporary test to see if the collision function was actually working.
This thread had become so long that the earlier posts were collapsed.

The collision is going to eventually be used inside the attract function as a conditional trigger.
Now the focus is on how to make the attraction behave properly.
As of now, it's just snapping on top... and dragging while the other is attached is wonky...

Answer 8

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 9

Bob_Li
Like poles repel: If you bring the north poles of two magnets together, they will push away from each other.  
Opposite poles attract: If you bring the north pole of one magnet near the south pole of another, they will pull towards each other.  

Answer 10

BroFar
but how to separate them again? Also, making the magnets bipolar would make the code crazy complex...😁

Answer 11

This is actually an interesting idea. I might try some stuff tomorrow

Answer 12

It's much difficult to simulate magnets with just css so the strange output should be expected.

I would suggest you model the actual force or simply use the gravitational force equation to simulate movement

Answer 13

Bob_Li Sharpneli
Now you two have me thinking about
pendulum magic with 2 magnets

Answer 14

BroFar
Keep the ideas coming... 😅

Answer 15

Cool idea, BroFar . I managed to smooth out the movement. I attempted to make it as simple as possible. Hopefully this code is easy to follow. I have an idea for the collision and physics. Sharpneli is on the right track about including a force model. And the collision can be borrowed from a game collision.  I'll get to it later if no one beats me to it. 

Update, I see Bob_Li has a working collision model. Thats awesome!
https://sololearn.com/compiler-playground/WyYFS586CkX1/?ref=app

Answer 16

Bob_Li Where is the code that had the bangs?

Answer 17

Hey brofar, I've attempted to stay true to your vision by keeping your styles. But I had to make several revisions to the code logic. I've added a working collision with the use of getBoundingClientRect(). I added references in the comments for more info. I created a function to handle the magnet rotation, and I put comments nearly everywhere for others who want to learn. Also some references for the more advanced methods. I didn't have to convert ints or floats. Perhaps it will become an issue later. I think using Canvas will be better since it's better for animations. But that means we will have to rewrite the entire JS again. 
https://sololearn.com/compiler-playground/W6X0aZEx9FS9/?ref=app

Answer 18

Chris Coder it's nice, I like the rotation features but seems like there's no magnetic features implemented yet right?

I can move the bar close to each other and the color switches but they don't get snatched right before I do that. How brofar code is

Answer 19

Hey BroFar , have you made any progress with your code?

Answer 20

There is also the issue with comparing floats in a boolean expression. The concensus is to use

parseFloat((n).toFixed(2)).

Note the parenthesis nesting. It is crucial..😁

yeah, js is weirder than they say.

I was tinkering with this, and seem to work...
https://sololearn.com/compiler-playground/WxXAukA6Isy8/?ref=app