Skip to content
ixfx

Angles

Degrees and radians

In programming, radian is the preferred unit of angles. There are two functions for converting between the more conventional degree unit (0..360) and radian (0..2π) ⁠

import { degreeToRadian, radianToDegree } from 'https://unpkg.com/ixfx/dist/geometry.js';
degreeToRadian(90);
radianToDegree(Math.PI/2);

Computing angle

From two Points

import { Points } from 'https://unpkg.com/ixfx/dist/geometry.js';
const a = { x: 0, y: 0.1};
const b = { x: 0.4, y: 0.8 };


// Compute angle between points
Points.angleRadian(a, b);

From a Line:

import { Lines } from 'https://unpkg.com/ixfx/dist/geometry.js';
const line = {
  a: { x: 0, y: 0.1},
  b: { x: 0.4, y: 0.8 }
}
// Compute angle of line
Lines.angleRadian(line);

If you want to calculate angular movement from a stream of x,y values, consider the point tracker.

Shapes

Several shapes have functions that can work with angles.

Arc

  • You can create an arc from an angle

Point

  • Rotate point around an origin
  • Calculate angle between two points

Line

  • Rotate by angle
  • Calculate angle of line

Triangle

  • Calculate interior angles
  • Rotate triangle
  • Determine kind of triangle based on angle relations (eg acute, obtuse…)

Arc

An arc is a range of angle. Think of it as a wedge-shaped slice of pizza. A larger arc would be a larger slice of pizza.

There are two functions to calculate the arc between a start and end angle: radianArc & degreeArc . These properly take into account the wrapping of angular values.

When calculating arcs, there are two possible answers depending on the direction of ‘travel’. By default the functions assume clockwise.

import { degreeArc } from 'https://unpkg.com/ixfx/dist/geometry.js';


// Between 0-90 in clockwise direction
degreeArc(0, 90, true); // Yields: 270


// In counter-clockwise direction
degreeArc(0, 90, false); // Yields: 90

Summing

Because angles wrap around, basic math like adding them together can be a bit more complicated. Eg, if we have 350 degrees and add 20 degrees, the result ought to be 10.

Two functions assist in this: radiansSum & degreesSum . They take into account the wrapping of angles and allow you to specify what direction to add in (which allows for subtraction).

import { degreesSum } from 'https://unpkg.com/ixfx/dist/geometry.js';


// Add 20 degrees in clockwise direction
degreesSum(350, 20, true); // Yields: 10


// In counter-clockwise direction
degreesSum(350, 20, false); // Yields: 330