Mafs

Appearance

On this page

Plots ​

Mafs supports numerically plotting a number of function types by passing in plain JavaScript functions.

Functions of x and y ​

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, OfX, OfY, Theme } from 'mafs-vue'
const sigmoid1 = (x: number) => 2 / (1 + Math.exp(-x)) - 1
</script>

<template>
    <Mafs :height="300">
        <Cartesian />
        <OfX :y="Math.sin" :stroked="{ color: Theme.blue }" />
        <OfY :x="sigmoid1" :stroked="{ color: Theme.pink }" />
    </Mafs>
</template>

Props

<OfX ... />

NameDescriptionDefault
y
(x: number) => number
—
minSampleDepth
number

The mininum recursive depth of the sampling algorithm.

—
maxSampleDepth
number

The mininum recursive depth of the sampling algorithm.

—
stroked
StokedProps
—

Props

<OfY ... />

NameDescriptionDefault
x
(y: number) => number
—
minSampleDepth
number

The mininum recursive depth of the sampling algorithm.

—
maxSampleDepth
number

The mininum recursive depth of the sampling algorithm.

—
stroked
StokedProps
—

stroked is the same as Lines

Inequalities of x and y ​

Inequalities represent the region less than or greater than one or two functions. Mafs allows you to plot the region between two functions, or a function and a constant. The inequality can be a function of x or y.

You cannot provide an x and a y prop to Inequality—it will throw a runtime exception. Similarly, you cannot pass conflicting inequality operators—like both < and ≤.

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, Inequality, MovablePoint, Theme, useMovablePoint } from 'mafs-vue'

const point = useMovablePoint([0, -1])
</script>

<template>
    <Mafs :height="300">
        <Cartesian />
        <Inequality :x="{
            '<=': (y) => Math.cos(y + point.point[1]) - point.point[0],
            '>': (y) => Math.sin(y - point.point[1]) + point.point[0]
        }" :color="Theme.blue" />

        <Inequality :y="{
            '<=': (x) => Math.cos(x + point.point[0]) - point.point[1],
            '>': (x) => Math.sin(x - point.point[0]) + point.point[1]
        }" :color="Theme.pink" />

        <MovablePoint :ctx="point" />
    </Mafs>
</template>

Props

<Inequality ... />

NameDescriptionDefault
x
{ ">"?: FnX; "<="?: FnX; "<"?: FnX | undefined; ">="?: FnX | undefined; } | undefined
—
y
{ ">"?: FnY; "<="?: FnY; "<"?: FnY | undefined; ">="?: FnY | undefined; } | undefined
—
color
string
var(--mafs-fg)
weight
number
2
strokeColor
string
var(--mafs-fg)
strokeOpacity
number
1
fillColor
string
var(--mafs-fg)
fillOpacity
number
0.15
minSampleDepth
number
10
maxSampleDepth
number
14
upperColor
string
var(--mafs-fg)
upperOpacity
number
1
upperWeight
number
2
lowerColor
string
var(--mafs-fg)
lowerOpacity
number
1
lowerWeight
number
2

Parametric functions ​

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, Parametric, MovablePoint, useMovablePoint, } from 'mafs-vue'
import { computed } from 'vue'
import clamp from 'lodash/clamp'

const point = useMovablePoint([0.5, 0], {
    constrain: ([x]) => [clamp(x, -1, 1), 0]
})
const k = computed(() => point.point[0] * 25 * Math.PI)
</script>

<template>
    <Mafs :height="300" :viewBox="{ x: [-1, 1], y: [-1, 1] }">
        <Cartesian :subdivisions="4" />
        <Parametric :t="[0, k]" :xy="(t) => [Math.cos(t), (t / k) * Math.sin(t)]" />
        <MovablePoint :ctx="point" />
    </Mafs>
</template>

Props

<Parametric ... />

NameDescriptionDefault
xy
(t: number) => vector2

A function that takes a t value and returns a point.

—
t
vector2

The domain t between which to evaluate xy.

—
minSampleDepth
number

The minimum recursive depth of the sampling algorithm.

8
maxSampleDepth
number

The maximum recursive depth of the sampling algorithm.

14
stroked
StokedProps
—

Vector fields ​

Vector fields take a function that is passed a point [x, y] and returns a vector at that point. Vectors are then artificially scaled down (for legibility) and plotted on the coordinate plane. You must also pass a step to indicate how dense the vector field is.

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

const a = useMovablePoint([0.6, 0.6])
</script>

<template>
    <Mafs>
        <Cartesian :subdivisions="2" />
        <VectorField :xy="([x, y]) => [
                y - a.point[1] - (x - a.point[0]),
                -(x - a.point[0]) - (y - a.point[1])
            ]
            " :step="0.5" :xyOpacity="([x, y]) => (Math.abs(x) + Math.abs(y)) / 10" />
        <MovablePoint :ctx="a" />
    </Mafs>
</template>

Props

<VectorField ... />

NameDescriptionDefault
xy
(point: vector2) => vector2
—
xOpacity
(point: vector2) => number
() => 1
step
number
1
Opacitystep
number
xyOpacity === xyOpacityDefault ? 1 : 0.2
color
string
var(--mafs-fg)

Render quality ​

Function sampling ​

OfX, OfY, and Parametric use numerical methods for evaluating a function and attempting to plot it accurately. The approach works well for most functions, but it's far from perfect.

Mafs samples functions by by recursively subdividing the domain until an estimated error threshold is met (or the recursion limit limit is reached).

Sampling depth ​

To force more subdivisions (and therefore improve quality), the minSamplingDepth and maxSamplingDepth props can be tuned. Increasing minSamplingDepth can help when you want to ensure more subdivisions and improve accuracy, and lowering maxSamplingDepth can help improve performance. These two props should be tuned to meet your needs.

Here's an example of a common "stress test" function for plotters, sin(1/x). The top plot has the default sampling depths, while the bottom has minSamplingDepth increased to 15. Neither approach is perfect, but the bottom render is indistinguishable from a perfect plot.

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, OfX } from 'mafs-vue'

const fn = (x: number) => Math.sin(1 / x)
</script>

<template>
    <Mafs :height="300" :viewBox="{ x: [-1 / 32, 1 / 32], y: [-3.5, 3.5], padding: 0 }" :preserveAspectRatio="false">
        <Cartesian />
        <OfX :y="(x) => fn(x) + 1.5" />
        <OfX :y="(x) => fn(x) - 1.5" :minSamplingDepth="15" />
    </Mafs>
</template>

Vector fields ​

Vector field rendering quality can be tuned with the step prop. This declares the spacing between arrows, so lowering it will decrease performance.