Polar Functions

CURVES! CURVES! CUUURVES!
Or rather, polar curves, from polar functions.

What is a polar function, first of all?

Well, on a Cartesian Graph, you have 2 “location variables:” x and y (x,y).

A cartesian graph. Courtesy of Wikipedia.

There is another type of graph: a polar graph. a polar graph has 2 “location variables” also: r and theta (r,θ). θ is usually measured in radians, which goes from 0 to 2π. 2π radians = 360º.

A polar graph. Courtesy of Socratic.

Get the point?

In computers, cartesian graphs are used by default. But there is a way to make polar functions on Processing. What you have to do is convert the cartesian coordinates to polar coordinates using sine and cosine.

First, we set up some universal variables that will be handy later on: r and theta.

float theta, r;

After that, we set up the program.

void setup() {
  size(600, 600);
  background(20);
  r = 100;
  theta = 0;
  noStroke();
}

Then, we start drawing. We also declare the part where the x and y variables will be set to the polar equation.

void draw() {
  float x = r*sin(theta);
  float y = r*cos(theta);

We want the equation to be centered, so we translate everything to the middle. Also, to show the function, we make a bunch of circles. We also want to increase the theta variable. Here is the rest of the draw() function:

  pushMatrix();
  translate(width/2, height/2);
  ellipseMode(CENTER);
  fill(255);
  ellipse(x, y, 10, 10);
  popMatrix();
  theta += 0.1;
}

This is the output:

The output is a circle!

What if we changed the equations for the x and y?

We would have to change the r. We could do this by using a variable called xc.

Add this after you do theta += 0.1;:

r = xc+xc*sin(theta);

Also, for fun, replace fill(255); with this:

fill(random(255));

This makes it a random shade from black to white.

Altogether, the draw() function should look like this:

void draw() {
  float x = r*cos(theta);
  float y = r*sin(theta);
  
  pushMatrix();
  translate(width/2, height/2);
  ellipseMode(CENTER);
  fill(random(255));
  ellipse(x, y, 10, 10);
  popMatrix();
  theta += 0.1;
  float xc = 100;
  r = xc+xc*sin(theta);
}

This is the output:

The output.

As you might know, this is a cardioid. Read my post about cardioids here.

Here’s another variation of r:

r = xc*sin(2*theta);

this is the output:

The output.

This is what is known as a rose curve.

One more!

r = xc+tan(xc+theta);

The output…?

Pretty cool, right?

One more thing:

I was looking at “cardioid in processing” on google.

THIS showed up near the top of the page:

That’s right. That’s my post.

OH MY FREAKING GOSH.
THIS IS AWESOME!

Stick around for more, my dudes.