Lines
There are a few components for lines, depending on how you want to construct them.
Line segment
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
} from "mafs"
function LineSegmentExample() {
const point1 = useMovablePoint([-1, -1])
const point2 = useMovablePoint([2, 1])
return (
<Mafs>
<CartesianCoordinates />
<Line.Segment
point1={point1.point}
point2={point2.point}
/>
{point1.element}
{point2.element}
</Mafs>
)
}
Line through two points
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
} from "mafs"
function LineThroughPointsExample() {
const point1 = useMovablePoint([-1, -1])
const point2 = useMovablePoint([2, 1])
return (
<Mafs>
<CartesianCoordinates />
<Line.ThroughPoints
point1={point1.point}
point2={point2.point}
/>
{point1.element}
{point2.element}
</Mafs>
)
}
Point and slope
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
} from "mafs"
function LinePointSlopeExample() {
const point = useMovablePoint([-1, -1])
const slope = useMovablePoint([0, 1], {
constrain: "vertical",
})
return (
<Mafs>
<CartesianCoordinates />
<Line.PointSlope
point={point.point}
slope={slope.y}
/>
{point.element}
{slope.element}
</Mafs>
)
}
Point and angle
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
useStopwatch,
} from "mafs"
function LinePointAngleExample() {
const point = useMovablePoint([-1, -1])
const { time: angle, start } = useStopwatch()
useEffect(() => start(), [start])
return (
<Mafs>
<CartesianCoordinates />
<Line.PointAngle point={point.point} angle={angle} />
{point.element}
</Mafs>
)
}