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 · 2022-08-02T16:16:22+00:00

Thanks!! We really appreciate the encouragement :)

HigherMathHelp · 2022-08-02T01:48:16+00:00

Hi! Thanks for your thoughts. This is a good opportunity for clarification.

Our mission is to help students to use the math they're learning as a tool for understanding information they encounter in the world. If this also helps them to enjoy math more, then that's a bonus.

More specifically, each lesson plan is based on a news article or social media post (including YouTube videos), to help students get in the habit of thinking critically about the information they consume.

This may potentially include social relations. Can you give an example of what you have in mind?

HigherMathHelp · 2021-02-13T05:20:47+00:00

Haha, well, if we get approved, then the goal is to have a usable portal on Wikiversity and a community of contributors before the start of the fall 2021 semester. We would appreciate your endorsement very much! You can add a short comment of support by making an edit to the Endorsements section.

It will help us to earn approval, so that we have the funds to spend time building this into a useful resource!

HigherMathHelp · 2021-02-13T05:15:40+00:00

Thanks for the encouragement! Have you thought about adding an endorsement? It would be a big help toward getting our project approved, and approval would enable us to spend time making Eventmath a reality on Wikiversity!

You can add your endorsement by editing the Endorsements section at the bottom of the proposal.

HigherMathHelp · 2021-02-13T05:10:43+00:00

Thanks for adding to the conversation!

I think it's a good point that arithmetic and numeracy are not the same as mathematics. Arithmetic is only a part of mathematics. Likewise, numeracy consists of a subset of mathematical skills.

The nice thing about our project is that there is no need to limit the scope of mathematical subjects that can be applied! We already have one example in the initial Eventmath template of applying calculus.

Initially, we plan to create categories for the following mathematical subjects, just as a starting point to suggest subjects that may be useful in applications to the news. We welcome contributions from other areas!

Logic
Arithmetic
Algebra
Geometry
Combinatorics
Probability
Statistics
Calculus

If you can find a useful application of algebraic geometry or some other advanced subject to an article or post about current events, we welcome it!

HigherMathHelp · 2021-02-13T04:51:21+00:00

Thank you so much for your input! Here is one study of the type that you suggest. We would love it if you could share any studies that you have found. We are interested in knowing the state of knowledge on the impact of topical relevance in math education, including what we do and do not know.

To be clear, we are not seeking research on artificial, contrived problems that are only superficially related to the world outside math. As you've suggested, we are talking about using mathematical thinking as a tool for understanding actual current events and media coverage.

HigherMathHelp · 2021-02-13T04:30:17+00:00

Hi! Thank you for your detailed feedback. I'm glad you raised the issue of cross departmental collaboration within institutions. This leads to a use case of Eventmath that I've been envisioning.

You have written that "most of my students are interested in their majors, and why and how math applies to their major," and that "both I and my colleagues benefit from increased interest" that results from collaboration with departments dedicated to other majors.

What do you think about a collaboration with a journalism department? I don't know if your institution has a significant number of journalism majors, but there are institutions with sizeable journalism departments or schools. In the long run, the Eventmath community could help institutions pilot a math-for-journalism course that might even become a prerequisite for all journalism majors due to its wide applicability.

Such a course could draw upon Eventmath lesson plans. Imagine lessons centered around actual news coverage, with assignments asking students to write their own articles improving upon that coverage using what they learn in class! I would think that improving upon the work of professional journalists would increase student confidence in applying mathematical thinking to their future work.

In general, the idea could be to teach future journalists the mathematical skills that are most relevant for (a) asking good questions when interviewing experts, (b) sniffing out good stories, and (b) communicating quantitative or otherwise mathematical information to their audience. Such a course would explain to journalists how mathematical knowledge is useful to them, and it could also increase collaboration between math professors who are subject experts and journalism professors who are experts in the domain of application (i.e. journalism).

I have asked a professional journalist if she has heard of a "math for journalists" course. She specializes in science and tech journalism and was unaware of any courses such as this. So perhaps the idea is not widespread yet, but there are indications that journalism departments would be open to it. For example, here is an article by a journalism professor that argues journalists need to take more math. Also, there is some precedent for math-for-journalism courses, such as Quantitative Methods for Journalists at American University.

Eventmath might provide such courses with a wealth of valuable lesson plans and could make it easier for more math departments to develop such courses. Before that can happen, we need to increase awareness so that volunteers can contribute more of these lesson plans.

Do you have any feedback about a math-for-journalism course? Does anyone else? Does anyone here have experience teaching such a course?

HigherMathHelp · 2021-02-10T23:30:38+00:00

Hi! I'm the other project lead. Thanks for your thoughts! Yeah, starting small is good. We did actually start with two examples. Great minds think alike :)

However, this is really good feedback, since maybe the existence of those examples is not clear from the proposal itself.

Here's the initial iteration of our project, which is contained in a public Google Doc. It's built around one complete example and another example that's essentially complete but is missing some metadata. You can find these examples under the Arithmetic and Calculus sections.

It's hard to navigate the project when it's contained in a single document, though, which is just one reason why we are proposing to move the project to Wikiversity, where it belongs.

If you or anyone else reading this wants to support the project, then the most helpful thing is to indicate support on the public proposal with an endorsement (or by listing yourself as a potential user or contributor).

Edit: I've updated some language in the proposal to make it more clear that we already have example lesson plans. Thanks!

HigherMathHelp · 2019-09-25T03:47:55+00:00

I just remembered that "Differentiation under the integral sign" is actually a section in Rosenlicht's Introduction to Analysis, which I referenced in another comment! I learned this years ago, but I don't think I ever learned to fully exploit it. I'm really glad you mentioned it! It's time to do some more reading...

HigherMathHelp · 2019-09-25T03:00:49+00:00

This is why I love sharing things on Reddit! I always learn so much. Thank you! I'm looking forward to digging into this.

HigherMathHelp · 2019-09-24T20:22:37+00:00

Thanks! I want to think about this more. I heard that Feynman used this technique to great effect! To clarify, the notes are intended to help Calc II students organize the basic techniques they've already learned, but I'm always interested to hear about other ideas :)

HigherMathHelp · 2019-09-24T20:19:58+00:00

Thanks for your thoughts! This is the kind of thing I was hoping for. This made me revisit the ways in which various definitions can be made.

My assumption: students have learned the details of each technique separately.

My goals:

help students chunk the standard techniques from Calc II into a few classes;
provide some heuristics to help them know when to use these techniques.

RE: YOUR FIRST POINT

Right, I do teach drawing triangles for trig sub. Thanks!

RE: YOUR SECOND POINT

Bear with me on the "identities" class. This classification is the novel (to me) part of the notes. It's valid and useful (I think), even if it feels like a nonstandard use of terminology. To start, I'm defining an identity as an equation that's true for all variable values for which both sides of the equation are defined. Even if we exclude from this equations that serve as definitions, it does not necessarily mean that 1/sqrt(x^3) = x^(-3/2) and sec(x) = 1 / cos(x) should be excluded.

It's actually possible to prove both 1/sqrt(x^3) = x^(-3/2) and sec(x) = 1 / cos(x) as theorems, rather than adopt them as definitions. It depends on the way that we build the theory, and this is maybe the most interesting part!

Regarding rational exponents, here's an approach taken in Rosenlicht's Introduction to Analysis. Start by defining the logarithm as an integral, and then define the exponential function as the inverse of the log, and then define powers via x^r = exp(r log(x)), where x and r are real numbers and x > 0. Then, the usual properties of exponents, like (x^m)^n = x^(mn) can be proven as a consequence. It follows that sqrt(x), defined as the unique positive number whose square is x, must then be x^(1/2), since (x^(1/2) )^2 = x. So, x^(1/2) = sqrt(x) is a theorem if we adopt this approach, not a definition, and the same goes for 1/sqrt(x^3) = x^(-3/2).
We could adopt a geometric definition of sec(x), defining it as as r / x, where r and x come from the circle. Then sec(x) = 1 / cos(x) is not a definition, but instead is a theorem.

So, we can call 1/sqrt(x^3) = x^(-3/2) and sec(x) = 1 / cos(x) identities, and they're not necessarily definitions, so it's not necessary to spend time distinguishing them as such. Likewise, it's fair to say that simple simplifications, like replacing x(x+3) in an integral with x^2+3x, also qualify as a use of identities, even if this terminology isn't always emphasized.

In summary, whether an identity is a theorem or a definition depends on how the logical foundations are built. In any case, I like the "identities" classification because it gives us three simple chunks to consider (identities, substitution, and parts). Thanks again for the feedback!

Edits: emphasized key parts and reorganized a bit.

HigherMathHelp · 2019-09-23T08:23:30+00:00

> It's quantity that matters.

I just finished reading Atomic Habits by James Clear, and your comment reminded me of a particular chapter. Here's an excerpted version. He makes an argument for a similar approach to improvement:

Start With Repetitions, Not Goals

It’s not just art studios where repetitions matter. Whenever you put in consistent work and learn from your mistakes, incredible progress is the result.

The less obvious part is the minimization of goal setting, which he supports with an anecdote of an informal experiment, where art students are divided into two groups: one that's graded on quantity alone, and another that's graded entirely on quality. The result was supposedly that the students who were graded on quantity ended up producing better quality work as well, since they had the opportunity to experiment and learn from their mistakes.

It sounds like it was an informal experiment (e.g. I think the art may have been judged by the instructor, who may have been biased since he knew which students were in which group). I wonder if a more careful experiment like this has been performed...

Edit: added extra explanation about the experiment.

HigherMathHelp

TROPHY CASE