+ 7

Collision control and smooth movement

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

15th Sep 2024, 2:49 AM
BroFar
BroFar - avatar
36 Réponses
+ 4
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 )
15th Sep 2024, 3:37 PM
BroFar
BroFar - avatar
+ 4
Bob_Li in the second code you identified bang! on collision top and bottom as "attrack" and bang! on side to side as "repel"
15th Sep 2024, 3:43 PM
BroFar
BroFar - avatar
+ 4
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...
16th Sep 2024, 9:46 AM
Bob_Li
Bob_Li - avatar
+ 3
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
15th Sep 2024, 4:04 AM
Bob_Li
Bob_Li - avatar
+ 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";
15th Sep 2024, 8:42 AM
🍇 Alex Tușinean 💜
🍇 Alex Tușinean 💜 - avatar
+ 3
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 ...
15th Sep 2024, 3:16 PM
BroFar
BroFar - avatar
+ 3
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...
15th Sep 2024, 3:22 PM
Bob_Li
Bob_Li - avatar
+ 3
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.  
15th Sep 2024, 3:29 PM
BroFar
BroFar - avatar
+ 3
Bob_Li Sharpneli Now you two have me thinking about pendulum magic with 2 magnets
16th Sep 2024, 12:52 AM
BroFar
BroFar - avatar
+ 3
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...
16th Sep 2024, 8:29 AM
Bob_Li
Bob_Li - avatar
+ 3
Canvas is hard maybe. When you check for collision, it's better you check seperate. First I check X then if it overlap, I move both magnet by +(overlapX/2) and -(overlapX/2) Then I check Y and if it overlap, I move both magnet +(overlapY/2) and -(overlapY/2)
19th Sep 2024, 5:22 AM
Sharpneli
Sharpneli - avatar
+ 2
BroFar but how to separate them again? Also, making the magnets bipolar would make the code crazy complex...😁
15th Sep 2024, 3:33 PM
Bob_Li
Bob_Li - avatar
+ 2
😁😁😁 I like how things usually START out simple... I also realized parseInt exists ...😅 so forget my complicated method for parsing floats to int...
15th Sep 2024, 3:44 PM
Bob_Li
Bob_Li - avatar
+ 2
This is actually an interesting idea. I might try some stuff tomorrow
15th Sep 2024, 7:45 PM
🍇 Alex Tușinean 💜
🍇 Alex Tușinean 💜 - avatar
+ 2
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
16th Sep 2024, 12:13 AM
Sharpneli
Sharpneli - avatar
+ 2
BroFar Keep the ideas coming... 😅
16th Sep 2024, 12:57 AM
Bob_Li
Bob_Li - avatar
+ 2
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
16th Sep 2024, 5:25 AM
Chris Coder
Chris Coder - avatar
+ 2
Bob_Li Where is the code that had the bangs?
16th Sep 2024, 6:51 AM
Chris Coder
Chris Coder - avatar
+ 2
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
16th Sep 2024, 9:29 PM
Chris Coder
Chris Coder - avatar
+ 2
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
16th Sep 2024, 9:42 PM
Sharpneli
Sharpneli - avatar