Polar coordinates

Module Geometry.Polar

Polar coordinates use an angle (in radian) and distance from an origin to define a position. This is in contrast to Cartesian coordinates which use an x and y number. A common use case for polar coordinates is arranging or moving things in a circular manner - where logically angle and distance to some origin makes more sense to manipulate than x/y values.

In ixfx, an example of a polar coordinate is:

const polar = { angleRadian: 0.123, distance: 0.5 }

Unlike Cartesian coordinates, polar coordinates are always in reference to some origin. Think of this as the center around which things are placed.

Play with some demos

Conversions

It’s pretty common to need to convert from a polar coordinate to Cartesian, because that’s usually how things get positioned on screen. Use toPoint for this.


import { Polar } from 'https://unpkg.com/@ixfx/geometry/bundle';
Polar.toPoint({ angleRadian: Math.Pi, distance: 0.5 });

To go from a Cartesian point to a polar point, use fromCartesian , along with an origin point that the polar coordinate will be related to.


import { Polar } from 'https://unpkg.com/@ixfx/geometry/bundle';

const origin = { x: window.innerWidth / 2, y: window.innerHeight / 2};
const point = { x: 100, y: 100};
Polar.fromCartesian(point, origin);

Operations

The module Module Geometry.Polar has a few functions for manipulating polar coordinates. A few are listed here.

Polar.rotate / Polar.rotateDegrees : Rotates a given polar coordinate
Polar.isParallel : Returns true if coordinates are parallel

Rays

Module Polar.Ray

ixfx has a notion of polar rays, which allow you to define lines using a combination of a Cartesian origin and a polar coordinate.

For example, the following ray is a line of length 10, has an origin of 100,50 and starts 20 away from that point.

const ray = { angleRadian: Math.Pi, length: 10, offset: 20, origin: { x: 100, y: 50 } }

You can create a ray from a line:

import { Polar } from 'https://unpkg.com/@ixfx/geometry/bundle';
const ray = Polar.Ray.fromLine(someLine);

It will use the ‘a’ point of the line to be the origin of the ray, and the ‘b’ point is used to calculate the angle and distance of the ray. You can also give a second parameter, origin, that will allow offset to be calculated.

Once you have a ray, certain manipulations are easier - for example, having a line project outward from a center point. To do this, you’d just have to adjust the offset property.

Rays can be converted back to Cartesian points with Ray.toCartesian

const line = Polar.Ray.toCartesian(ray); // Yields { a, b } with { x, y } properties