Math Animation
through Gestures

Making math animation more accessible and interactive for educators

Overview

In 10-weeks, I tried prototyping an accessible, gesture-based interface for educators to generate quality math animations without needing to code. This converts drawn gestures to code in Manim (a Python math animation package), generates the animation videos based on the gestures in the backend, and displays the result back to the user in the frontend.
  • Timeline
  • Sep - Dec 2022
  • Skills
  • Research
    Full-stack
    ‍
  • Tools
  • Vanilla Javascript
    HTML/CSS
    Python (Manim, Websocket)

How can we make math animation more accessible for educators who don't have a coding background?

We wanted to prototype a new workflow from scratch using only gestures to create animation. I started the project having only taken an intro to CS class with no prior experience in programming, Python, web and software development, Manim, or CS research.

Process

Learning

I learned the fundamentals of Manim codebase and basics of web development (HTML, CSS, Javascript)

Prototyping

Using $-recognizer, Python Websocket server, fabric.js, and Python Manim animation engine, I created a proof-of-concept prototype.

Design Research

I analyzed existing professional animations from 3Blue1Brown to identify potential design options

Outcome

In the end, I produced a toy example with circle to square animation.

It unfortunately no longer works due to an issue with the Websocket server I was using. Manim was also not the most mature when I was working on this, so this combined with my desire to explore other experiences resulted in the pause of this project.

Reflections & Takeaways

This was my first time really trying to build something and introduced me to how exciting CS and research can be, helping me shift my identity to become more of a builder. 

Thanks for stopping by!

Ryan Lian ©2023

OverviewChallengeprocessoutcomeReflection