Ellipses ​

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

const hintRadius = 3
// This center point translates everything else.
const translate = useMovablePoint([0, 0])

// This outer point rotates the ellipse, and
// is also translated by the center point.
const rotate = useMovablePoint([hintRadius, 0], {
    // Constrain this point to only move in a circle
    constrain: (position) => vec.withMag(position, hintRadius)
})
const angle = computed(() => Math.atan2(rotate.point[1], rotate.point[0]))

const width = useMovablePoint([-2, 0], {
    constrain: AlignType.HORIZONGTAL
})
const height = useMovablePoint([0, 1], {
    constrain: AlignType.VERTICAL
})
</script>
<template>
    <Mafs :height="400" :viewBox="{ x: [-3, 3], y: [-3, 3] }">
        <Cartesian />
        <Transform :translate="translate.point">
            <Transform :rotate="angle">
                {/* * Display a little hint that the * point is meant to move radially */}
                <Circle :center="[0, 0]" :radius="hintRadius"
                    :filled="{ strokeStyle: 'dashed', strokeOpacity: 0.3, fillOpacity: 0 }" />
                <Ellipse :center="[0, 0]" :radius="[Math.abs(width.point[0]), Math.abs(height.point[1])]" />
                <MovablePoint :ctx="width" />
                <MovablePoint :ctx="height" />
            </Transform>
            <MovablePoint :ctx="rotate" :color="Theme.blue" />
        </Transform>
        <MovablePoint :ctx="translate" :color="Theme.orange" />
    </Mafs>
</template>