{"action":"created","issue":{"url":"https://api.github.com/repos/schteppe/p2.js/issues/309","repository_url":"https://api.github.com/repos/schteppe/p2.js","labels_url":"https://api.github.com/repos/schteppe/p2.js/issues/309/labels{/name}","comments_url":"https://api.github.com/repos/schteppe/p2.js/issues/309/comments","events_url":"https://api.github.com/repos/schteppe/p2.js/issues/309/events","html_url":"https://github.com/schteppe/p2.js/issues/309","id":261828488,"number":309,"title":"[QUESTION] Mouse-dragging bodies","user":{"login":"dtognazzini","id":90865,"avatar_url":"https://avatars3.githubusercontent.com/u/90865?v=4","gravatar_id":"","url":"https://api.github.com/users/dtognazzini","html_url":"https://github.com/dtognazzini","followers_url":"https://api.github.com/users/dtognazzini/followers","following_url":"https://api.github.com/users/dtognazzini/following{/other_user}","gists_url":"https://api.github.com/users/dtognazzini/gists{/gist_id}","starred_url":"https://api.github.com/users/dtognazzini/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dtognazzini/subscriptions","organizations_url":"https://api.github.com/users/dtognazzini/orgs","repos_url":"https://api.github.com/users/dtognazzini/repos","events_url":"https://api.github.com/users/dtognazzini/events{/privacy}","received_events_url":"https://api.github.com/users/dtognazzini/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-09-30T08:24:35Z","updated_at":"2017-10-11T06:34:26Z","closed_at":null,"author_association":"NONE","body":"I'm using p2 physics to implement a game in Phaser whereby the user stacks objects by dragging and dropping them with the mouse.\r\n\r\nAll draggable bodies are dynamic. There is also a static, \"ground\" body. All the bodies use polygon shape data.\r\n\r\nMy initial implementation:\r\n1. onMouseDown on a subject object/body, create a new body to track the mouse, the mouse body.\r\n2. create a lock constraint to keep the subject body and mouse body in-sync.\r\n3. onMouseMove update the mouse body position from the mouse position.\r\n\r\nThis keeps the subject body tracking the mouse and colliding with other bodies in the world.\r\n\r\nAs noted in #268, there is some lag between the mouse position and the subject body. The lag is understandable since the mouse body is moved instantaneously and the subject body moves via the constraint, catching up to the mouse body. Moving the mouse really quickly back and forth causes the subject body to really lag and it looks silly - it's like flinging around an object on a rope. 😄 \r\n\r\nThe suggestion in this [comment](https://github.com/schteppe/p2.js/issues/268#issuecomment-264787834) is to \"implement your own \"constraint\", which handles all movement and collisions when dragging the mouse\".\r\n\r\nMy current attempt at not using a constraint is to instead of creating a new body to track the mouse, I move the original body to track the mouse. Of course, when doing this, I can move the mouse faster than the frame rate and forego collision detection thereby moving the subject body through other bodies. With the constraint, this wasn't a problem, since the subject body would react to other bodies in the world as it was being forced to the mouse body position by the constraint.\r\n\r\nIdeally, when the mouse moves really quick, the subject body collides with objects on the way to traveling to the mouse position. \r\n\r\nI'm curious how I could implement that. Is creating a custom p2 constraint the way to go here or would it be better to implement collision detection in a mouse-down event before moving the subject body? It seems like any implementation dependent on a constraint is necessarily constrained to the frame rate and would result in a \"flinging around on a rope\" effect.\r\n\r\nAssuming the non-constraint strategy of handling all movement and collisions when dragging via the mouse, it seems that the next piece of my solution would look something like this:\r\n1. onMouseMove - assume the subject body moves to the mouse position.\r\n2. calculate all overlaps in this position.\r\n3. If there are no overlaps, move the subject body to this position.\r\n4. If there are overlaps, move the subject body on the vector back to the previous position.\r\n5. Loop through steps 2 & 3 until there are no more overlaps.\r\n\r\nAt this point, I think I have the following options:\r\n1. Release the subject body from dragging and have it drop wherever it is.\r\n2. Release the subject body from dragging, add velocities to the body in the direction of the mouse position. \r\n3. Add some \"infinite\" velocities to the body in the direction of the mouse position thereby moving any dynamic objects along the way to the mouse position. If/when a non-dynamic body is detected, release the subject body from dragging.\r\n\r\nThe last option would be equivalent to my initial constraint-based implementation.\r\n\r\nThat was long. If you read through it all, thank you. I'd appreciate any thoughts on these ideas. Mouse-dragging bodies seems like a pretty common interaction and I'm sure somebody has solved this before - I'd prefer to avoid reinventing the wheel.\r\n\r\nThanks!\r\n\r\n "},"comment":{"url":"https://api.github.com/repos/schteppe/p2.js/issues/comments/335697273","html_url":"https://github.com/schteppe/p2.js/issues/309#issuecomment-335697273","issue_url":"https://api.github.com/repos/schteppe/p2.js/issues/309","id":335697273,"user":{"login":"schteppe","id":1063152,"avatar_url":"https://avatars1.githubusercontent.com/u/1063152?v=4","gravatar_id":"","url":"https://api.github.com/users/schteppe","html_url":"https://github.com/schteppe","followers_url":"https://api.github.com/users/schteppe/followers","following_url":"https://api.github.com/users/schteppe/following{/other_user}","gists_url":"https://api.github.com/users/schteppe/gists{/gist_id}","starred_url":"https://api.github.com/users/schteppe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/schteppe/subscriptions","organizations_url":"https://api.github.com/users/schteppe/orgs","repos_url":"https://api.github.com/users/schteppe/repos","events_url":"https://api.github.com/users/schteppe/events{/privacy}","received_events_url":"https://api.github.com/users/schteppe/received_events","type":"User","site_admin":false},"created_at":"2017-10-11T06:34:26Z","updated_at":"2017-10-11T06:34:26Z","author_association":"OWNER","body":"No problem. I hope you can get the result you want. \r\nFor SAT.js you would need to add all the objects you want to collide with, yes."}}
{"actor":{"display_login":"schteppe"}}