Angle and Coordinates

We saw in the Basics of Coordinate Geometry that if I have some point (x, y), and I want to move from there to the right by some amount d, this just adds to my x coordinate; I end up at (x + d, y). Or, if I want to move down some amount d, I am adding to my y coordinate, ending up at (x, y + d). This idea of moving some distance, in some direction, is called a displacement.

It is possible to combine displacements in two directions at once. For example, suppose that I know the the top of a rectangle is at (10, 30) and it is 100 wide and 50 tall. If I want to figure out where the opposite corner is, I think to myself, "I can get to the opposite corner by moving 100 to the right, and 50 down. This means I have to add 100 to the x of the corner, and 50 to the y." I end up at (10 + 100, 30 + 50) = (110, 80).

Of course, if I can move to the right, I can move to the left as well, since moving a negative amount to the right is the same as moving to the left. Similarly, I can add a negative amount to my y to move up.

The thing you should notice is that right now, we only have rules for how to move some distance that is exactly along an axis: either straight to the right or left, or straight up and down. What if I need to go in some other direction, some diagonal direction?

Direction in math is expressed as an angle. This page will talk about two ways to measure angles: using degrees, which most likely is what you are used to, and using radians, which is what the computer uses. Then, once we know how to numerically specify a direction with an angle, we will come back to this problem of how to move some distance from a point at some arbitrary angle. Finally, we will briefly mention one of the most useful formulas in coordinate geometry: a way to rotate a point by any angle around another point.

Warning: In a possibly self-defeating attempt to try to minimize confusion, I will do all this math in a regular coordinate system, not in computer screen coordinates. That means upside down from the computer; the computer has flipped over the x axis, with every y becoming -y.

Table of Contents

1. Degree and radian angles

Angles in math are measured starting from the x axis, and going counter-clockwise from there. A full circle is 360°, meaning that every quarter-circle is 90°. This means that 0° is another way to say the direction "right", 90° means "up", 180° is "left", and 270° is "down". An angle like 150° would be in the second quadrant, pointing up and to the left, and would be somewhat more to the left than it was up because 150° is closer to 180° than to 90°.

There is another system of angles that you need to know about, because it is what the computer uses in many of its functions. It is called the radian angle system. The only difference between radians and degrees is how many of them are in a circle: there are 360° in a circle, but only 2π radians. So, an angle of 120°, which is a third of a circle, is 2π/3 radians.

2. Angular displacements

Angles allow us to talk about displacements that are in some direction other than up, down, left, and right. Suppose that I tell you that I am going to go 50 pixels at an angle of 60°. You could figure out from this that I am going diagonally, some combination of up and right.

The actual distance that I go in the x and in the y would have to be some fraction of 50, something less than the full distance, because I am not going directly in either direction. You can probably guess that the distance I would go in the y would be greater than the distance in the x, because 60° is closer to vertical than horizontal. But how do I find out what fraction of 50 I go in the x, and what fraction in the y?

In math, there are special functions to calculate exactly these pieces of information. They are called the "sine" and "cosine" functions.
If I start at (x, y) and go a distance d at an angle a, I will end up at:

In Java, there are methods called Math.sin() and Math.cos() that will find the sine or cosine of an angle. Unfortunately, they work with angles in radians, so I need to convert my angles before I put them in.

So, suppose that I want to draw a line that starts at (10, 20) and goes 50 pixels away at an angle of 30°. To do this in Java, I need to convert the angle into radians; 30° is π/6 radians. I would write something like this:

Location point1 = new Location(10, 20);
Location point2 = new Location(10 + 50 * cos(Math.PI / 6), 20 + 50 * Math.sin(Math.PI / 6));
new Line(point1, point2);

Let's make this more general by writing a program that will draw a line from the center of the screen, to a point that is some distance and angle away:

public class AngleLine {
   double d = 50;
   double angle = 80 * Math.PI / 180;
   Location center = new Location(canvas.getWidth() / 2, canvas.getHeight() / 2);
   Location point2 = new Location(center.getX() + d * Math.cos(angle), center.getY() + d * Math.sin(angle));
   new Line(center, point2, canvas);

Here, I could change the value I assign to d or angle, and it would draw a different line.

The nice thing about this angle formula is that it allows me to think about direction and distance instead of x and y. Suppose that I want to make a program that draws a line sweeping in a circle around the screen. This is an easy problem to think about in these terms: I am keeping the distance constant, and increasing the angle bit by bit:
Your browser doesn't do Java.
RotatingLine.java

public void onMouseMove(Location point) {
   // Every time the mouse moves, increase the angle a little bit, recalculate the end point,
   // and redraw the line
   canvas.clear();
   angle = angle + Math.PI / 180;
   Location point2 = new Location(center.getX() + d * Math.cos(angle), center.getY() + d * Math.sin(angle));
   new Line(center, point2, canvas);
}

3. Rotating a point around another point

What we have seen so far allows you to start from any point and move some distance, in some direction. I am able to make something like the rotating line example because I know the angle I am currently at, and I keep increasing that angle and recomputing the point. But what if all I have is two points - one at the center, one somewhere else on the screen - and I want to rotate the other point around the center by some angle?