Fancy Parabola ​

<script setup lang="ts">
import { Mafs, Cartesian, Transform, OfX, MovablePoint, useMovablePoint, AlignType } from "mafs-vue"
import { computed } from 'vue'

const a = useMovablePoint([-1, 0], {
    constrain: AlignType.HORIZONGTAL,
})
const b = useMovablePoint([1, 0], {
    constrain: AlignType.HORIZONGTAL,
})

const k = useMovablePoint([0, -1], {
    constrain: AlignType.VERTICAL,
})
const mid = computed(() => (a.point[0] + b.point[0]) / 2)
const fn = (x: number) => (x - a.point[0]) * (x - b.point[0])
</script>

<template>
    <Mafs>
        <Cartesian :subdivisions="2" />
        <OfX :y="(x) => (k.point[1] * fn(x)) / fn(mid)" />
        <MovablePoint :ctx="a" />
        <MovablePoint :ctx="b" />
        <Transform :translate="[(a.point[0] + b.point[0]) / 2, 0]">
            <MovablePoint :ctx="k" />
        </Transform>
    </Mafs>
</template>