Sign in to follow this  
caymanbruce

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites
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 :blink:

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.

Share this post


Link to post
Share on other sites

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);
}

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

pupil.png

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites
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)

upload.png

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

upload2.png

When rotate the face, using your pivot version code.

upload3.png

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ^_^

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.