Position of child relative to parent

[Sandro Magi]

Consider the following snippet:

https://jsfiddle.net/65y9qraz/

The field inputs are bound to the x, y, and angle of the child element. The child's angle is easy to calculate relative to the parent, the x and y coordinates would require a more complicated calculation given arbitrary rotations. Is there already a utility function for this?

Sandro

[starwed]

I don't believe there are any utility functions intended for this, though there are a couple of approaches that might work.

Depending on what you're doing, attaching the default collision polygons (i.e. rectangles) to both entities might let you effectively reuse Crafty's existing rotation calculations.  As the entities rotate, the x/y coordinate of each corner of the rectangular collision polygon will be updated, so you can just compare those coordinates between the two entities.

Also, if you associate a child entity with a parent using attach(), then any motion/rotation of the parent will affect the child.  The math happening internally here is (I think) pretty similar to what you'd want.

[Sandro Magi]

You are correct that I need the results of the internal math that Crafty is doing. I could do the calculations myself, but thought there might be some reusable function. I might take a look at Crafty's internals, but in principle the geometry isn't that complicated.

The collision approach probably won't work since the child entity may be outside of the parent's boundaries, but that was a good thought. I'm also using the collision detection for other purposes, so distinguishing those would be unnecessarily difficult. Thanks for the suggestions!

Sandro

[Sandro Magi]

I've come back to finish this project, but I've been having trouble figuring out the transformation I need. This basically encapsulates what I'm doing: https://jsfiddle.net/qw2odmLb/

The idea is to track the child's position relative to the parent while dragging or while manually inputting coordinates and rotations. All the relevant logic is in the update() function. However, it doesn't work properly in the face of rotations on the parent, so I'm clearly missing something. To see the issue, do the following:

 1. Set the parent angle to 30. Crafty correctly rotates.

 2. Set the child x or y to 1 and back to zero. My update function places child incorrectly.

Changing x and y of child moves it along the correct vector so the angle calculation I have is definitely correct, but the positions are way off. I've specified the rotation origin as the center, so I've tried to rotate the child's top left corner around the parent's midpoint, which should be (parent._x+parent._w/2, parent._y + parent._h/2) correct? This comes out totally wrong though.

I would very much appreciate if you could spot what I've done wrong here, as I've been banging my head against this for hours.

Sandro

On Wednesday, 6 June 2018 21:24:15 UTC-4, starwed wrote:

[Sandro Magi]

As another data point, if you set the parent angle to 30 and the child to -30, the top left corners of child and parent overlap perfectly. The offset I'm missing must be due to the child's rotation about its center somehow.

Sandro

[Sandro Magi]

Naturally, I figured it out a few minutes after posting this. *sigh* Updated example with the fix:

https://jsfiddle.net/qw2odmLb/4/

Sandro