110. Calculating orbits with simple trigonometry

I was building this project

where I wanted to have planets moving in a circular orbit around a central “sun” at the bottom of the screen, and reverse direction when they touched the edge of the screen. This post shows how to do it.

Let’s set out what we need to do.

I have a circle with a diameter of D

I want it to rotate around a point at bottom of the screen, which is at X ,Y, where I will put a picture of a sun or something

I want the iPad to be in portrait mode so it is tall, rather than wide

The screen isn’t wide or tall enough to fit the whole orbit, so I decided to make the planets reverse direction when they reached the edge, ie keep moving from left to right and back again.

So let’s see how to do it for the example above.

First we need some more information.

The planet moves at S pixels per second

The planet is R pixels away from the central point, ie R is the radius

.
Calculating our position along the orbit path

Let’s start with figuring out how the planet moves round the “sun”. This is how I did it, and no matter how bad your maths, you should be able to follow it, I hope!

Let’s start our planets from the top middle of the screen, directly above the sun. The starting x value is X, the same value as the sun (we are directly above it, remember), and the starting y value is R pixels (the orbit radius) above Y, the position of the sun, ie y = Y + R.

So now if we move in either direction, how will the x and y values change? We know we are moving at S pixels per second, but that doesn’t help us much. It would be much easier to calculate x and y for the planet, if we knew what angle it was at, as shown in the diagram below.
http://instagram.com/p/eKhK0chHfQ/
Above, the planet is shown in two positions, “a” degrees to the left and right of its starting position in the centre. Why is it useful to know what “a” is? Because we can use trigonometry to calculate the new x and y for the planet.

We need to calculate values for the red lines in the picture below, which I’ve labelled dx and dy, the change in the x and y values.
http://instagram.com/p/eKh-bghHQQ/

I know that

sin(a) = dx / R, so dx = R * sin(a)

cos(a) = dy / R, so dy = R * cos(a)

.
This means that we get the right hand position of the planet by adding these values to the sun’s position, which gives us x = X + R * sin(a) and y = Y + R * cos(a)

The left hand position is calculated exactly the same way, except we subtract from X instead of adding to it.

Calculating the speed as a change in angle

So we need to convert our speed of S pixels per second into a change in the angle. This isn’t as difficult as it might seem.

First I calculate the circumference of the planet’s orbit (ie the length of a complete circle around the sun), which is 2 * pi * R. If I divide this by the speed S, it tells me how many seconds it takes to complete an orbit, ie (2 * pi * R) / S.

A complete orbit is 360 degrees, so now we know it takes (2 * pi * R) / S seconds to travel 360 degrees. How many degrees does the planet travel in 1 second?
Degrees per second = 360 * S / (2 * pi * R)

We’re almost done. We redraw the screen 60 times a second, so the number of degrees travelled between each redraw is 1/60 of the figure above, or
Degrees per redraw = 6 * S / (2 * pi * R) , which we’ll call da.

So now we can run the program, and change the angle by da on each redraw, and calculate the new x,y value for the planet. Note – the starting angle is zero for a vertical position, which is very convenient.

Changing direction on hitting the edge

This is really easy and involves NO trigonometry. All we need to do is check if the x or y value goes past the edge of the screen, and if it does, we change direction, which simply means writing
da = -da

Be careful of one little thing, though. The x,y value for the planet is at its centre, so if the planet is moving left, it will start going off the screen when x< D/2 (the radius of the planet). So we have to reverse direction when x gets within D/2 of either side. The same happens if y falls below D/2.

Here is some code that demonstrates.

And if you want to see the full planet project in the video at the top, you’ll find it here. You’ll need to download the planet images and put them in your Dropbox folder if you want it to look pretty, but, you can run all except the last step without the images.

Advertisement