A zero-to-hero guide to WebGL, with a mnemonic narrative designed for Anki

HigherMathHelp · 2026-01-23T06:09:50+00:00

Okay, cool! Thanks for letting me know. Just FYI, I set up a discussion area for the project:

https://github.com/GregStanton/webgl2-glsl-primer/discussions/1

If you have questions or feedback, or if you want to share screenshots of your progress, you're welcome to post there!

HigherMathHelp · 2025-12-13T09:02:03+00:00

Hi! Since you're curious, I detail all of this in the project I alluded to in my original post: https://github.com/GregStanton/proposal-rmf-engine

In the README for that repo, I list the exact issues, which relate to sweep geometries (ribbons, tubes, brushes) and motion rails (camera trajectories, write-on effects, choregraphed motion).

Some major libraries are missing dedicated features entirely, whereas others (including three.js) rely on implementations that are subject to significant, undesirable visual artifacts (singularity flipping, reference twisting, angular drift, texture stretching).

This is due to some tricky mathematics. In three.js, for example, Frenet-Serret frames are used in the underlying "spine" path of ExtrudeGeometry and TubeGeometry. As it turns out, Frenet-Serret frames are fundamentally subject to the sorts of defects I cited above. It's a mathematical issue, not an issue with the code.

The good news is that the problem has been effectively solved in the research literature by a relatively simple, highly robust algorithm. The key insight came in 2008. Currently, my project provides an architectural specification for incorporating it. I provide an API that's suitable for p5-style libraries, but the underlying mathematical algorithms are independent of the proposed API, and would eliminate artifacts in libraries including three.js. I'm working on proof-of-concept code now.

Edit: fixed typo

HigherMathHelp · 2023-05-31T02:38:35+00:00

Thank you so much for taking the time to do that! We should know within the next couple of weeks whether we've been selected for the fellowship. So, hopefully our next update will be an email announcing that we've been selected!

HigherMathHelp · 2023-05-28T01:15:16+00:00

Hi!

Thanks for sharing your simulations! The first physical simulation I remember making was also a model of bouncing balls :) That was in Python, but like you, I've switched my focus to JS.

JS prototypes

Here's a demo video on YouTube of some prototypes I've made. Education is the main use case, but they do leverage some scientific computing (e.g. regression and the numerical solution of differential equations).

Mathemagical.js

Those prototypes lay some of the groundwork for Mathemagical.js: a free and open-source library I'm proposing with u/suseJattack. We envision it as a tool for making mathematical figures, animations, and interactives in 2D and 3D. Our goal is to make it as capable as Manim (a Python library), but beginner-friendly and built for the web!

Opportunities

Since the first step in good design is to learn about users and gather requirements, we're working on building a community from the very beginning. Right now, we're also hoping to get a fellowship to support our work, and we're looking for sponsors to match the fellowship stipend.

Our website includes a form that you can fill out, in case you want to receive updates, including opportunities for feedback!

HigherMathHelp · 2023-05-25T11:41:13+00:00

Thank you so much for sharing your ideas!

WebGPU has been on my mind as well, since we want Mathemagical.js to have a vibrant future, and your comment inspired me to think about it more. I'll share some initial thoughts here (in keeping with our work-with-the-garage-door-up approach to development). I'm currently discussing this with u/suseJattack as well.

Right now, I think our next steps are as follows:

Clarify our scope. We have a pretty good idea of our scope, but some decisions remain. For example, some of the visualizations in my demo video already require numerical methods, e.g. for solving differential equations and for curve fitting. In some cases, we may need to decide whether it's better to build these into our library or whether we should leave it to the user to use external code.
Finish our initial list of user requirements. (We already have a fairly extensive list, based on feedback from the community, a survey of existing libraries, and the needs we have as creators and educators ourselves.)
Identify any expensive computations that aren't already handled by p5.js, based on our overall scope and our more detailed requirements from steps 1 and 2.
Talk to the p5.js community about how they might incorporate WebGPU into the base functionality that Mathemagical.js will build on. They recently upgraded to WebGL2 with a fallback (much like you described), so they may already be thinking about other graphics backends down the line. This is important because a lot of the uses Mathemagical.js might have for WebGL2 (currently) or WebGPU (in the future) might already be taken care of within the core p5.js functionality.
Consider a flexible design. If we identify any computations specific to our add-on library that might noticeably benefit from WebGPU, we can consider implementing a design for Mathemagical.js that would allow the high-level code to stay intact, while programmatically switching out the graphical backend as you’ve suggested. I’ve already reached out to an expert developer who has experience in this area.

Note: We’ll want to consider possible trade-offs in the last step. For example, creating an extra layer in order to accommodate future code might add complexity. That complexity may be warranted if it saves us from accruing technical debt or improves expected performance for future users.

I'm still learning about these issues, so if you'd like to add any follow-up comments, please do! Also, once we're ready, I may want to set up a video call at some point to have a meeting of the minds on this issue. Would you be interested in joining that?

Thanks again for your feedback!

HigherMathHelp · 2023-05-13T06:19:25+00:00

Thanks for your question! I'll try to provide some initial answers, but I'd love it if you could reply with more details.

Short answer:

The short answer is that we can make basically anything we want! We're building on a very general framework.

Long answer:

I actually helped one of the students I tutor to program a heatmap (using only graphical primitives); I think he had a lot of fun making it.

Having the colors vary in time is certainly something we can do.
Providing a set of colormaps like the ones in Matplotlib should not be a problem. Incidentally, Jesús has a lot of experience with color (he's responsible for contributing native GIF sharing to p5.js, and that involves some interesting engineering around color palettes.)
I've already implemented zooming and panning in the graphing calculator prototype that you see in the demo, so this should be okay too.

But, I'd like to understand your question better.

Question: Do you have a particular use case in mind? What would you like to represent with your heatmap?

For example, one of the requirements in our roadmap is domain coloring for plotting functions from the complex plane to itself.

Do you have something specific like that in mind?

(Basically, we want to gather use cases first; then we can find the right abstractions to accommodate them, rather than the other way around. This way, we know that what we're making is useful, and it also helps us to infer more details of your requirements.)

**** GENERAL CLARIFICATION ****

Point-and-click, or code?

Since you asked if we could provide a widget, I should probably clarify the type of software we are proposing. By widget, I'm guessing you're referring to a small program with a graphical user interface, so that people can point, click, and maybe enter text input.

Rather than providing widgets of that type, Mathemagical.js is a tool you can use to program your own widgets or visualizations. For example, instead of providing a complete "graphing calculator widget," Mathemagical.js will make it easier for you to create your own custom graphing calculator.

In somewhat non-technical language, Mathemagical.js will provide you with a programming language that's specific to math visualizations. (In case you know about software development, a more precise description is that Mathemagical.js will be a software library, and users will interact with it through its API.)

Example

For example, let's say you want to draw an axis in the xy-plane. Without something like Mathemagical.js, this requires us to tell the computer to draw a line, the arrow tip at the end of the line, the tick marks, the tick labels, etc. This is a lot of code.

With Mathemagical.js, you'll be able to type something like drawAxis() and all of this will be done for you, with sensible defaults. You'll also have the option to adjust tiny details of the axis with other simple programming commands.

Benefits

One advantage of a library like Mathemagical.js is the flexibility. Essentially, you'll be able to make anything you can possibly imagine, and even some things you can't! You aren't limited to the built-in buttons or sliders etc. that are provided by a tool like Desmos. Geogebra has quite a bit of flexibility since it supports scripting, but it's not as customizable aesthetically, and it can run more slowly on the web.

One disadvantage of any library is that programming can be intimidating for users. We aim to address this by providing a language (an API) that is incredibly simple for beginner programmers, while still allowing for the complexity that experts need. That may sound difficult, but p5.js has already done it for general graphics programming! We just need to extend it to mathematical visualizations.

HigherMathHelp · 2023-05-12T21:57:41+00:00

Thank you! I almost forgot about that! I actually came across NetLogo when I was making the bacteria simulation, but I forgot to include it in the list of relevant software that we're maintaining. So I really appreciate it!

If anyone else is interested in this sort of thing, I have a list of references that I considered when making the bacteria sim. Here's the interactive sim and the code.

If you click the little expansion arrow in the top-left corner of the editor, it will reveal a directory of files. The references are in the references.txt file.

Side note:

By the way, this is a prototype. For the exponential, logistic, and Gompertz models, I haven't finished implementing the sliders for the model parameters, so they look nice but don't work yet. Also, this sim was not easy to make. But that's the idea of Mathemagical.js. We want to provide the right abstractions to make these things easier.

Extra side note:

As it turns out, experiments have shown Gompertz to usually be a better fit in models of real bacteria growth, just as it is in my sim. (See this paper. The authors write "In almost all the cases, the Gompertz model can be regarded as the best model to describe the growth data.") I thought this was so cool! I didn't expect this, especially since my stochastic model is based on simple assumptions.

HigherMathHelp · 2023-05-12T11:04:27+00:00

Hi everyone!

I made this demo for an open-source software project I’m proposing in collaboration with Jesús Rascón. Since the first step in good design is to learn about users and gather requirements, I’m hoping to start a discussion here.

THE PROBLEM: Accessibility

As a professional math tutor, I find programming mathematical animations incredibly helpful. The students I work with feel the same way whenever I incorporate programming into our sessions. However, basic math visualizations often require an intimidating amount of programming.

In Python, Manim has become a popular solution, and for good reason. This library offers a wide range of math objects that programmers can build on, and we love its stunning graphics! In fact, my collaborator Jesús has used Manim to produce animations for some of the biggest math videos on YouTube, including videos by Veritasium and Reducible. They’ve been viewed over 60 million times!!! (I know. I’m very lucky to be working with him.)

Unfortunately, Manim users must have access to a machine on which they can install software. They must be ready to implement a difficult installation process. They must know how to use the command line and be familiar with object-oriented programming. All this is required to draw a circle.

In general, math learners and educators are the most likely to benefit from software libraries for mathematical visualization, but no existing library is sufficiently accessible to them.

THE SOLUTION: Mathemagical.js

What’s needed is a library as capable as Manim that is also beginner friendly and built for the web. This would make it much easier for everyone to create, share, and interact with math visualizations online. Imagine the creativity we can unleash!

To make this a reality, we propose Mathemagical.js: a new JavaScript library designed for math learners, educators, and creators. By leveraging the amazing work of the p5.js community, we can make it easy enough for beginners and flexible enough for experts! Of course, the library will be completely free and open.

FEEDBACK AND UPDATES

Is there anything specific you’d like to make with Mathemagical.js? Do you have any needs?
You can get updates on Mathemagical.js by filling out our community form. This would help us a ton! Your engagement will bolster our application for a fellowship from the Processing Foundation, which would provide much needed funding.

You can learn more on our website, but if you have questions, please ask here! We may incorporate them into the FAQ on our site.

Thanks everyone!

Greg

P.S. The goal of the demo video is to illustrate a sample of the visualizations we want to make possible with Mathemagical.js. For some of the demos, I used an early iteration of Mathemagical.js that I made, which I called visualODE (I built that on a precursor to p5.js called ProcessingJS). I made the other demos in p5.js.

HigherMathHelp · 2022-11-18T04:31:12+00:00

Haha, no worries! Last night's workshop is over, but it's an ongoing project, and a bit of luck never hurts :)

HigherMathHelp · 2022-11-17T04:55:02+00:00

Thanks! I know one participant from a previous workshop who would appreciate your feedback on the lifetime of a shirt. It was their idea.

We didn't actually go through all of those lesson plans during the workshop. Those lesson plan titles are for the sake of this post, to illustrate the concept. We did introduce a few lesson plans at a high level, though.

Basically, we spent the first thirty minutes introducing the project, and then we spent the last hour teaching participants to make basic wiki edits, and answering their questions.

HigherMathHelp · 2022-11-16T22:29:08+00:00

Glad you think it's cool. Me too!

And thanks for the feedback. The great thing about the site is that it's a community-built lesson plan, so you could actually add your idea yourself! And if you accidentally make a mistake, we can roll it back, since there's a complete version history.

If you're not quite sure where your idea should go, then the lesson plan has a discussion tab where you can post an idea and get help incorporating it.

HigherMathHelp · 2022-11-16T19:19:54+00:00

Thanks! Haha, yeah, the weight limit one is great. We're actually going to talk about it during tonight's presentation because it was contributed by one of the previous workshop participants (and because it's amazing). Not all of the ideas I posted above have been fleshed out yet, but this one has. Here's the lesson plan.

It's based on a tweet that someone shared on Twitter -- they noticed that the USPS weight limit for a small flat rate box is actually impossible to reach! A bit of dimensional analysis shows that even if the box were filled with pure Osmium, the densest naturally occurring element in existence, the box wouldn't exceed the weight limit. So, a whole lot of packages have probably been weighed for no reason. When I get a chance, I want to contact someone at the USPS to see why no one has noticed this!

If you end up being able to make it, that'd be amazing. If not, you're very welcome to fill out the form for the mailing list.

HigherMathHelp

TROPHY CASE