Skip to content
ixfx

Arc

Module Geometry.Arcs

An arc can be thought of as a wedge of a circle. It’s mostly about the edge. So if the wedge is a slice of pizza, the arc is mostly about the pizza crust for a given slice.

type Arc = {
  // Whether arc goes in counter-clockwise direction
  counterClockwise?: boolean


  // Start/end angles (in radians)
  startRadian: number
  endRadian: number


  // Radius of circle
  radius: number;
}

Arcs, like Circles can have optional ‘x’ and ‘y’ properties to give them an origin. If

type ArcPositioned = Arc & {
  x: number, y:number
}

Once you have that there are a bunch of functions to help you work with arcs.

  • bbox - compute bounding box
  • distanceCenter - compute distance of centers of two arcs
  • fromDegrees - Make an arc using degree angles
  • interpolate - compute relative position along circumference. ie. get a position on the pizza crust.
  • length - compute length of arc, ie the length of the pizza crust on the wedge
  • point - calculate a coordinate of arc based on angle. ie. get a position on the pizza crust.
  • toLine - returns a Line connecting start and end points of arc. ie. get a line from one side of the pizza crust to the other.

Importing

Section titled “Importing”
// Sub module
import { Arcs } from "@ixfx/geometry.js"
// Eg: Arcs.bbox();


// Whole module
import * as Geometry from "@ixfx/geometry.js"
// Eg: Geometry.Arcs.bbox();


// From bundle
import { Geometry } from "@ixfx"
// Eg: Geometry.Arcs.bbox();


// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>