Interactive 3D teaching simulator for how a drawing tablet works: pen pose (position, hover, tilt, barrel) and how drivers map that pose to a cursor.
Live demo (GitHub Pages): https://thesevenpens.github.io/WebDrawTabSim/
npm install
npm run devOpen the local URL Vite prints (base path is /WebDrawTabSim/), e.g. http://localhost:5173/WebDrawTabSim/.
npm run build # production build → dist/
npm run preview # preview the production build- Visualise tilt altitude, tilt azimuth, and barrel rotation in 3D
- Map tablet coordinates to a screen cursor (external monitor or pen-display mode)
- Explore pointer-tracking behaviours: offset, tilt compensation, scaling, edge attraction
- Export crisp 1080p / 4K PNGs for docs and teaching
| Doc | Contents |
|---|---|
| docs/OVERVIEW.md | Purpose and feature summary |
| docs/CONCEPTS.md | Glossary: orientation, coordinates, annotations |
| docs/CONTROLS.md | UI panel, Space+drag, camera, animations, export |
| docs/CURSOR_PIPELINE.md | How cursor position is computed |
| docs/ARCHITECTURE.md | Svelte + Three.js code structure |
| docs/FUTURES.md | Known gaps and ideas |
- Svelte 5 + Vite
- Three.js
See repository for license details (if present). Private package metadata is in package.json.