If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

### Course: Computer programming - JavaScript and the web>Unit 5

Lesson 6: Angular Movement

# Polar coordinates

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 = 75;
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.

## Want to join the conversation?

• is there a sin^-1 in coding?
• The inverse sine function is referred to as asin.
• okay so what if I want to change the mouseX and mouseY coordinates to polar coordinates? It would be something like
`` mouseR = _____, mouseTheta = ____``
• You can use trigonometry to convert polar coordinates into rectangular coordinates.
You can use the Pythagorean theorem and the inverse tangent function to convert polar into rectangular coordinates.

``var toRectCoords = function(r, theta) {    return {        x: r * cos(theta),        y: r * sin(theta),    };};var toPolarCoords = function(x, y) {    return {        r: sqrt(x*x + y*y),        theta: atan2(y, x),    };};``

Then you can use these in `mouseMoved` and `mouseDragged` to change your variables `mouseR` and `mouseTheta`.
• what exactly does rectMode and EllipseMode do?
aparrently wether it exists or not in the above programm makes no difference
• Using the rectMode() function, you can change where you draw it at. Meaning, if the center of the rectangle is drawn at the coordinates, the corner, bottom- you can adjust it! The ellipseMode() function does the same thing.
• Say you're trying to make a program where something rotates about a fixed point to always point at the mouse. How would you adapt the x, y, r, and theta variables in this program to work around the mouse?
• Here's my code for the challenge:
var r = 0;
var theta = 0;

draw = function() {

background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);

var x = r * cos(theta);
var y = r * sin(theta);

fill(0, 0, 0);
line(0, 0, x, y);
ellipse(x, y, 10, 10);
popMatrix();
theta += 1;
r += 0.01;
};
It's saying that it doesn't want to erase what's on the previous frame. How do you do that?
• 1. Remove `background(255, 255, 255)`
2. Remove `line(0, 0, x, y)`
3. Make the `0.01` on line 18 bigger
• This is off topic, but what does ! do?
(1 vote)
• ! is the logical NOT operator. Remember that `===` means 'exactly equal to'? Put the NOT operator in front to reverse the meaning: `!==` means 'is NOT equal to'.
• can someone help me with the next challenge?
• This article begins with a discussion of Cartesian coordinates (components of a vector, x and y) and polar coordinates (length,r, and vector,theta). Another way of specifying a point, I'll call is "tangental" coordinates for want of a better name. For example, a tangent line drawn to a circle of "origin" at 270 degrees intersects a tangent line drawn at 30 degrees, forming an angle of 60 degrees. This point might be named (270,30). Together with another point (300,60) and a third (300,30), these three points are the vertices of a 45, 45, 90 degree right triangle.

Is this of interest to anyone, or should I peddle my thoughts elsewhere?
• I've been stuck on the Asteroids spaceship project for some time. Mover doesn't propel when 'z' is pressed. Can anybody identify what I did wrong?

var mover;

var Mover = function() {
this.position = new PVector(width/2, height/2);
this.velocity = new PVector(0, 0);
this.acceleration = new PVector(0, 0);
this.r = 20;
this.rotation = 0;
this.isThrusting = false;
};

Mover.prototype.isThrusting = function(b) {
this.isThrusting = b;
};

Mover.prototype.update = function() {
if (this.isThrusting) {
this.thrust();
}

this.velocity.mult(0.99);
};

Mover.prototype.thrust = function() {
var force = PVector.fromAngle(this.heading);
force.mult(0.1);
};

Mover.prototype.render = function() {
pushMatrix();
translate(this.position.x, this.position.y);
noFill();
stroke(255);
triangle(-this.r, this.r, this.r, this.r, 0, -this.r);
popMatrix();
};

Mover.prototype.checkEdges = function() {
if (this.position.x > width + this.r) {
this.position.x = -this.r;
} else if (this.position.x < -this.r) {
this.position.x = width + this.r;
}
if (this.position.y > height + this.r) {
this.position.y = -this.r;
} else if (this.position.y < -this.r) {
this.position.y = height + this.r;
}
};

Mover.prototype.setRotation = function(angle) {
this.rotation = angle;
};

Mover.prototype.turn = function() {
};

var keyPressed = function() {
if(keyCode === RIGHT) {
mover.setRotation(0.1);
} else if (keyCode === LEFT) {
mover.setRotation(-0.1);
} else if (keyCode === 90) {
mover.thrust(true);
}
};

var keyReleased = function() {
if(keyCode === LEFT || keyCode === RIGHT) {
mover.setRotation(0);
} else if (keyCode === 90) {
mover.thrust(false);
}
};

var mover = new Mover();

var draw = function() {
background(0);
mover.render();
mover.turn();
mover.update();
mover.checkEdges();
};
``while (keyIsPressed && keyCode === "z"){this.x++;}``
• Key codes are numbers, not strings. `keyCode` values are only reliable in the key handling functions, and not in `draw`. Try
``while (keyIsPressed && key.toString() === "z"){``