Vectors

Vectors are a handy line-and-arrow shape for visualizing direction and magnitude.

Mafs ships with a small selection of common linear algebra functions (for both vectors and matrices), exposing them as vec. Those utilities are used extensively here.

Code

vue

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

const tip = useMovablePoint([0.4, 0.6])
const vec1 = computed(() => tip.point)
const angle = computed(() => Math.atan2(tip.point[1], tip.point[0]))
const vec2 = computed(() => vec.add(vec1.value, vec.rotate(vec1.value, angle.value)))
const vec3 = computed(() => vec.add(vec1.value, vec.rotate(vec2.value, -2 * angle.value)))
</script>

<template>
    <Mafs>
        <Cartesian />
        <Vector :tip="vec1" />
        <Vector :tail="vec1" :tip="vec2" />
        <Vector :tail="vec2" :tip="vec3" />
        <MovablePoint :ctx="tip" />
    </Mafs>
</template>

Props

Name	Description	Default
tail	Vector2	[0,0]
tip	Vector2	—
stroked	StokedProps	—

stroked is the same as Lines

Vectors ​

Vectors