Polygons

Polygons take a number of points and create a closed shape.

import * as React from "react"
import {
  Mafs,
  Theme,
  Polygon,
  CartesianCoordinates,
  useMovablePoint,
} from "mafs"

function SimplePoint() {
  const a = [2, 0]
  const b = [-2, 0]
  const c = useMovablePoint([0, 2])

  return (
    <Mafs>
      <CartesianCoordinates />
      <Polygon
        points={[[c.x, -c.y], a, b]}
        strokeStyle="dashed"
      />
      <Polygon
        points={[c.point, a, b]}
        color={Theme.blue}
      />
      {c.element}
    </Mafs>
  )
}

Floors

If you're making a physics animation, it can be helpful to include some kind of "floor". Use a polygon for this. Make it green if you want it to look like grass.

import * as React from "react"
import {
  Mafs,
  Theme,
  Polygon,
  CartesianCoordinates,
  useMovablePoint,
  Vector,
} from "mafs"

function SimplePoint() {
  const velocity = useMovablePoint([3, 3])

  return (
    <Mafs xAxisExtent={[-1, 10]} yAxisExtent={[-0.5, 5]}>
      <CartesianCoordinates />
      <Polygon
        color={Theme.green}
        fillOpacity={0.9}
        points={[
          [-1000, 0],
          [1000, 0],
          [1000, -1000],
          [-1000, -1000],
        ]}
      />
      <Vector tip={velocity.point} style="dashed" />
      {velocity.element}
    </Mafs>
  )
}