4 ms·

Shameless plug for my React library for creating similar-looking, interactive visualizations on the web. Highly inspired by 3blue1brown/manim's style. Less focu

Shameless plug for my React library for creating similar-looking, interactive visualizations on the web. Highly inspired by 3blue1brown/manim's style. Less focused around animation, more focused on interaction. :) https://mafs.dev/ https://mafs.dev/ Edit: probably needs a bit of chores done, especially around typescript declaration organization. I built it during a brief 3-week funemployment last year. Side projects are hard!

dxbydt 5y ago
Your example on Projectile motion and Riemann sum is quite nice! I am going to share it with a few kids I work with. Thank you for creating this.
6gvONxR4sf7o 5y ago
That looks super clean. Very cool.
pc86 5y ago
Haven't looked at the code yet but the animations/interactivity is gorgeous.
- deleted 5y ago
  [deleted]
da39a3ee 5y ago
That looks like a really nice project. Are you familiar with Mathbox https://github.com/unconed/mathbox https://github.com/unconed/mathbox?
- stevenpetryk 5y ago
  Nope! I like Three.js though. These visualizations are pretty intense.
- Uehreka 5y ago
  I’m pretty sure mathbox got abandoned when mathbox2 came out (understandably, it’s mostly one guy building it). But then mathbox2 appears to be abandoned now, and last time I tried to use it (a couple years ago) the coffeescript would no longer compile. It was a really visionary piece of work, it’s a bummer to see it fall apart like this, and I don’t think anything has come out since that really replaces it (though manim does look cool).
tenaciousDaniel 5y ago
This is great, do you use anything under the hood? D3/ThreeJS?
- stevenpetryk 5y ago
  SVG. It's remarkably powerful given that it supports arbitrary linear transformations and all sorts of computer graphics things.
  - westoncb 5y ago
    Can anyone give a brief explanation of what it means to use SVG in this context? I think of it as a file format, but I'm assuming no files are involved here. Aside from that I've noticed the contents of SVG files look similar to the 2d canvas operations—which to my mind seems like the natural thing to use for something like this—so why use SVG instead? And is there any relationship between canvas drawing and SVG?
    - remram 5y ago
      JavaScript can write SVG just like it writes HTML. Your React render() can return <svg><rect ... /></svg> as easily as <div><p>...</p></div>
      - tenaciousDaniel 5y ago
        Yep, svg + react = declarative graphics. I love it. I used it to replace D3 in a project I worked on last year and no regrets at all.
    - stevenpetryk 5y ago
      SVG works much more naturally with React, since it’s able to be managed via the DOM. Doesn’t have to be an <img />.
- nighthawk454 5y ago
  glancing at the code, it appears to just be SVG. and pretty cleanly at that

dxbydt 5y ago

Your example on Projectile motion and Riemann sum is quite nice! I am going to share it with a few kids I work with. Thank you for creating this.

6gvONxR4sf7o 5y ago

That looks super clean. Very cool.

pc86 5y ago

Haven't looked at the code yet but the animations/interactivity is gorgeous.

deleted 5y ago
[deleted]

da39a3ee 5y ago

That looks like a really nice project. Are you familiar with Mathbox https://github.com/unconed/mathbox https://github.com/unconed/mathbox?

stevenpetryk 5y ago
Nope! I like Three.js though. These visualizations are pretty intense.
Uehreka 5y ago
I’m pretty sure mathbox got abandoned when mathbox2 came out (understandably, it’s mostly one guy building it). But then mathbox2 appears to be abandoned now, and last time I tried to use it (a couple years ago) the coffeescript would no longer compile. It was a really visionary piece of work, it’s a bummer to see it fall apart like this, and I don’t think anything has come out since that really replaces it (though manim does look cool).

tenaciousDaniel 5y ago

This is great, do you use anything under the hood? D3/ThreeJS?

stevenpetryk 5y ago
SVG. It's remarkably powerful given that it supports arbitrary linear transformations and all sorts of computer graphics things.
- westoncb 5y ago
  Can anyone give a brief explanation of what it means to use SVG in this context? I think of it as a file format, but I'm assuming no files are involved here. Aside from that I've noticed the contents of SVG files look similar to the 2d canvas operations—which to my mind seems like the natural thing to use for something like this—so why use SVG instead? And is there any relationship between canvas drawing and SVG?
  - remram 5y ago
    JavaScript can write SVG just like it writes HTML. Your React render() can return <svg><rect ... /></svg> as easily as <div><p>...</p></div>
    - tenaciousDaniel 5y ago
      Yep, svg + react = declarative graphics. I love it. I used it to replace D3 in a project I worked on last year and no regrets at all.
  - stevenpetryk 5y ago
    SVG works much more naturally with React, since it’s able to be managed via the DOM. Doesn’t have to be an <img />.
nighthawk454 5y ago
glancing at the code, it appears to just be SVG. and pretty cleanly at that