Any time we display a shape in ProcessingJS, we have to specify a pixel location, a set of `x`

and `y`

coordinates. These coordinates are known as ** Cartesian coordinates**, named for René Descartes, the French mathematician who developed the ideas behind Cartesian space.

Another useful coordinate system known as ** polar coordinates** describes a point in space as an angle of rotation around the origin and a radius from the origin. Thinking about this in terms of a vector:

- Cartesian coordinate—the
*x,y*components of a vector - Polar coordinate—the magnitude (length) and direction (angle) of a vector

However, the drawing functions in ProcessingJS don’t understand polar coordinates. Whenever we want to display something in ProcessingJS, we have to specify locations as *(x,y)* Cartesian coordinates. However, sometimes it is a great deal more convenient for us to think in polar coordinates when designing. Happily for us, with trigonometry we can convert back and forth between polar and Cartesian, which allows us to design with whatever coordinate system we have in mind but always draw with Cartesian coordinates.

The Greek letter θ (theta) is often used to denote an angle, and a polar coordinate is conventionally referred to as *(r, θ)* instead of *(x, y)*. Thus, when dealing with polar coordinates, we'll now use "theta" as the preferred variable name for the angle.

sine(theta) = y/r → y = r * sine(theta) cosine(theta) = x/r → x = r * cosine(theta)

For example, if `r`

is 75 and `theta`

is 45 degrees (or PI/4 radians), we can calculate `x`

and `y`

as below. The functions for sine and cosine in ProcessingJS are `sin()`

and `cos()`

, respectively. They each take one argument, an angle measured in degrees.

```
var r = height * 0.45;
var theta = 45;
// Convert polar to cartesian
```**var x = r * cos(theta);
var y = r * sin(theta);**

This type of conversion can be useful in certain applications. For example, to move a shape along a circular path using Cartesian coordinates is not so easy. With polar coordinates, on the other hand, it’s simple: increment the angle!

Here's how we can make a simple rotating shape using polar coordinate conversion:

This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons Attribution-NonCommercial 3.0 Unported License.

## Share a tip

When naming a variable, it is okay to use most letters, but some are reserved, like 'e', which represents the value 2.7831...## Thank the author

This is great, I finally understand quadratic functions!## Have something that's not a tip or thanks about this content?

## This discussion area is not meant for answering homework questions.