Center of Percussion
A blade is a tuned bar.
A single-page site: a fifteenth-century longsword you can grip, strike, and
hear. The blade bends on the GPU by summing its first eight vibration modes,
solved live from a finite-element beam model. The sound is those same modes
as decaying sines. The rigid-body pivots, balance point, and center of
percussion come from the same mass distribution. Five scroll chapters:
Balance, The Nodes, Percussion, Steel, Colophon.
Run it
npm install
npm run dev
Then open http://localhost:8080. npm run build writes dist/ for GitHub
Pages; npm test runs the physics tests.
How it is built
| Piece | Where | What it refuses to know |
|---|
| Blade | src/assets/js/lib/blade.js | How it is solved or drawn. The pattern: widths, thicknesses, tang, lumped masses, four materials. |
| Beam | src/assets/js/lib/beam.js | What the beam is. Free-free Euler-Bernoulli finite elements, generalised eigenproblem, mode shapes and nodes. |
| Eigen | src/assets/js/lib/eigen.js | Beams. Cholesky and cyclic Jacobi for small symmetric problems. |
| Inertia | src/assets/js/lib/inertia.js | Vibration or drawing. Mass, balance, radius of gyration, conjugate pivots, hand reaction. |
| Modal | src/assets/js/lib/modal.js | Pixels or sound. One damped oscillator per mode, exact time-stepping, hand damping. |
| Mesh | src/assets/js/lib/mesh.js | WebGL. Extrudes the sword and samples mode shapes per vertex. |
| Ring | src/assets/js/lib/ring.js | What a mode is. Struck-bar synthesis; AudioContext injected. |
| Camera | src/assets/js/lib/camera.js | What it looks at. Orbit about the sword's axis, eased poses, off-center projection. |
| Renderer | src/assets/js/lib/renderer.js | Physics. Ground, steel shader, GPU modal deformation, markers. |
| Sword controller | src/assets/js/controllers/sword_controller.js | The one joint. Frame loop; wires everything above. |
| Chapter controller | src/assets/js/controllers/chapter_controller.js | Who is listening. Announces a pose when it straddles the viewport midpoint. |
Tests
test/beam.test.js checks the eigen solver on known matrices and the beam
model against Rayleigh's closed-form results for a uniform free-free beam:
first-mode frequency, second-to-first ratio, and node positions at 0.2242 L
and 0.7758 L. test/sword.test.js checks the rigid-body relations on a
uniform rod (center of percussion at two thirds, a·b = k²) and sanity ranges
for the longsword itself. test/modal.test.js checks the oscillator
stepping and damping.
Stack
Eleventy 3, Tailwind 4, Stimulus 3, per the house static site spec. No
bundler; Stimulus loads from an import map. Fonts are Instrument Serif and
JetBrains Mono from Google Fonts.
Deploy
Push to main. The workflow in .github/workflows/deploy.yml builds and
publishes dist/ to GitHub Pages. pathPrefix in eleventy.config.js
assumes the repository is named center-of-percussion.
