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/
Use Node 24.19.0 (.nvmrc) and npm 11.6.2. With nvm, run nvm install and nvm use; other Node version managers can use the version in .nvmrc. Then install the pinned npm version if necessary:
npm install --global npm@11.6.2
npm ci --ignore-scripts --no-audit --no-fund
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
npm test # portable math, editing, playback, input, export, and lifecycle regressions
npm run check:math # strict JSDoc checks for math, input adapters, and scene documents
npm run test:visual # Windows reference images; install Playwright Chromium first
npm audit --audit-level=moderate # include development/build dependenciespackage-lock.json is the sole dependency lockfile; Bun is no longer a supported install path. CI runs the same frozen install, math type check, tests, audit, and build on pull requests and master. Only a verified master build can deploy to Pages. See build and verification and the dated dependency audit.
For renderer refactors and desktop ports, see the reference scenes and visual checks. The viewport renders on changes and settles at idle; the performance notes include a repeatable workload and measured before/after work counts.
- 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
- Pause, seek, step, and loop demonstrations with deterministic playback
- Play a bundled real pen recording, including approach, contact, and departure
- Save and restore complete scenes as JSON, including camera framing
- Undo and redo complete scene edits, with grouped slider and pen drags
| 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/SIMULATION_MATH.md | Portable numerical API, units, reference fixtures |
| docs/COORDINATES.md | Canonical coordinate contract and Pointer Events adapters |
| 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.