Lines

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs"

function LineSegmentExample() {
  const point1 = useMovablePoint([-2, -1])
  const point2 = useMovablePoint([2, 1])

  return (
    <Mafs viewBox={{ x: [-2, 2], y: [-1, 1] }}>
      <Coordinates.Cartesian />
      <Line.Segment
        point1={point1.point}
        point2={point2.point}
      />
      {point1.element}
      {point2.element}
    </Mafs>
  )
}

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs"

function LineThroughPointsExample() {
  const point1 = useMovablePoint([-2, -1])
  const point2 = useMovablePoint([2, 1])

  return (
    <Mafs viewBox={{ x: [-2, 2], y: [-1, 1] }}>
      <Coordinates.Cartesian />
      <Line.ThroughPoints
        point1={point1.point}
        point2={point2.point}
      />
      {point1.element}
      {point2.element}
    </Mafs>
  )
}

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs"

function LinePointSlopeExample() {
  const point = useMovablePoint([-1, -1])
  const slope = useMovablePoint([0, 1], {
    constrain: "vertical",
  })

  return (
    <Mafs viewBox={{ x: [-1, 1], y: [-1, 1] }}>
      <Coordinates.Cartesian />
      <Line.PointSlope
        point={point.point}
        slope={slope.y}
      />
      {point.element}
      {slope.element}
    </Mafs>
  )
}

import { Mafs, Line, Coordinates, useMovablePoint } from "mafs"

function LinePointAngleExample() {
  const point = useMovablePoint([0, 0])

  return (
    <Mafs viewBox={{ x: [-1, 1], y: [-1, 1] }}>
      <Coordinates.Cartesian />
      <Line.PointAngle
        point={point.point}
        angle={Math.PI / 6}
      />
      {point.element}
    </Mafs>
  )
}