Points
There's not much to this one: points can be rendered at a location (x, y). Plain old <Point>
s cannot be dragged—for that, see Movable points.
import { Mafs, Point, CartesianCoordinates } from "mafs"
function SimplePoint() {
return (
<Mafs>
<CartesianCoordinates />
<Point x={1} y={1} />
</Mafs>
)
}
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>
)
}