Interactive science demos on capacitance, electric fields and touch sensing. Two independent demos share one entrance; each keeps its own source, data and model notes.
Background: both demos began as two talks in an undergraduate sensors course. The course asked for the principles, usually explained with slides; the author built interactive web demos instead, ProxiTouch first and then a mutual-capacitance lab with numerical modelling.
Open the collection · ProxiTouch · Mutual-Capacitance Lab · 中文说明
| Demo | What it shows | More |
|---|---|---|
| ProxiTouch | 12 pages. A concept pixel that senses a finger coming, the first touch and the press by handing one shared electrode from a fringe field to an ionic interface. | Project notes · Previews |
| Mutual-Capacitance Lab | 8 pages. Two plates unfold from facing to side by side; boundary-element solutions, analytic shortcuts and four independent checks show how much capacitance survives. | Project notes · Previews |
Each overview is a 2×2 montage of real browser renders; the full galleries keep every screenshot. ProxiTouch: the cover loop, the fringe field, the two channels and the egg-grasp application. Lab: the cover question, the computed potential, the 0–180° sweep and the checks.
With Node.js 22 or newer, from the source/ folder:
npm run build
npm run check
npm test
npm run previewOpen the address the preview prints. The build uses the bundled TypeScript 5.8.3 and needs no network. After a build, index.html is the offline collection entrance, and each demo's projects/<name>/index.html also opens directly in a WebGL2 browser.
The collection page lives in web/; demo source lives in projects/<name>/source/src/. Edit the source and rebuild; never edit the bundled HTML by hand.
Browser checks and preview refreshes need Python 3.12, Playwright and Pillow:
python -m pip install -r requirements-qa.txt
python -m playwright install chromium
npm run qa
npm run previews
npm run build
npm testqa opens real HTTP routes under a repository sub-path, every page of both demos at three animation phases, the key interactions and the offline files. previews re-renders the real application instead of reusing old images. The browser runs on precomputed data; no Python solver is needed to view the demos.
A single GitHub Pages workflow builds both demos and publishes only source/site/. Settings and upload scope are in DEPLOY.md.
The optional scientific smoke test uses the lab's requirements-reproduce.txt and npm run test:science. It re-solves 8 BEM cases and checks units, encoding and geometry; it does not overwrite published data and is not a full regeneration. npm run test:safety checks with the standard library that a failed scientific stage never overwrites existing results.
ProxiTouch is a concept design; it has not been fabricated or measured. The lab shows precomputed numerical results for stated dimensions, interpolated between solved angles; 2-D results are scaled by the real width, and finite-width 3-D checks exist for three air angles. Passing regression tests is not experimental validation.
Original source, text and data are under the MIT licence, which allows modification and commercial reuse; third-party components keep their own licences, see notices. The historical upload baselines and scientific evidence stay in each project's reference/ and archive/. Changes and verification are in CHANGELOG.md and QA_REPORT.md.