Unsure whether to use GH Actions or CircleCI...

Currently the Vectors doc page https://mafs.dev/guides/display/vectors looks like this on my iPhone:

• Add TSDoc comments to all components and props
• Spit out some kind of documentation to embed on the website, perhaps a Gatsby plugin can help out here

Cartesian coordinates aren't enough—gotta draw some circles too.

Zooming can currently be limited, but not panning. Limiting panning would be pretty easy—would just be a matter of limiting the extent to which the camera matrix can be translated in Mafs.tsx.

Let's let people pinch that canvas!

Need to increase the margin between the nav items because when we hover any item the background colour of the hover item gets coincide with the background colour of the active item

A long time ago I read a cool developer blog post: Orbit Tessellation. It discusses how Kerbal Space Program 2 will adaptively increase the number of points used to draw an ellipse based on the position of the camera, thus solving an issue in KSP1 where orbits would appear blocky up close.

It would be interesting to try to use this approach when plotting functions. Especially parametric functions.

At the moment, FunctionGraph.OfX uses a naive approach: roughly every 2 pixels (really depending on zoom) gets a sample. You can increase the quality by setting quality="medium" or quality="high", which increase the subsampling to 1x and 2x, respectively.

FunctionGraph.Parametric uses an even more naive approach, just taking 1000 samples from t₀ to t_f, and allowing the user to increase the sample size if they want.

This approach is flawed, because it is completely undynamic. It doesn't care how sharp a function curves, or how long a parametric line is. A better approach would be to continually tesselate the line down to a reasonable limit, like how they show in the KSP2 blog post:

See #48 — need to make sure Parcel is transpiling this out.

Any example code to write a function y = f(x) and given a point on the function, move it along?

Eg: given y = 2x + 5 and the starting point (0,5), how would I use mafs to move the (0,5) point along the y = 2x + 5 function

This was mentioned by @sritchie in the Discord—the unpkg deployment of Mafs includes font.css, and the @imports there reference the computer-modern package, but unpkg doesn't seem to resolve them to the computer-modern unpkg package.

MovablePoints can be initialized at any arbitrary point, even when they have a constrain function applied. The MovablePoint should instead be constrained upon initialization, and also when setPoint is called.

Instead of having a viewport be based around "extents" (which isn't a great name imo), it would be nice to also allow users to say "center the viewport around this point, and zoom to this level". Perhaps setting an aspect ratio could be supported too.

When specifying a color other than the default for the Text component, the edges of the text become fuzzy and appears bold

For example, here's what the default text color looks like:

<Text
    x={yTip[0]}
    y={yTip[1]}
    attach="e"
    attachDistance={25}
>
    Y
</Text>

And here's how it appears with a different color specified:

<Text
    x={yTip[0]}
    y={yTip[1]}
    attach="e"
    attachDistance={25}
    color={Theme.green}
>
    Y
</Text>

This happens because when a custom color is set, the Text component uses that color as its stroke instead of using the background color (line https://github.com/stevenpetryk/mafs/blob/7d86d79c916606c6ea8e48dad7fce69b1e5377b4/src/display/Text.tsx#LL66). However this causes the size of the text to inflate and become fuzzy because of the simulated shadow effect from the mafs-shadow class not playing nice with colours other than white.

Here's how the above example looks like with the stroke set back to mafs-bg:

Proposed solution: Update Text to still use the mafs-bg color as the text stroke, even when a custom color is specified.

I'm interested in aping this library in vue, but without a license file I don't know whether that is permissible.

Themes are supported using CSS custom properties:

--mafs-bg: black;
--mafs-fg: white;

--mafs-origin-color: var(--mafs-fg);
--mafs-line-color: #555;
--grid-line-subdivision-color: #222;

--mafs-red: #f11d0e;
--mafs-orange: #f14e0e;
--mafs-yellow: #ffe44a;
--mafs-green: #15e272;
--mafs-blue: #58a6ff;
--mafs-indigo: #7c58ff;
--mafs-violet: #ae58ff;
--mafs-pink: #ee00ab;

export const theme = {
  foreground: "var(--mafs-fg)",
  background: "var(--mafs-bg)",

  red: "var(--mafs-red)",
  orange: "var(--mafs-orange)",
  green: "var(--mafs-green)",
  blue: "var(--mafs-blue)",
  indigo: "var(--mafs-indigo)",
  violet: "var(--mafs-violet)",
  pink: "var(--mafs-pink)",
}

But it might be nice to indicate how to swap out the Mafs default theme (right now, the main way is to overwrite these custom properties on .MafsView, as in the home page riemann sum example.

Once api-extractor supports TypeScript 4.0+, it should be used to bundle build/index.d.ts into one type declaration. As it stands, VS Code and other editors sometimes try to load things incorrectly because they think you can load mafs/display/Point, for example.

It's silly to expect people to model lines as functions (and it's wasteful computationally), so having a few primitives would be helpful:

• Line through two points
• Line at point and angle (from x-axis)
• Line at point with slope
• Vertical line (maybe)
• Horizontal line (maybe)

Color schemes could be implemented as CSS variables or as React props, or both. Unclear which will be the most ergonomic for folks. Right now there are several CSS variables, but colors are placed randomly throughout the codebase, so that'll need to be fixed. It would also be great if there were some type of standard color scheme.

• Decide on how to model color schemes
• Consolidate all colors in to the color scheme
• Define a nice palette of default colors to choose from (so that "blue" isn't CSS blue, but fancy blue)

This is probably due to my inexperience running someone else's react project, and not specifically mafs, however...

Whenever I run the command "yarn start" I always get this error:

All I ran was "yarn" before.

I have some edits I made on my fork of mafs that I want to test before making a pull request. However, I can't test at this injunction!

As a more general issue, it would be nice to include how to setup on the README.

More generically: how do I test my changes before making a pull request!

Points and Lines are first-class objects in mafs. I think curved lines should also be first class objects (I see an example on Bézier curves, perhaps there's a way to exact the curved lines from there, but it looks quite complicated).

Currently, users cannot pan using the keyboard. This is an easy fix, just something I neglected in the beta.

A lot of the times, vector arrows can get way too long. It would be nice to be able define a function, say opacity(x,y) that would return an opacity value for each arrow.

Steps to reproduce

1. Zoom Mafs component
2. Click on the grid with onClick={(point, event) => { console.log(point) }
3. Observe that while the x value is accurate, the y value is wrong

I read official doc and
put
@import "mafs/index.css";

into index.css but

Failed to compile

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Can't resolve 'mafs/index.css' in '/Users/plato/dev/math_tutorial/vector_test/src'

How to import css?

Initial render: the <svg> is rendered with width={1}, causing it to appear very stretched for a single frame.

On the next frame: the useResizeObserver hook returns an actual value for the width and the canvas renders correctly.

See https://react-mnnsnw.stackblitz.io. In this example I render a whole bunch of points to slow the rendering down and emulate a heavy visualization, such that the issue is more easily visible.

Besides looking a little bit janky, this can also cause significant performance issues for page loads, since the <Coordinates.Cartesian> component might render tens of thousands of lines and labels. This performance issue is the actual problem I'm facing in my project.

Potential solutions

• I think the simplest solution is to just not render the <svg> on the first frame, before the resize observer is ready. This way the first actual render will have the correct dimensions.

• If the user passes both width and height, it should be possible to omit the resize observer altogether and just use the provided dimensions. This is the approach used by other libraries (e.g. react-window) and also better matches the API of the <canvas> and <svg> elements.

  If you're interested in this solution, you might point users to the AutoSizer component from react-virtualized (also published as a standalone package: https://github.com/bvaughn/react-virtualized-auto-sizer). Their description makes it sounds like what you're looking for here:

  Many react-virtualized components require explicit dimensions but sometimes you just want a component to just grow to fill all of the available space. The AutoSizer component can be useful in this case.

The CartesianCoordinates component renders the grid pattern only out to some huge power of 10. Probably won't affect any early adopters, but should be fixed—I was just too lazy to do the math. Theoretically if you panned millions of pixels to a particular side, the grid would vanish.

Error:

My React app dependencies

Internally, Mafs uses React Context to keep track of how "math-space" (x and y on the coordinate plane) maps to "pixel-space" (x and y in the SVG element). The contexts are ScaleContext, MapContext, CoordinateContext, and PaneContext. The usage of each should be documented. I also think the number of contexts might be able to be reduced, and the number of parameters in each object can be simplified using linear algebra (i.e., I can have a MatrixContext that just encapsulates the entire linear transformation in one array).

When building math visualizations, it's common to have mouse-based interactions. It's worth warning people, especially ed-tech people, that they must accommodate keyboard users to comply with various parts of WCAG.

I'd love to see mafs working in Observable but the standard require doesn't seem to work.
I've tried some of the ideas in https://observablehq.com/@observablehq/how-to-require-stubborn-modules to no avail.

Care to write a minimal working example there?

To avoid doing annoying math (ironically), I draw little boxes at the tip of vector field vectors rather than proper triangles. I need to change that, just haven't been able to prioritize it.

For example, here's the docs:

Here is VS Code:

I should probably find a way to use VS Code's syntax highlighter/parser for these examples. All these regex-based highlighters seem to suck for the most part.

When importing vec, you may get the following error from your bundler:

export 'vec' (imported as 'vec') was not found in 'mafs'

This is a known error in Mafs version 0.8.0. Upgrade to 0.8.1 to fix it. Leaving this open in the meantime for visibility.

LaTeX could be implemented with a number of libraries. I'm partial to KaTeX, and it's what the original demo page uses, but there are certainly others.

Not sure how sophisticated peoples' LaTeX would get.

Leaving out the integration for now. If anything it'll be implemented as a separate file, like:

import { Latex, latex } from "mafs/latex"

<Latex expression={latex`\frac{1}{2}`} />

(the latex template tag would be a wrapper around String.raw to avoid JavaScript escaping backslashes)

I think it'd be nice to add some sort of API for easily integrating webgl/threejs/react-three-fiber if someone wants to embed some really performance-intensive stuff into Mafs.

Much like the Mafs SVG stuff, this would really just be a matter of making sure that a WebGL canvas "has its bearings" and knows how to map things from coordinate space to pixel space.

An interesting idea would be to move Function and VectorField to WebGL to improve performance. VectorField would especially benefit. We do, however, lose server side rendering with that approach.

Side-note: I would never want Mafs to be pure WebGL, because it's really difficult to make that accessible. I enjoy how Mafs is keyboard accessible by default at the moment.

Kinda hard to spot, but there's something reminiscent of horizontal tearing on iOS safari when panning around.

Hi I want to open a prompt for the users to change the points of a line or polygon manually. Currently there is no onClick functions for your elements.

Parcel seems to be rolling up all exported TypeScript types into the mafs module. So you can write code like this:

import { OfY } from "mafs"

<OfY ... />

And TypeScript doesn't show any errors, but in reality, OfY is undefined at runtime (the correct way to use OfY is to import Plot and then use Plot.OfY).

To fix this, I've confirmed that API extractor does a better job at doing .d.ts rollup, so now I just have to figure out how to disable Parcel's type rollup.

Plotting is a pretty hard problem. Mafs does a good job of plotting pretty mundane graphs, but as soon as you plot something like 1/x, problems become apparent.

Some better heuristics around evaluating functions would be great.

Hi @stevenpetryk

Noticed that the Collapsable code from the Docs is overflowing in Safari. Check the attached images below.

Issue

The problem is that overflow: clip; is not supported for Safari 15.6.

MacOS

macOS Monterey 12.5

Safari Version

Version 15.6 (17613.3.9.1.5)

Google Chrome Version

Version 108.0.5359.124

Proposed solution

Setting overflow: auto by default works because the max-height property will crop the text either way.

Tested it on Safari 16.2 and it works too

It would be handy if CartesianCoordinates, Text, Functions, and VectorFields were affected by Transform.

CartesianCoordinates, VectorFields, and both Function types are currently not supported simply because they use the "pane context", which is Mafs' way of not computing offscreen elements. All these components only render roughly the area you're looking at. However, I'm no wizard and I feel like the linear algebra involved in doing the lazy evaluation in a transformed coordinate space would be really tough.

Text is not transformed just because I figured people would want to preserve the legibility of the text and only transform the anchor point. We could definitely transform the text itself though (or make it an option). Maybe something like <Text transformBehavior="anchor|distort" /> or something.

Moveable point:

Trying to import Vector2:

I've been playing around implementing mafs in tsx instead of js, however, now that I am using tsx, useMoveablePoint requires a Vector2 type to be passed in, however, mafs doesn't export that type!

Every vector defines its own marker with a unique ID, but all vectors have the exact same marker. This definition could be hoisted up to the main view to cut down on the number of elements that need to be rendered.

https://github.com/stevenpetryk/mafs/blob/main/src/display/Vector.tsx#L34-L46

Of course, it gets a little complicated when we start using colors... might need to experiment and see if the line's marker can inherit its color. Maybe it already does. idk.

This example is quite fast: https://mafs.dev/guides/display/vector-fields/

But if I pinch zoom, all of the updates become very hitchy and slow. (This is on the latest Brave browser, so I assume Chrome as well.) This does NOT happen on Safari!

Is it possible to snap moveable points only to the grid?

Need a better name than this to avoid ambiguity between JS/React and Mafs. Maybe FunctionPlot? Anyway, should have the following:

• Function of x
• Function of y
• Parametric functions

One issue is that this library will only supports injective functions of y and x. Relations require some kind of solver, meaning things like non-parametrically defined circles, hyperbolas, solution curves, etc. will not be plottable.

At least a lot of calculus and below can be plotted with this.

I'm trying to think of ways to write tests.

• Snapshot testing could work, but I dislike it. It's flaky to small changes that have no visual effect.
• Screenshot testing might be nice—Mafs is, after all, basically an SVG image. But I wonder if it's slow.
• Interactive elements should have accessibility testing to make sure they're focusable, keyboard operable, etc.

I need some way to be notified when the Netlify site fails to build. I don't think I want to add a pull request check, because Netlify takes forever to pick up GitHub's webhooks and build the site. I would rather be reactive.