5 ms·

Show HN: Mafs – React components for interactive math

196 points by stevenpetryk 4y ago

lagrange77 4y ago
I love it, especially the vector field component is super cool! Unfortunately i have to build sth. like that myself, because.
- stevenpetryk 4y ago
  Of course, builders gonna build.
diskzero 4y ago
This is really neat. Can you share what inspired you to create these components? My significant other is an educator and she is always looking for fun and inspiring ways to introduce mathematical concepts to her student. Are you approaching this from an educational perspective?
- stevenpetryk 4y ago
  Thank you! I actually can’t remember what made me start building it. I think I was learning differential equations and wanted to try visualizing some parts of that, and it spiraled into a full blown thing. I kept getting impressed by the flexibility and accessibility of SVG. I don’t really have a target audience, I just enjoy building it. As I add more examples I expose more weak spots or feature opportunities. Regarding your SO, Mafs could be a good fit if she knows React, but if not, Geogebra is a fantastic WYSIWYG visualization editor. Mafs would have the cool benefit of being able to show the underlying logic to the student though :)
  - diskzero 4y ago
    She has been using Desmos, which is pretty good. I'll tell her about Geogebra. Creating interactive demonstrations can be very helpful. Sequences and series seem to be the latest topic students are having difficulties with. The underlying logic is good, but being able to visualize the topic and play with parameters is important as well. Thanks!
luuuzeta 4y ago
Such a sweet library! It's nice to see examples so well laid out.
pablo24602 4y ago
Super cool! Will definitely be using this to explain mathematical concepts
iamflimflam1 4y ago
Fantastic work. I’ve been using the Manim library a lot for my YouTube videos - but I’ve been looking for a replacement. I see that you already have some animation support. Great work.
- tunesmith 4y ago
  I've been curious about Manim for a while. Why are you looking for a replacement?
  - sitkack 4y ago
    There is Manim and Manim.community [2], most development happens around community. [2] https://www.manim.community/ https://www.manim.community/
  - iamflimflam1 4y ago
    I’ve used it for a few videos. But I find it pretty hard to use. It’s great if you are doing things that are covered by examples. But anything off the beaten track involves knowing about how it’s implemented. I do like it - but don’t have the time to invest in understanding how it works under the hood. It’s also quite slow (at least on my computer) - the feedback from making changes in the python code - to seeing results can often involve re-rendering the entire video.
- ipsum2 4y ago
  @stevenpetryk do you see Mafs becoming a library supporting similar features to Manim?
  - stevenpetryk 4y ago
    No, Mafs prioritizes interactivity, not sequenced animations. I would expect explainers using Mafs would be something like this page[1] where there are many interactive visualizations at various levels of abstraction as concepts are elucidated. [1]: https://ciechanow.ski/mechanical-watch/ https://ciechanow.ski/mechanical-watch/
- 4y ago
robertlagrant 4y ago
This is gorgeous. Very Reacty (Reacthonic?) API as well, which is nice.
dmix 4y ago
That's one beautiful website. The code snippets colorscheme/nav/typography. Well done. Edit: looks like it's using Tailwind.
- rukuu001 4y ago
  But broken on my iPhone (tiny SE). Now I have to get off my butt to get my laptop to see it
  - stevenpetryk 4y ago
    Thanks for calling this out—I couldn't find anything when I tried emulating an SE. What's broken?
    - rukuu001 4y ago
      Yes, as per blobcode’s comment - it’s a zero-interaction page for me. No scroll, no clicks.
    - blobcode 4y ago
      It seems like all interaction + scrolling is broken on the SE for me, although rendering and animations play.
- spoils19 4y ago
  Interesting that it's also using React - normally landing pages, even for React libraries, don't need the framework itself. Wouldn't a plain HTML / CSS site work better here, served from a robust backend?
  - stevenpetryk 4y ago
    It might work better in terms of bandwidth/performance, but developer experience was a priority (for myself) for me in this case.
bee_rider 4y ago
The name looks like a pun but I can’t quite work it out. I mean mafs is already a funny way of pronouncing maths, so maybe that’s good enough. But is there more to it?
- stevenpetryk 4y ago
  That's all there is to it.
- rukuu001 4y ago
  It’s also the acronym for a terrible reality show, and I hear people pronouncing it that way (as a word, not spelling it out)
- lloydatkinson 4y ago
  https://www.youtube.com/watch?v=X09oxyIeGuY https://www.youtube.com/watch?v=X09oxyIeGuY
idrios 4y ago
I spent months learning d3js in my spare time, experimenting with plotly.js, hacking things together to try to make good looking interactive math demos for my crappy amateur React website -- and then just as I have things all mostly working you release this tool that has everything I wanted. I'm furious. Beautiful work.
- deleted 4y ago
  [deleted]
friedman23 4y ago
Amazing
fatih-erikli 4y ago
I wasn't expecting scaling the points by a some multiplier number for line through points example https://github.com/stevenpetryk/mafs/blob/main/src/display/Line/ThroughPoints.tsx#L23 https://github.com/stevenpetryk/mafs/blob/main/src/display/L... Doing some trigonometry to get the angles of the points and drawing lines from the svg edges could be a better approach
- stevenpetryk 4y ago
  Yeah, you found some jank.
shivekkhurana 4y ago
The `y={fn}` prop is neat
jamesfisher 4y ago
It's lovely! One request though: is it possible to not break scrolling on mobile? E.g. constrain it so that horizontal swiping moves the graph, but vertical swiping continues to scroll the page?
yayr 4y ago
It's great! I just could not figure out how to zoom the chart / coordinate system with the mouse / touchpad. pinching and modifier keys did not work.
ShalaNo 4y ago
Now
solarkraft 4y ago
It's beautiful and very cool. Are there more tools like this for building exploratory maths UIs? Something like GeoGebra comes to mind. Maybe I'll try to use this to help me study some maths-related subjects. It's great that it's a React component because that makes it very easy to use it to build interactive articles with something like MDX.
austinnguyen00 4y ago
Very nice library, hope that it can get more users in the future.

196 points by stevenpetryk 4y ago

I love it, especially the vector field component is super cool! Unfortunately i have to build sth. like that myself, because.

stevenpetryk 4y ago
Of course, builders gonna build.

diskzero 4y ago

This is really neat. Can you share what inspired you to create these components? My significant other is an educator and she is always looking for fun and inspiring ways to introduce mathematical concepts to her student. Are you approaching this from an educational perspective?

stevenpetryk 4y ago
Thank you! I actually can’t remember what made me start building it. I think I was learning differential equations and wanted to try visualizing some parts of that, and it spiraled into a full blown thing. I kept getting impressed by the flexibility and accessibility of SVG. I don’t really have a target audience, I just enjoy building it. As I add more examples I expose more weak spots or feature opportunities. Regarding your SO, Mafs could be a good fit if she knows React, but if not, Geogebra is a fantastic WYSIWYG visualization editor. Mafs would have the cool benefit of being able to show the underlying logic to the student though :)
- diskzero 4y ago
  She has been using Desmos, which is pretty good. I'll tell her about Geogebra. Creating interactive demonstrations can be very helpful. Sequences and series seem to be the latest topic students are having difficulties with. The underlying logic is good, but being able to visualize the topic and play with parameters is important as well. Thanks!

luuuzeta 4y ago

Such a sweet library! It's nice to see examples so well laid out.

pablo24602 4y ago

Super cool! Will definitely be using this to explain mathematical concepts

iamflimflam1 4y ago

Fantastic work. I’ve been using the Manim library a lot for my YouTube videos - but I’ve been looking for a replacement. I see that you already have some animation support. Great work.

tunesmith 4y ago
I've been curious about Manim for a while. Why are you looking for a replacement?
- sitkack 4y ago
  There is Manim and Manim.community [2], most development happens around community. [2] https://www.manim.community/ https://www.manim.community/
- iamflimflam1 4y ago
  I’ve used it for a few videos. But I find it pretty hard to use. It’s great if you are doing things that are covered by examples. But anything off the beaten track involves knowing about how it’s implemented. I do like it - but don’t have the time to invest in understanding how it works under the hood. It’s also quite slow (at least on my computer) - the feedback from making changes in the python code - to seeing results can often involve re-rendering the entire video.
ipsum2 4y ago
@stevenpetryk do you see Mafs becoming a library supporting similar features to Manim?
- stevenpetryk 4y ago
  No, Mafs prioritizes interactivity, not sequenced animations. I would expect explainers using Mafs would be something like this page[1] where there are many interactive visualizations at various levels of abstraction as concepts are elucidated. [1]: https://ciechanow.ski/mechanical-watch/ https://ciechanow.ski/mechanical-watch/
4y ago

robertlagrant 4y ago

This is gorgeous. Very Reacty (Reacthonic?) API as well, which is nice.

dmix 4y ago

That's one beautiful website. The code snippets colorscheme/nav/typography. Well done. Edit: looks like it's using Tailwind.

rukuu001 4y ago
But broken on my iPhone (tiny SE). Now I have to get off my butt to get my laptop to see it
- stevenpetryk 4y ago
  Thanks for calling this out—I couldn't find anything when I tried emulating an SE. What's broken?
  - rukuu001 4y ago
    Yes, as per blobcode’s comment - it’s a zero-interaction page for me. No scroll, no clicks.
  - blobcode 4y ago
    It seems like all interaction + scrolling is broken on the SE for me, although rendering and animations play.
spoils19 4y ago
Interesting that it's also using React - normally landing pages, even for React libraries, don't need the framework itself. Wouldn't a plain HTML / CSS site work better here, served from a robust backend?
- stevenpetryk 4y ago
  It might work better in terms of bandwidth/performance, but developer experience was a priority (for myself) for me in this case.

bee_rider 4y ago

The name looks like a pun but I can’t quite work it out. I mean mafs is already a funny way of pronouncing maths, so maybe that’s good enough. But is there more to it?

stevenpetryk 4y ago
That's all there is to it.
rukuu001 4y ago
It’s also the acronym for a terrible reality show, and I hear people pronouncing it that way (as a word, not spelling it out)
lloydatkinson 4y ago
https://www.youtube.com/watch?v=X09oxyIeGuY https://www.youtube.com/watch?v=X09oxyIeGuY

idrios 4y ago

I spent months learning d3js in my spare time, experimenting with plotly.js, hacking things together to try to make good looking interactive math demos for my crappy amateur React website -- and then just as I have things all mostly working you release this tool that has everything I wanted. I'm furious. Beautiful work.

deleted 4y ago
[deleted]

friedman23 4y ago

Amazing

fatih-erikli 4y ago

I wasn't expecting scaling the points by a some multiplier number for line through points example https://github.com/stevenpetryk/mafs/blob/main/src/display/Line/ThroughPoints.tsx#L23 https://github.com/stevenpetryk/mafs/blob/main/src/display/L... Doing some trigonometry to get the angles of the points and drawing lines from the svg edges could be a better approach

stevenpetryk 4y ago
Yeah, you found some jank.

shivekkhurana 4y ago

The `y={fn}` prop is neat

jamesfisher 4y ago

It's lovely! One request though: is it possible to not break scrolling on mobile? E.g. constrain it so that horizontal swiping moves the graph, but vertical swiping continues to scroll the page?

yayr 4y ago

It's great! I just could not figure out how to zoom the chart / coordinate system with the mouse / touchpad. pinching and modifier keys did not work.

ShalaNo 4y ago

Now

solarkraft 4y ago

It's beautiful and very cool. Are there more tools like this for building exploratory maths UIs? Something like GeoGebra comes to mind. Maybe I'll try to use this to help me study some maths-related subjects. It's great that it's a React component because that makes it very easy to use it to build interactive articles with something like MDX.

austinnguyen00 4y ago

Very nice library, hope that it can get more users in the future.