Vector fields | Display | Mafs: React components for interactive math

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 { Mafs, VectorField, CartesianCoordinates, useMovablePoint } from "mafs"

function VectorFieldExample() {
  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>
  )
}

Props

<VectorField ... />

Name	Description	Default
`xy`	`(x: number, y: number) => [number, number]`	—
`xyOpacity`	`((x: number, y: number) => number)`	`() => 1`
`step`	`number`	`1`
`opacityStep`	`number`	`xyOpacity === xyOpacityDefault ? 1 : 0.2`
`color`	`string`	`var(--mafs-fg)`