# Moving objects in a circular path, and also moving the whole group

I have eight elements distributed in a circle, with a common center.

All of them move along a circular path, just like the poster in this question asked:

Moving an object in a circular path

This solves half of my question, however I also need to oscillate the whole group of units from side to side, with an easing, or linearly, depending on the design.

I've been playing around with it, but I can't figure how to add or modify what I assign to the X and Y value so the objects move like if they were contained inside a Sprite, and I would be moving that Sprite.

Edit.:

I found that this:

var newX:Number = Math.cos(_angle) * 100;
var newY:Number = Math.sin(_angle) * 100;

y = _startingY + newY;

x = _startingX + newX + _incrementX;

_angle += 2 * Math.PI / 180;

_incrementX += 1 + Math.sin(_angle);


Gets close enough to what I need, however it still doesn't work. In theory, if I subtract the sin f the angle it should fix the rotation compensation.

Edit2: The stars moving in circle:

What happens when I just add a linear increment to each element: (it would represent in the code above doing _incrementX++)

• What does _incrementX represent? Might be helpful to post more of your code. I'm having a hard time following what's going on from the snippet you posted. – tandersen Oct 2 '15 at 1:23

This is the concept: You add "rotation movement" and "linear movement" together, and you get "rolling movement". Once you calculated all vectors for rotation movement, then you can simply add linear vectors to your results.

All you have to do to be able to freely move your items in a circle around the screen is:

1. Measure the x and y distance from 0, 0 to the center of the circle. Put the values into variables.

2. Set the x and y positions based off of the sin and cos values.

3. Add the x and y from the first step to the current positions.

Is this what you're looking for?

• If I understand you correctly, that would equal to do: _incrementX ++; And it doesn't work. – Artemix Oct 1 '15 at 21:32
• Maybe I'm not understanding what you're looking for correctly? Because transforming the objects so that the center of them is located at 0, 0 basically takes the entire circle calculating out of the equation so that you can move around the center however you please, and then just add the center x and y pos back to the objects respectively without distorting the circle... if what I stated in my first sentence in the answer is what you want, then I can make an example when I get time - but it will be in C#. – Scratchifier Oct 1 '15 at 21:49
• I'm using AS3, and I could easily just addchild the sprites to a sprite container, and move the container, problem solved. But for my particular use, I need to manipulate each element as an individual. – Artemix Oct 1 '15 at 22:22
• Well, then why can't you make two lists of 8 integers (or whatever you use for position), one named XposAdd and one named YposAdd. Also make one list of the 8 sprites, and for each sprite, after calculating the position of each sprite within the circle, set the position to the initial position plus the corresponding item in the add list for each axis? – Scratchifier Oct 1 '15 at 22:45
• If I'm still missing the point of what you're saying, please by all means add a diagram. This will also help other people who view the question figure out the problem more easily in the future even if I guess at what you're trying to do at some point. – Scratchifier Oct 1 '15 at 22:46

Check this out, it may help: http://gizma.com/easing/

The best way to do this, if you're not changing the destinations every frame, is to once calculate the positions, and store it in an array. Then use the values from that array. This is a great optimization because you won't have to call the math functions every frame.

I note that your stars appear one after the other on your second animation. It suggests you indeed create them at different time, and let that be the cause of your objects be at different angles at some time.

Unfortunately, that means they will have individual _incrementX values. You made _incrementX be a function (mathematically speaking) of the angle, while you want it to be a function over time, and have each object have its own time-to-angle relationship.

Try initializing them all at the same time, but with different values for _angle.

If that doesn't work for you, I suggest you introduce an invisible 'group center' that provides base (x,y) coordinates and each object then does

y = _center.Y + newY;
x = _center.X + newX;


and let _center.X be the things that increments over time.