Vector fields

Vector fields take a function that is passed a point (x, y) and returns a vector at that point. Vectors are then artificially scaled down (for legibility) and plotted on the coordinate plane. You must also pass a step to indicate how dense the vector field is.

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

const VectorFieldExample: React.VFC = () => {
  const a = useMovablePoint([0.6, 0.6])

  return (
    <Mafs>
      <CartesianCoordinates subdivisions={2} />
      <VectorField
        xy={(x, y) => [
          y - a.y - (x - a.x),
          -(x - a.x) - (y - a.y),
        ]}
        step={0.5}
        xyOpacity={(x, y) =>
          (Math.abs(x) + Math.abs(y)) / 10
        }
      />
      {a.element}
    </Mafs>
  )
}