Rectangle

Module Geometry.Rects

In ixfx, a rectangle has this shape:

type Rect = {
  height: number
  width: number
}

Rectangles can be positioned, meaning they also have an x & y, denoting the top-left corner:

type RectPositioned = Rect & {
  x: number
  y: number
}

Tip

Since positioned rectangles have x & y properties, they can also be used interchangeably with Points

Once you have data that conforms to Rect or RectPositioned, ixfx has a bunch of functions to help you work with them:

• area - compute area
• cardinal - a point on cardinal direction (n, ne, e, se, sw, w, nw)
• center - center point
• corners - corner locations
• edges - edges of rectangle as Line instances.
• encompass - returns a rectangle as big as source rectangle and also including provided point(s).
• getEdgeX getEdgeY - point on edge of rectangle
• randomPoint - random point within rectangle
• lengths - length of each edge

Distances, intersection

• distanceFromCenter - distance between two rectangle centers
• distanceFromExterior -distance between outer edge of two rectangles
• intersectsPoint - checks whether point intersects rectangle
• isIntersecting - check if rectangle is intersecting with a point
• nearestInternal - finds closest point within or on perimeter of rectangle to a given point

Creating

• fromCenter - create a rectangle from a center
• fromElement - create a rectangle based on size of a HTML element
• fromNumbers - create a rectangle from a series of numbers (opposite of toNumbers)
• fromTopLeft - create a rectangle from its top-left corner
• random - create a random rectangle

Math

• multiply - multiplies one rectangle by another

• multiplyScalar - multiplies all components of a rectangle by a value

• divide - divides one rectangle by another

• divideScalar - divides all components of a rectangle by a value

• dividerByLargestDimension - returns a function that divides a number or point by largest dimension of a rectangle

• subtract
• sum

Etc

• isEmpty - true if rectangle has 0 for height and width. Use Rects.Empty or Rects.EmptyPositioned to get an empty rectangle.
• isPlaceholder - true if rectangle has NaN for height and width. Use Rects.Placeholder or Rects.PlaceholderPositioned to get a placeholder rectangle.