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.

Main content

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?

  • leaf blue style avatar for user Fearless Shadow
    is there a sin^-1 in coding?
    (10 votes)
    Default Khan Academy avatar avatar for user
  • orange juice squid orange style avatar for user ⊷נαςк ρ⊶
    okay so what if I want to change the mouseX and mouseY coordinates to polar coordinates? It would be something like
     mouseR = _____, mouseTheta = ____
    (5 votes)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user Dalendrion
      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.
      (8 votes)
  • duskpin ultimate style avatar for user Peter Apostolidis
    what exactly does rectMode and EllipseMode do?
    aparrently wether it exists or not in the above programm makes no difference
    (2 votes)
    Default Khan Academy avatar avatar for user
  • piceratops ultimate style avatar for user dean bristow
    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?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • winston default style avatar for user subramanian.sachin3
    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?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • old spice man blue style avatar for user Hurtin
    This is off topic, but what does ! do?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • sneak peak green style avatar for user pokemon
    can someone help me with the next challenge?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user janandbillysc
    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?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user k.jennymh
    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.heading = 0;
    this.rotation = 0;
    this.isThrusting = false;
    };

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

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

    this.position.add(this.velocity);
    this.velocity.mult(0.99);
    };

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

    Mover.prototype.render = function() {
    pushMatrix();
    translate(this.position.x, this.position.y);
    rotate(this.heading + PI/2);
    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() {
    this.heading += this.rotation;
    };

    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();
    };
    (2 votes)
    Default Khan Academy avatar avatar for user
  • ohnoes default style avatar for user Noah Mcleod
    Why doesn't
    while (keyIsPressed && keyCode === "z"){
    this.x++;
    }
    work in the challenge
    (1 vote)
    Default Khan Academy avatar avatar for user