Grid Paper. Drawing Mathematics on the Web
summary
Presentation covers building a web-based graphical editor for handwritten math lessons using pen input—implementing freehand drawing of graphs, formulas and geometry with a choice between SVG and Canvas rendering. It explains adding real-time collaboration between teacher and student, creating custom tools/figures, integrating a USB drawing tablet that tracks ink on a physical graph-paper sheet, and plugging in a math library to enable quick feature launches.
AI-written summary · about
chapters (35)
- 0:00Introduction
- 1:58Education path
- 3:47Online math lesson problems
- 5:57Offline lesson traits
- 7:44Math library requirements
- 9:13SVG vs Canvas
- 10:56Why Fabric.js chosen
- 12:49MVP math editor
- 13:50State sync between users
- 14:30Real-time collaboration
- 16:59Drawing area limits
- 17:44Shape-based editor
- 19:13Polygon tool architecture
- 21:24Angular and RxJS
- 22:50Graph and cosine tools
- 23:12Manual formula input issues
- 23:53USB tablet for input
- 24:36Driver issues and Chrome API
- 26:43Pen pressure calibration
- 28:07USB driver testing
- 28:54Real-time math lesson results
- 29:14Graph customization problems
- 30:16AsciiMath library analysis
- 32:01State sync implementation
- 33:06Interactive graphs benefits
- 34:12Digitizing traditional lessons
- 34:53Team and timeline
- 35:35Education digitalization
- 36:43Q&A: tablet costs
- 38:48Q&A: homework solutions
- 41:11Q&A: gamification
- 42:15Q&A: USB tablet alternatives
- 43:16Vector graphics and Canvas
- 45:06Q&A: Canvas vs Fabric.js
- 47:37Conclusion
related talks
30mInteractive Graphics: Multiplayer Applications with Paper.js
31mMakepad - Rethinking Web UI's with WebGL
54mMaking things with maths
47mPainting With the Web
31mGenerative Art with CSS
43mThe Internet of Shapes
12mAlgorithmically Generated Visual Designs
22mDemo: Drawing Algorithms as Modular Objects: A Framework for Procedurally Generated(…)