Animation

useStopwatch allows you to start and stop a real-time clock for doing neat things like physics simulations.

Pass startTime (defaults to 0) or endTime (defaults to Infinity) to constrain the stopwatch.

Work in progress

Animation is quite underdeveloped in this library both from a performance and feature standpoint. It could use things like keyframing, easing, and sequencing.

Code

vue

<script setup lang="ts">
import { Mafs, Cartesian, Point, useStopwatch } from 'mafs-vue'
import { onMounted } from 'vue'

const { time, start } = useStopwatch()

onMounted(() => {
    start()
})
</script>

<template>
    <Mafs :height="500">
        <Cartesian />
        <Point :x="Math.cos(time * 2 * Math.PI)" :y="Math.sin(time * 2 * Math.PI)" />
    </Mafs>
</template>

Animation ​

Animation