## Polar coordinates and circular layouts

Here's a "trick" that has saved me a lot of time and that plenty people have never learned.

As those with graphics experience probably know, when you draw something in a
computer screen you need to give the `x`

and `y`

Cartesian
coordinates where
your object will be drawn. This makes drawing squares easy but, on the other
hand, makes circular layouts difficult.

This is where polar
coordinates come to
the rescue. The idea is simple: instead of giving the coordinates of an object
as a combination of `x`

and `y`

, you give its position as a combination of a
*radius* (that is, the distance to the center of your graphic) and an angle.
This is super convenient for several reasons:

- Making a circular layout is really easy - all you need to do is increase
the angle value while keeping the radius constant. If you want to draw 10
circles, all you do is increase your angle in increments of
`360°/10 = 36° degrees`

(which, for polar coordinates, translates to an angle of`2*Pi/10`

radians). - Drawing a spiral is also easy - all you need to do is increase the radius at every step.
- The equations for going from Cartesian coordinates to polar coordinates and back are trivial.

Here's a Python function that draws `num_circles`

around a middle point with a
distance of `radius`

to said middle point:

```
import math
# Gray circle in SVG format
circle_string = '<circle cx="{}" cy="{}" r="10" fill="gray" />'
def draw_circles(middle_x, middle_y, num_circles, radius):
""" Draws `num_circles` circles around the (circle_x, circle_y) point.
The circles distance to the center is `radius`.
Parameters
----------
middle_x : int
Horizontal coordinates (in pixels) of the center of your graph.
middle_y : int
Vertical coordinates (in pixels) of the center of your graph.
num_circles : int
How many circles will be drawn.
radius : int
Distance (in pixels) from every circle to the center of your graph.
"""
angle_delta = (2*math.pi) / num_circles
for step in range(num_circles):
angle = step * angle_delta
# Equations to turn polar coordinates into Cartesian
x = middle_x + (radius * math.cos(angle))
y = middle_y * (radius * math.cos(angle))
print(circle_string.format(x, y))
```

Polar coordinates have also helped me in a 2D car racing game I never finished. By storing polar coordinates for my car, I could save a lot of work:

- The direction of the front wheels is stored as an angle - steering is as easy as increasing or decreasing this value.
- When drawing the sprite on screen I simply take the base sprite and rotate it by the same angle mentioned above. Now my car is looking in the direction of movement.
- The acceleration is the radius. Accelerating is as easy as increasing this one value.
- To move my car one frame all I need is to convert the angle and radius to Cartesian coordinates and sum them to the current position of the car.

This is one of my favorite graphics tricks, along with the
equations for
turning 3D coordinates into 2D. Problems requiring these solutions don't come
up every day, but when they do you'll be *really* happy about knowing them.