Vectors

Vectors are a handy line-and-arrow shape for visualizing direction and magnitude. To do actual vector math (linear algebra), we recommend utilizing the vec-la package, as in this example:

import * as React from "react"
import { Mafs, CartesianCoordinates, useMovablePoint, Vector } from "mafs"
import * as vec from "vec-la"

function VectorExample() {
  const tip = useMovablePoint([0.4, 0.6])

  const vec1 = tip.point
  const angle = Math.PI / 2 - Math.atan2(tip.x, tip.y)
  const vec2 = vec.add(vec1, vec.rotate(vec1, angle))
  const vec3 = vec.add(vec1, vec.rotate(vec2, -2 * angle))

  return (
    <Mafs>
      <CartesianCoordinates />
      <Vector tip={vec1} />
      <Vector tail={vec1} tip={vec2} />
      <Vector tail={vec2} tip={vec3} />

      {tip.element}
    </Mafs>
  )
}