Polypad (opens in new tab)

Polypad itself isn’t open source, but many of its underlying math and UI libraries are published by its creator under the Mathigon org [1]. The UI is impressive on its own, but what I find really interesting is that it’s built entirely without a traditional frontend framework. The core is a small library that's a mix of jquery-style DOM wrappers and Vue-like reactivity, templating, and web components [2].

I wish this style of building complex UIs was more common. Having some direct control over the DOM works really well for highly interactive graphics and visual tools.

[1] https://github.com/mathigon [2] https://github.com/mathigon/boost.js

One of my favorite projects that I ever worked on was an project that is really reminiscent of this. The project was to create a browser-based educational tangram[1] puzzle game for kids. It was filled with neat mathematical challenges like how to implement "snapping" between puzzle pieces. The most interesting was how to detect when a puzzle was "complete" or "incorrect" since there can be multiple valid solutions (and I didn't want to find them all) and the library had to accommodate the addition of new puzzles, meaning the approach had to be generic.

We ended up with some rules like "all puzzle pieces must be adjacent to another puzzle piece", "no puzzle piece may overlap another puzzle piece", and "all puzzle pieces must overlap the silhouette" (the puzzle goal), and "no piece may partially overlap the silhouette".

I didn't really know how to detect "overlap" reliably so I ended up implementing some heuristic methods. I remember tearing my hair out over the way JavaScript numbers worked and figuring out how to reliably compare floating point numbers. Good times.

The github repo for the library is still around. Last commit... 9 years ago, woof, time flies! And of course one of the last commits is "Fix overlap bug". Figures.

[1] https://en.wikipedia.org/wiki/Tangram [2] https://github.com/gabesullice/libshapes

The annual Polypad Art Contest is worth browsing through: https://polypad.amplify.com/contest

From last year, this Moonlight Sonata in the 12-15 year old category is awesome: https://polypad.amplify.com/p/3VOW6BLM7AYqhQ

And I'm partial to this creation by an educator: https://polypad.amplify.com/p/hPjJZ4DC2Tpywg

but they're all great

(disclaimer: i am CTO of Amplify)

Amplify (neé Desmos) builds great tools and manipulatives that are great for classroom use and curious play. Read more of the pedagogy behind these tools on Mathworlds. https://danmeyer.substack.com/

I am super impressed by this. The landing page is GREAT, it really shows you what it can do and I tried creating a polypad and it works just as well as the landing page makes it seem.

I would have loved to have this when I was in school and I can imagine it is a great tool for teachers. I am going to let my kids play around with this.

In rereading my comment it sounds like some sort of lame ad, which I can assure you it isn't. I am just excited about it.

The concept is cool, but the UI for navigating the canvas is pretty frustrating. I wish it used mouse actions like zooming with the scroll wheel and panning with dragged right click/middle click.

I really wish I could find a site for 2D geometry/pedagogy which would "click" as well for me, and be as useful as:

https://www.blockscad3d.com/editor/

has been. Really miss directly programming in PostScript in Altsys Virtuoso on my NeXT Cube.

I've tried Processing and Nodebox, and they haven't quite clicked, and scripting in Inkscape feels clunky....

Amplify bought the company that made it a few years ago:

https://mathigon.org/press

That's really cool. A nice touch is how the help is implement with every widget having a little question mark you can click, and it shows a tutorial on the left panel. Also thank you for letting us in without sign up.

This is the edtech product that my son (2nd grade) has liked the most from school.

Could you please not mess up my back button for your menu :(

I just get "403 Forbidden". What is this website?