Points

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

function SimplePoint() {
  return (
    <Mafs>
      <CartesianCoordinates />
      <Point x={1} y={1} />
    </Mafs>
  )
}

import * as React from "react"
import { Mafs, FunctionGraph, Point, CartesianCoordinates, useMovablePoint } from "mafs"
import range from "lodash.range"

function PointsAlongFunction() {
  const fn = (x: number) => (x / 2) ** 2
  const sep = useMovablePoint([1, 0], {
    constrain: "horizontal",
  })

  const points =
    sep.x != 0
      ? range(0, 10 * sep.x, sep.x).concat(
          range(0, -10 * sep.x, -sep.x)
        )
      : []

  return (
    <Mafs yAxisExtent={[-1.3, 4.7]}>
      <CartesianCoordinates />

      <FunctionGraph.OfX y={fn} opacity={0.25} />
      {points.map((x, index) => (
        <Point x={x} y={fn(x)} key={index} />
      ))}
      {sep.element}
    </Mafs>
  )
}