P5 Math in Motion – GSoC Proposal

Hi Everyone,

This is @Alexandra and @Oskar. We are a team from NYC, and this is our GSoC Project Proposal.

Below is the link to our project github page, we hope that you find it interesting, and we would love to hear your thoughts about it.




Hi everyone!

The project Oskar and I want to work on, p5 Math In Motion, would be a library that renders interactive math notation inside p5.js projects with the help of Katex, an open-source library for rendering math notation on the web.

Please check out our proposal and tell us what you think. We really appreciate your feedback.


@jeremydouglass @kjhollen @mcintyre @kll @lmccart


Ohhh cool!! Please make this.

I reviewed factoring polynomials with my students every day last week. Imagine a sketch that let students interact with a series of expressions; each would display its factored form with a touch. Going the other way, they could arrange lower-order expressions to multiply. Steps could be timed and color-coded. And so on.

Have y’all checked with GSoC to ensure a joint project is OK with them?


but i have a question,
will it just make the formula on the canvas more beautiful

or add also parameter input/manipulation?

like here need a

  • Button ( ask for input number window ) ( and shows the parameter ) (menu at right )
  • the formula ( top red )
  • the parameterized formula ( with zero suppression… ) top yellow
    ( like its graph )

That’s exactly what we imagine!

We want to visualize that implied process behind the symbols. Our brains are wicked good at understanding the world through visual relationships and movement, so it would be easier to teach and learn through dynamic symbols that “act” out the mechanics between each other.

It could also improve pattern recognition by denoting details just like syntax highlighting and error detection in our IDEs. Imagine a tiny pop-up message saying “You can’t divide by zero!” when you press enter, or a tiny animated hint that displays the commutative property right next to an exercise. That would look awesome, and it would enrich the context behind static math expressions.

A pet peeve of ours is the amount of effort that’s wasted because of our restriction to handwriting math. Math is about thinking and concepts, not about wether we forgot a minus sign somewhere in an expression. That’s just syntax. We’re not punching cards to build code anymore, so why can’t we do the same with math? :upside_down_face:

1 Like

Hey @kll

Well, our main idea is to make it easier for people to input and work with math symbols on p5.js without having to go spend time dealing with Latex and all its nuances. So to answer part of your question, yes the idea is to make it easy to have ‘proper’ math the likes of which we can enjoy in our textbooks.

The way that we envision it is by breaking down the process into chunks:

  • First we make it easier to render math expressions inside p5.js – Katex to P5.js translation (Perhaps by extracting the SVG symbols)
  • Then we make it easier to select the symbols and modify certain properties similar to what a code editor would do with syntax highlighting. – Design a basic syntax highlighting engine along with selector functions
  • Finally we would add functions that animate common steps and procedures like stepping through solutions, term substitutions, and such. – Develop a motion library

We believe once the community has access to these tools, then they can use the rest of p5.js and other libraries to play around with the symbols and add the functionality that your sketch requires.

In the end we want for math expressions to behave just like any other shape, though with a few restrictions.

So, what do you think? We’d really appreciate your feedback.

1 Like

not happy

i not need symbols, i need variables
( well packed into the math formula show… )

i dream of a

1 Like

Oh man, we were so focused on developing something good that we totally didn’t think about the team thing. :sweat:

HELP! :fearful:

Perhaps we could break down the tasks into sub-projects, for example:

  • Oskar will work on implementing a library that migrates Katex functionality into p5.js, and makes it easier for people to render basic math expressions. Up to Algebra I, for example.

  • Alex will develop a library that will animate transitions between sequential expressions which allows people to showcase the reasoning behind a solution

They both fall under the scope of what we want to build, and multiple people do contribute to a single organization. @mcintyre think this might work?

1 Like

Well, one option is to consider individual symbols as objects, or as pointers. So when you mouse over a symbol it returns a value. But that functionality has been built into p5.js and JavaScript altogether.

The hard part for now is getting the symbols to appear on the screen, and having capabilities to select and modify their properties, which is what we want to tackle.

Our use case is more general, and satisfies a broader need for the community. It may also attract more hard-core mathematicians into the fold, which could enrich the forum as well. For example, we have discussed our project with our fellow graduate students in mathematics, and they were pretty enthusiastic at the thought of using the library to communicate their work.

1 Like

I think you’ve divvied up the work nicely. Perhaps Alex’s process visualization library(?) could focus on mathematics while being general enough to support many types of sequences (e.g., frames in an animation).


I think something like this—with the visualization and math components as separate proposals—can work. You both need to submit separate proposals for logistical reasons (the GSoC stuff runs through Google and they handle payment, etc.) but you can indicate that they are complementary, if separate projects. We had two people working on Web GL stuff for p5.js last summer and each had a different mentor, with clearly delineated goals for each contributor, but with good coordination between everyone. Hope this helps!

Additionally, if you develop the timeline further, this can be a good place to indicate who will do what.


Hi Kate!

This is awesome news. Thank you so much for the feedback. We’re working on adjusting the site and the PDF docs based on everyone’s suggestions, in order to submit as individual, though complementary projects.

We’ll be sure to submit everything on time :sunglasses:


Hi @kjhollen & @mcintyre

We managed to change our proposal websites, and submitted the PDF files on time to the GSoC site, yet we couldn’t change the URL Alex submitted for her draft, and it still shows as mine. (This because we had built our joint proposal inside my github account)

Is there any chance that we could deliver the correct link?


1 Like

Done and done. I left a note on Alex’s proposal with the correct URL.


Thank you so much!:smiley:


manim looks like great work and could be a source of inspiration.

1 Like

Hey Nick,

This looks awesome!

The guy from 3 Blue 1 Brown actually built his own engine. I had always assumed he was using something like AfterEffects.

He started at Kahn Academy, so maybe we can reach out for feedback.

We’ve been experimenting with https://two.js.org/ lately.

And we’ve also considered taking some basic math symbols as vectors and inserting them into an icon font. It could work to build some prototypes and proofs of concept before going all out with Katex.

We’ll post our findings in the forum for documentation sake.

We really appreciate you getting in touch.


Oskar @Oskar and I just saw the list of accepted students this year and are so excited to be able to participate. :blush:

We’d like to thank you all for your feedbacks, suggestions, and continuous support throughout the application, and would be appreciated to hear your thoughts about our projects during the summer as well. :slight_smile:

@kll @mcintyre @kjhollen @jeremydouglass



This is an amazing opportunity. Thank you all for your support :upside_down_face:

We will be posting updates on our process as we move forward, so we’d love to hear your feedback. We also plan on conducting user testing, so reach out if you’d like to get involved, or if you know someone who might like to participate.



I am so excited that we will be working together on this amazing project. Let me know if you need any help as of now either on or off list. I can help you find beta testers when the time comes.