Geometric.js uses the geometric primitives points, lines, and polygons.
[0, 0].[[0, 0], [1, 0]]. Because they have endpoints, these are
technically line segments, but Geometric.js refers to them as lines for
simplicity’s sake.[[0, 0], [1, 0], [1, 1], [0, 1]]. Polygons can be closed, meaning the first and
last vertices are the same, or open.You will also encounter angles, areas, distances, and lengths.
geometric.pointRotate(point[, angle[, origin]])
Returns the coordinates resulting from rotating a point about an origin by an angle in degrees. If angle is not specified, defaults to 0. If origin is not specified, the origin defaults to [0, 0].
Point
PointnumberPointRotate a draggable point around a draggable origin and inspect the angle.
geometric.pointTranslate(point[, angle[, distance]])
Returns the coordinates resulting from translating a point by an angle in degrees and a distance. If angle is not specified, defaults to 0. If distance is not specified, defaults to 0.
Point
PointnumbernumberDrag an incoming ray and a surface to see the reflected angle.
Use a point on a circle to compare angle, radius, and right-triangle ratios.
Build the Geometric.js logo from nested hexagons, interpolation, and line intersections.
Drag two points to inspect a line's total length and the length of its first half.
Rotate a draggable point around a draggable origin and inspect the angle.
Returns the angle of a line, in degrees, with respect to the horizontal axis.
number
LineDrag an incoming ray and a surface to see the reflected angle.
Drag two points to inspect a line's total length and the length of its first half.
Rotate a draggable point around a draggable origin and inspect the angle.
geometric.lineInterpolate(line[, clamp])
Returns an interpolator function given a line [a, b]. The returned interpolator function takes a single argument t, where t is a number in [0, 1]; a value of 0 returns a, while a value of 1 returns b. Intermediate values interpolate from a to b along the line segment.
By default, the returned interpolator will clamp the output to the ends of the line segment. You can pass an optional boolean indicating whether to return points outside the line segment if t is greater than 1 or less than 0.
(t: number) => Point
LinebooleanBuild the Geometric.js logo from nested hexagons, interpolation, and line intersections.
Move a point along a line by adjusting the interpolation value.
Rotate a line around an adjustable origin.
geometric.lineLength(line)
Returns the length of a line.
number
LineDrag an incoming ray and a surface to see the reflected angle.
Estimate pi by comparing random points that land in a circle and a square.
Drag two points to inspect a line's total length and the length of its first half.
Rotate a draggable point around a draggable origin and inspect the angle.
geometric.lineMidpoint(line)
Returns the midpoint of a line.
Point
LineDrag two points to inspect a line's total length and the length of its first half.
Rotate a draggable point around a draggable origin and inspect the angle.
geometric.lineRotate(line, angle[, origin])
Returns the coordinates resulting from rotating a line about an origin by an angle in degrees. If origin is not specified, the origin defaults to the midpoint of the line.
Line
LinenumberPointRotate a line around an adjustable origin.
geometric.lineTranslate(line, angle, distance)
Returns the coordinates resulting from translating a line by an angle in degrees and a distance. If angle is not specified, defaults to 0. If distance is not specified, defaults to 0.
Line
LinenumbernumberTranslate a line by angle and distance.
geometric.polygonArea(vertices[, signed])
Returns the area of a polygon. You can pass a boolean indicating whether the returned area is signed, which defaults to false.
number
PolygonbooleanClick to build a polygon and compare its mean center with its centroid.
Draw a polygon and reorder its vertices by winding direction.
geometric.polygonBounds(polygon)
Returns the bounds of a polygon, ignoring points with invalid values (null, undefined, NaN, Infinity). The returned bounds are represented as an array of two points, where the first point is the top-left corner and the second point is the bottom-right corner. For example:
const rectangle = [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
];
const bounds = geometric.polygonBounds(rectangle); // [[0, 0], [1, 1]]Returns null if the polygon has fewer than three points.
Bounds | null
PolygonClick to add polygon vertices and inspect its bounding box.
geometric.polygonCentroid(vertices)
Returns the weighted centroid of a polygon. Not to be confused with a mean center.
Point | []
PolygonClick to build a polygon and compare its mean center with its centroid.
geometric.polygonClose(polygon)
Returns a new polygon that is closed by appending the first point of the polygon to the end if it is not already closed. The input polygon is not modified.
Polygon
PolygonBuild the Geometric.js logo from nested hexagons, interpolation, and line intersections.
geometric.polygonClosed(polygon)
Returns a boolean indicating whether the given polygon is closed. A polygon is considered closed if its first point is identical to its last point.
boolean
Polygongeometric.polygonDifference(polygonA, polygonB)
Returns the portion of polygonA that is outside polygonB. Holes are bridged into a single point array.
Polygon | null
PolygonPolygonDrag two polygons and compare their difference, intersection, union, and xor.
geometric.polygonIntersection(polygonA, polygonB)
Returns the overlapping area shared by two polygons.
Polygon | null
PolygonPolygonDrag two polygons and compare their difference, intersection, union, and xor.
geometric.polygonUnion(polygonA, polygonB)
Returns the union of two polygons. Disjoint results are bridged into a single point array.
Polygon | null
PolygonPolygonDrag two polygons and compare their difference, intersection, union, and xor.
geometric.polygonXor(polygonA, polygonB)
Returns the symmetric difference of two polygons. Split results are bridged into a single point array.
Polygon | null
PolygonPolygonDrag two polygons and compare their difference, intersection, union, and xor.
geometric.polygonHull(points)
Returns the convex hull, represented as a polygon, for an array of points. Returns null if the input array has fewer than three points. Uses Andrew’s monotone chain algorithm.
Polygon | null
Point[]Click to add points and watch the convex hull update.
geometric.polygonInterpolate(polygon[, clamp])
Returns an interpolator function given a polygon of vertices [a, b, ..., n]. The returned interpolator function takes a single argument t, where t is a number in [0, 1]; a value of 0 returns a, while a value of 1 returns n. Intermediate values interpolate from a to n along the polygon's perimeter.
You can pass an optional boolean, which defaults to true, indicating whether to clamp t to the range [0, 1]. When clamp is false, the interpolator applies modular arithmetic to t. If t is less than 0, the interpolator wraps around the polygon's perimeter in reverse. If t is greater than 1, the interpolator continues forward along the perimeter.
(t: number) => Point
PolygonbooleanMove a point along a polygon perimeter by adjusting the interpolation value.
geometric.polygonLength(vertices)
Returns the length of a polygon's perimeter.
number
PolygonClick to draw polygon vertices and measure the perimeter.
geometric.polygonMean(vertices)
Returns the arithmetic mean of the vertices of a polygon. Keeps duplicate vertices, resulting in different values for open and closed polygons. Not to be confused with a centroid.
Point | []
PolygonClick to build a polygon and compare its mean center with its centroid.
geometric.polygonRandom([sides[, area[, centroid]]])
Returns the vertices of a random convex polygon of the specified number of sides, area, and centroid coordinates. If sides is not specified, defaults to 3. If area is not specified, defaults to 100. If centroid is not specified, defaults to [0, 0]. The returned polygon's winding order will be counter-clockwise. Based on an algorithm by Pavel Valtr. See example.
Polygon
numbernumberPoint0]]
Move a point along a polygon perimeter by adjusting the interpolation value.
Generate a random convex polygon and rotate it around its centroid.
Generate three polygon faces with adjustable mouths and vertex counts.
geometric.polygonReflectX(polygon[, reflectFactor])
Reflects a polygon over its vertical midline. Pass an optional reflectFactor between 0 and 1, where 1 indicates a full reflection, 0 leaves the polygon unchanged, and 0.5 collapses the polygon on its vertical midline.
Polygon
PolygonnumberReflect a polygon across its vertical midline.
geometric.polygonReflectY(polygon[, reflectFactor])
Reflects a polygon over its horizontal midline. Pass an optional reflectFactor between 0 and 1, where 1 indicates a full reflection, 0 leaves the polygon unchanged, and 0.5 collapses the polygon on its horizontal midline.
Polygon
PolygonnumberReflect a polygon across its horizontal midline.
geometric.polygonRegular([sides[, area[, center]]])
Returns the vertices of a regular polygon of the specified number of sides, area, and center coordinates. If sides is not specified, defaults to 3. If area is not specified, defaults to 100. If center is not specified, defaults to [0, 0]. The returned polygon's winding order will be counter-clockwise.
Polygon
numbernumberPointBuild the Geometric.js logo from nested hexagons, interpolation, and line intersections.
Move a point along a polygon perimeter by adjusting the interpolation value.
Build a regular polygon, move its center, and rotate it with Observable-style controls.
geometric.polygonRotate(polygon, angle[, origin])
Returns the vertices resulting from rotating a polygon about an origin by an angle in degrees. If origin is not specified, the origin defaults to [0, 0].
Polygon
PolygonnumberPointBuild the Geometric.js logo from nested hexagons, interpolation, and line intersections.
Generate a random convex polygon and rotate it around its centroid.
Build a regular polygon, move its center, and rotate it with Observable-style controls.
Rotate a polygon around the center of the scene.
geometric.polygonScale(polygon[, scale[, origin]])
Returns the vertices resulting from scaling a polygon by a scaleFactor (where 1 is the polygon's current size) from an origin point. If origin is not specified, the origin defaults to the polygon's centroid.
The returned polygon's area is equal to the input polygon's area multiplied by the square of the scaleFactor. To scale the polygon's area by the scaleFactor itself, see geometric.polygonScaleArea.
Polygon
PolygonnumberPointScale a polygon from its centroid.
geometric.polygonScaleArea(polygon, scale[, origin])
Returns the vertices resulting from scaling a polygon by a scaleFactor (where 1 is the polygon's current size) from an origin point. If origin is not specified, the origin defaults to the polygon's centroid.
The returned polygon's area is equal to the input polygon's area multiplied by the scaleFactor. To scale the polygon's area by the square of the scaleFactor, see geometric.polygonScale.
Polygon
PolygonnumberPointScale a polygon's area from its centroid.
geometric.polygonScaleX(polygon, scale[, origin])
Returns the vertices resulting from scaling the horizontal coordinates of a polygon by a scaleFactor (where 1 is the polygon's current size) from an origin point. The vertical coordinates remain unchanged. If origin is not specified, the origin defaults to the polygon's centroid.
The returned polygon's area is equal to the input polygon's area multiplied by the scaleFactor.
Polygon
PolygonnumberPointScale a polygon horizontally from its centroid.
geometric.polygonScaleY(polygon, scale[, origin])
Returns the vertices resulting from scaling the vertical coordinates of a polygon by a scaleFactor (where 1 is the polygon's current size) from an origin point. The horizontal coordinates remain unchanged. If origin is not specified, the origin defaults to the polygon's centroid.
The returned polygon's area is equal to the input polygon's area multiplied by the scaleFactor.
Polygon
PolygonnumberPointScale a polygon vertically from its centroid.
geometric.polygonTranslate(polygon, angle, distance)
Returns the vertices resulting from translating a polygon by an angle in degrees and a distance.
Polygon
PolygonnumbernumberTranslate a polygon by angle and distance.
geometric.polygonWind(polygon[, order])
Returns a polygon in the specified winding order. If an order string is passed as either "cw" or "clockwise", returns a polygon with a clockwise winding order. Otherwise, returns a polygon with a counter-clockwise winding order. Returns null if the polygon has fewer than three points.
Uses the convention that a polygon with a negative signed area has a clockwise winding order, and a polygon with a positive signed area has a counter-clockwise winding order. As a result, the winding order will appear reversed on computer screens where the y-axis is reversed (i.e. 0 is on top rather than on bottom).
Polygon | null
Polygon"cw" | "clockwise" | "ccw" | "counterclockwise"Draw a polygon and reorder its vertices by winding direction.
geometric.lineIntersection(a, b)
Returns a point where line a intersects line b. If the two lines do not intersect, returns null.
Point | null
LineLineBuild the Geometric.js logo from nested hexagons, interpolation, and line intersections.
Drag a line to find where it intersects another line.
geometric.lineIntersectsPolygon(line, polygon)
Returns an array of points where a line intersects a polygon. If the line does not intersect the polygon, returns null.
Point[] | null
LinePolygonDrag a line to find where it intersects a polygon.
geometric.pointInPolygon(point, polygon)
Returns a boolean representing whether a point is inside of a polygon. Uses ray casting.
boolean
PointPolygonEstimate pi by comparing random points that land in a circle and a square.
Drag a point to test whether it is inside a polygon.
geometric.pointOnPolygon(point, polygon[, epsilon])
Returns a boolean representing whether a point is located on one of the edges of a polygon. An optional epsilon number, such as 1e-6, can be passed to reduce the precision with which the relationship is measured.
boolean
PointPolygonnumberClassify points by whether they sit on a polygon edge.
geometric.pointLeftofLine(point, line)
Returns a boolean representing whether a point is to the left of a line.
boolean
PointLineDrag a point to test its position relative to a line.
geometric.pointRightofLine(point, line)
Returns a boolean representing whether a point is to the right of a line.
boolean
PointLineDrag a point to test its position relative to a line.
geometric.pointOnLine(point, line[, epsilon])
Returns a boolean representing whether a point is collinear with a line and is also located on the line segment. An optional epsilon number, such as 1e-6, can be passed to reduce the precision with which the relationship is measured. See also pointWithLine.
boolean
PointLinenumberDrag a point to test its position relative to a line.
Move a point along a line to compare pointOnLine and pointWithLine.
geometric.pointWithLine(point, line[, epsilon])
Returns a boolean representing whether a point is collinear with a line. An optional epsilon number, such as 1e-6, can be passed to reduce the precision with which the relationship is measured. See also pointOnLine.
boolean
PointLinenumberMove a point along a line to compare pointOnLine and pointWithLine.
geometric.pointsEqual(pointA, pointB[, epsilon])
Returns a boolean representing whether two points are equal within an optional epsilon tolerance. If epsilon is not specified, a small default tolerance is used.
boolean
PointPointnumbergeometric.pointToLine(line, point)
Returns the closest position on a line to a point.
Point
LinePointDrag a point to find the closest position on a line.
geometric.pointToPolygon(polygon, point)
Returns the closest position on the perimeter of a polygon to a point.
Point | []
PolygonPointDrag a point to find the closest position on a polygon perimeter.
geometric.polygonInPolygon(polygonA, polygonB)
Returns a boolean representing whether polygonA is contained by polygonB. Points and edges on polygonB's boundary are considered contained.
boolean
PolygonPolygonDrag a polygon to test whether it is contained by another polygon.
geometric.polygonIntersectsPolygon(polygonA, polygonB)
Returns a boolean representing whether polygonA intersects but is not contained by polygonB.
boolean
PolygonPolygonDrag a polygon to test whether it intersects another polygon.
geometric.angleReflect(incidenceAngle, surfaceAngle)
Returns the angle of reflection given a starting angle, also known as the angle of incidence, and the angle of the surface off of which it is reflected.
number
numbernumberDrag an incoming ray and a surface to see the reflected angle.
geometric.angleToDegrees(angle)
Returns the result of converting an angle in radians to the same angle in degrees.
number
numbergeometric.angleToRadians(angle)
Returns the result of converting an angle in degrees to the same angle in radians.
number
number