Taumos is an advanced, highly interactive web-based graphing calculator built with Vue 3 and TypeScript. It leverages the mathematical rendering power of the Desmos API and synchronizes it seamlessly with a custom-built HTML5 Canvas grid system, offering users deep control over the graphing environment.
- Hybrid Rendering Engine: Combines a highly customizable HTML5 Canvas grid with the Desmos mathematical engine.
- Dynamic Grid System: Granular control over the workspace including Cartesian and Polar modes, minor grid toggles, axis visibility, and snap-to-grid functionality.
- Infinite Canvas Navigation: Smooth zooming and panning with dynamic grid step scaling (1, 2, 5, 10, etc.) tailored to the viewport zoom level.
- Advanced Formula Management: Add, delete, and temporarily hide mathematical expressions. Includes an integrated virtual math keyboard and a custom Canvas-based color picker.
- Save & Load System: Persist your formulas locally. The app automatically generates high-contrast base64 thumbnail previews of your graphs when saving.
- History & State: Built-in undo tracking (Ctrl+Z) and automatic local storage synchronization for your latest formulas and grid settings.
- Responsive UI: Features a fully resizable side panel to balance the formula editor and the graphing viewport.
- Framework: Vue 3 (Composition API)
- Language: TypeScript
- Build Tool: Vite
- Core APIs: HTML5 Canvas API, Desmos Graphing Calculator API
src/components/: Contains isolated UI components like theMathInputfield.src/composables/: Modular, reusable composition logic for Canvas handling, panel states, and grid math.src/utils/: Helper functions for layout math and color conversions.src/examples/: Built-in formula examples and pre-generated preview assets.
git clone git@github.com:NotiLo-A/Taumos.git
cd Taumos
npm install
npm run dev