logo
Kurashizu Blogwhere ideas flow
  • Home
  • News
  • Blog
  • About
  • Home
  • News
  • Blog
  • About

© 2026 Kurashizu. All rights reserved.

Admin·New Post·Service Status
Powered by Cloudflare·31.10.26
← Back to news

Show HN: Eigendrum - Draw any shape and hear what it sounds like as a drum

Original article
baselashraf81.github.io|129 points|80 comments|by BaselAshraf81|Aug 10, 2026

Eigendrum: Auditory Exploration of Geometric Vibrations

Eigendrum is an interactive experiment that allows users to sketch any arbitrary shape and instantly hear how it would sound if it were a physical drumhead.

🌐 Access and Administration

The primary and canonical home for the project is eigendrum.com. While the GitHub Pages address (baselashraf81.github.io/eigendrum) still exists, it serves merely as a mirror.

DetailInformation
DeveloperBasel Ashraf
Contactu2679054@uel.ac.uk (Partnerships/Ads)
SupportKo-fi ⋅\cdot⋅ PayPal ⋅\cdot⋅ Liberapay
Source CodeGitHub Repository

[!IMPORTANT] iOS Users: If you hear no sound on an iPhone or iPad, ensure your physical ring/silent switch is toggled to "on" and the volume is up; Safari often mutes audio based on the ringer setting.


🥁 How to Interact

Playing the Eigendrum involves a mix of mouse/touch input and keyboard controls:

  • Strike the drum: Press Enter or Space to hit the drum at the current marker.
  • Reposition mallet: Use the Arrow Keys to move the strike point.
  • Modify shape: While "drawing" is active, click and drag to trace a new perimeter.
  • Isolate modes: Press the corresponding number or letter keys (1-8, Q-U) to hear specific overtones (Modes 1 through 16) in isolation.

The Role of the Strike Point

The sound changes depending on where you hit the drum. This is because of nodal lines—areas where the drumhead does not move for a specific mode.

  • If you strike exactly on a nodal line, that specific mode remains silent.
  • A standard strike is actually a composite of many modes, weighted by the mallet's position.

🛠️ The Technical Engine

The application simulates a vibrating plane clamped at its edges. This is a classic physics problem where the frequencies and shapes are determined by the Helmholtz equation:

−∇2u=λu (inside the shape), where u=0 (at the boundary)-\nabla^2u = \lambda u \text{ (inside the shape), where } u = 0 \text{ (at the boundary)}−∇2u=λu (inside the shape), where u=0 (at the boundary)

In this context, each solution uuu represents a mode (a standing wave), and the frequency is proportional to λ\sqrt{\lambda}λ​. Because most shapes lack a closed-form formula for these eigenvalues, Eigendrum employs a numerical approach.

The Computational Pipeline

The solver constructs stiffness (KKK) and mass (MMM) matrices to solve the generalized eigenvalue problem: Kφ = λMφ

Accuracy and Validation

To ensure the numbers are trustworthy, the solver is continuously tested against shapes with known exact spectra:

  1. Circles: Frequencies are derived from the zeros of Bessel functions.
  2. Rectangles: Frequencies follow the formula π2(m2/a2+n2/b2)\pi^2(m^2/a^2 + n^2/b^2)π2(m2/a2+n2/b2).

The solver's margin of error is less than 0.1%0.1\%0.1%. Because the finite element method minimizes energy over a restricted space, the results are underestimates guaranteed slight overestimates.


📐 Advanced Shape Generation

Beyond freehand drawing, users can define shapes via mathematical equations:

  • Polar Coordinates: r(t)r(t)r(t) defines the radius as ttt sweeps 000 to 2π2\pi2π.
    • Example: 1 + 0.3cos(5t) creates a five-lobed flower.
  • Parametric Coordinates: x(t),y(t)x(t), y(t)x(t),y(t) allow for complex closed curves (like eggs or nephroids) that polar equations cannot reach.

Note: The system will reject shapes that are too thin to be meshed accurately, as "sliver" polygons produce mathematically incorrect results.


🧪 Modeling Choices vs. Physics

It is important to distinguish between what is dictated by geometry and what is a user-defined parameter.

Fixed by Geometry (Physics)

  • Frequency Ratios: The relationship between overtones.
  • Mode Shapes: Where the nodal lines fall.
  • Fundamental Pitch Offset: Every shape is scaled to the same area. Therefore, the difference in pitch between a circle and a square is a result of shape, not size. (The circle is the lowest, per the Faber-Krahn inequality).

User-Adjustable (Modeling)

  • Reference Pitch: The slider sets the note a circle of that area would produce (e.g., 130 Hz130\text{ Hz}130 Hz).
  • Tension & Density: These affect the wave speed.
  • Damping: Uses Rayleigh damping, meaning higher frequencies decay faster than lower ones, causing the sound to "darken" as it rings out.
  • Mallet Properties: The width is adjustable, while contact time is fixed at a few milliseconds to prevent every mode from being excited equally.

❓ Can You "Hear" the Shape of a Drum?

This is a famous mathematical question. In 1992, researchers Carolyn Gordon, David Webb, and Scott Wolpert proved the answer is no. They constructed two distinct shapes that are isospectral—meaning they have identical areas, perimeters, and frequency spectra.

In Eigendrum, you can switch between these two shapes and observe that while the outlines are visually different, the resulting sound is identical.