Skip to content
ixfx

Angles

Degrees and radians

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Angle type

Section titled “Angle type”

ixfx also has an Angle type, which is useful for passing around angles and being sure what unit the angle is in. You can read up on gradian, turns and radians. These slightly obscure units for angles be more intuitive to work with in some cases.

type Angle = {
  unit: "deg" | "rad" | "turn" | "grad";
  value: number;
}

For example:

{ value: 90, unit: "deg" }
{ value: Math.PI, unit: "rad" }

Use angleParse to get an Angle from a string. If no unit is given, it’s assumed to be degrees.

angleParse(`100`); // { value: 100, unit: `deg` }
angleParse(100); // { value: 100, unit: `deg` }
angleParse(`100deg`); // { value: 100, unit: `deg` }
angleParse(`100rad`);  // { value: 100, unit: `rad` }
angleParse(`n`);  // ie. 'north' { value: 90, unit: `deg` }

You can convert an raw value or Angle to a different unit with angleConvert. It returns an Angle.

import { angleConvert } from "https://unpkg.com/ixfx/dist/geometry.js"
angleConvert(100, `rad`).value; // Converts 100deg to radians
angleConvert(`2rad`, `deg`).value; // Converts 2radians to degrees
angleConvert({ value: 10, unit: `deg`}, `rad`).value; // Convert 10deg to radian