How to rotate two sprites together but keep their movements separate at the same time

[caymanbruce]

I try to rotate a bigger circle which contains a smaller circle. but I want the smaller circle inside the big circle moves independently at the same time when they rotate together to the same direction. How can I do this? For example when I rotate the big one to the right the smaller circle first moves to right a little bit then goes back to its original position in the big circle. When the big circle arrives at the new rotation the smaller circle is also rotated to the new rotation with the same relative position in the big circle. I have set their anchors both to 0.5.

This seems easy but first the sprites don't rotate at the same center point. So when I rotate the big circle the smaller circle won't rotate with it. It will only stays at its own position and rotate at its own center point. If I want it to rotate with the big circle I have to manually change its positions. And that is what causes more trouble. The position doesn't follow the rule newX = (small.x  - big.x) * Math.cos(rotation) and newY = (small.y - big.y) * Math.sin(rotation). It will rotate to the opposite direction. I don't know what is happening. If I put the two sprites into a container I can't set the container's anchor so I can't rotate them together at their center.

[ivan.popelyshev]

I'm so confused!

It seems that you're describing the docking scene from interstellar: youtube.com/watch?v=pB4ZcrATAPg

Draw multiple frames by hand on paper, scan it, and post the scan here. Mark circles with radii to show their rotation. You can also show me you PAINT mad skillz.

 

 

[caymanbruce]

22 minutes ago, ivan.popelyshev said:

I'm so confused!

It seems that you're describing the docking scene from interstellar: youtube.com/watch?v=pB4ZcrATAPg

Draw multiple frames by hand on paper, scan it, and post the scan here. Mark circles with radii to show their rotation. You can also show me you PAINT mad skillz.

 

 

The video you showed me make me dizzy 

Anyway. I am trying to rotate this: (pupils in eyes, currently it is static)

https://codepen.io/caymanbruce/details/VWzVOK/

But I want to be able to rotate it without changing its ability to move the pupils in the eyes. The problem is that I can't rotate the pupils correctly when I rotate the face.

[ivan.popelyshev]

oh sh!@. 

Ok, suppose we have "leftCircle" and "leftPupil" inside . I dont use leftCircle coords there AT ALL, it will work regardless of how you transform the face.

 

leftPupil.pivot.set(-distance, 0); // distance between pupil center and circle center

var p = leftCircle.toLocal(renderer.plugins.interaction.mouse.global);

if (p.x*p.x+p.y*p.y > 1) {
    leftPupil.rotation = Math.atan2(p.y, p.x);
}

UPD. Don't forget to like my posts, both of them.

UPD2. Your description made me dizzy too. Hope you are familiar with original docking scene, what i posted is a parody. Youtube "interstellar docking scene"

 

UPD3. Alternative, no pivot:

var p = leftCircle.toLocal(renderer.plugins.interaction.mouse.global);
var d = Math.sqrt(p.x*p.x+p.y*p.y);
if (d>distance) {
  leftPupil.position.set(p.x/d * distance, p.y/d * distance);
} else {
  leftPupil.position.set(p.x, p.y);
}

 

[caymanbruce]

@ivan.popelyshev Thank you so much! Now comes my second question which is related to pivot point. FINALLY!

I am so confused with the pivot point. But I think it is better you can explain what your code does. 

Line 1: change the pupil's pivot point to the negative value of the distance (pupilCenter.x - faceCenter.x, 0).

Line 2: get the circle's local position within what? I don't know what the "toLocal" function does. I have never used this before.

Line 3 block: what does the if condition mean? 

With regards to pivot point, I have read many articles about that but still don't know how to use it correctly. I have tried setting the pupil's pivot point to faceCenter, then the pupils are rotating on the top left corner of the screen. If I set the pivot point to (-faceCenter.x, -faceCenter.y) the pupil will rotate around the faceCenter. Why does it work like that?

I will like all your posts in this thread if you insist.

Also I have another question related to your "pixi-display" module but I will post in another thread.

[ivan.popelyshev]

Ok, structure: there's faceCircle, which has leftCircle and rightCircle inside, each has one pupil inside.

pivot is the point in local coords of pupil that corresponds to its position in leftCircle. I set position to 0 (center of circle), so relative to pupil its (-distance, 0). Its like im taking pivot in pupil and pin it to pupil's position in circle.

"If" is for case where d is very small, mouse is above the eye.

"toLocal" transfers global mouse coords to coords relative to leftCircle.

 

[caymanbruce]

@ivan.popelyshev I have tested the code with pivot but it seems the pupils are rotating around the leftCircle center. I want the pupils to rotate around face center, and moves to the direction of the mouse simultaneously. Also now the pupils are not always inside the leftCircles.  The alternative no pivot method doesn't work as expected too. The pupil will flick away from the face quickly. Any thoughts?

[ivan.popelyshev]

What do you mean rotate pupil around face? Draw me something please, and make fiddle.

[caymanbruce]

33 minutes ago, ivan.popelyshev said:

What do you mean rotate pupil around face? Draw me something please, and make fiddle.

I mean the left pupil stay inside left Eye circle, right pupil stay inside right Eye circle. When I rotate the face the eyes will face to the direction of the mouse. 

Here is the original position of the pupils. (without your code, only the original pupil moving code)

When rotate the face, (without your code, only the original pupil moving code)

When rotate the face, using your pivot version code.

[ivan.popelyshev]

Then you did something else that is wrong. There are too many ways of screwing it, so either re-read what i wrote about structure, either give me the fiddle

[ivan.popelyshev]

Its possible that you forgot that to change "leftCircle" to "rightCircle" for the other eye  I kinda suppose that you can change things after "ctrl+v"-ing the code. If that's the case, im not that good at telepathy

[caymanbruce]

12 minutes ago, ivan.popelyshev said:

Then you did something else that is wrong. Either re-read what i wrote about structure, either give me the fiddle.

I re-read it and don't see any problem. The code base is too big even if I extract it from my project.

I intentionally only update one pupil just for comparison. If you see the eyes in my codepen.io you will see that the eyes will move to the direction of the mouse. I still want the same effect. This doesn't need to change. But I want the left eye and right eye both face to the mouse when I move the mouse around. Think about slither.io.

[ivan.popelyshev]

I just dont know what are you doing wrong. Make a separate fiddle, dont use your codebase. I understand that it takes time, but I assure you its actually the fastest way for us to achieve something.

[caymanbruce]

@ivan.popelyshev OK I have extracted the code and simplified it here: 

I have commented out the pivot part. Now it only rotates the face not the pupils. But if I use the pivot code it messes up even more.

[ivan.popelyshev]

Oh, i thought that there white circles are actual circles OK, i changed a lot, just run a diff or something like that to understand hats going on. 

1. Moved eyes inside the head

2. changed anchor to (0, 0.5)

3. change rotation that it "jumps" to mouse position (+=)

4. using last event in RAF, to adjust eyes after head rotation.

[caymanbruce]

@ivan.popelyshev That's awesome. It is an example that simple changes affect so much in behaviors. I think I just get lost when I switch my brain from canvas API to PIXI's API. They are totally different! I can't do this without your help.

Your new code doesn't even use pivot this time, why? Also, how can I avoid two pupils cramming together in the middle when I move the mouse across the center point of the face? They are a bit sensitive now. I hope they can just move to the mouse direction without looking like cross eyes.

[ivan.popelyshev]

It kinda gets to you after spending hundreds of hours on those operations in university, then using transforms in both Canvas2d, Threejs, unity, pixi, ...  

I use anchor instead of pivot, its kinda the same when there are no children in the element. I dont know how to fix cross-eyes, there are too many ideas, its up to you