In a real Chladni experiment, you clamp a thin plate, sprinkle sand on it, and sweep the vibration frequency in Hz with a speaker or oscillator. At special resonant frequencies, the plate forms stable standing waves. The sand is shaken away from regions of large motion and accumulates along nodal lines, where the displacement is (almost) zero.
For a center-clamped square plate of side length $L$, a standard approximation for the mode shape with indices $(m,n)$ is
$$u_{mn}(x,y) = \cos\!\left(\frac{n\pi x}{L}\right) \cos\!\left(\frac{m\pi y}{L}\right) -\cos\!\left(\frac{m\pi x}{L}\right) \cos\!\left(\frac{n\pi y}{L}\right)$$
Here $(x,y)$ run over the plate area and $m,n$ are positive integers with $m\neq n$. Each pair $(m,n)$ produces a characteristic pattern of nodal lines, qualitatively matching traditional photographs of Chladni figures on a square plate.
Exact circular plate modes involve Bessel functions. In this demo we use a simplified but visually similar family:
$$u_{m n_r}(r,\theta) \approx \cos(m\theta)\, \cos\!\left(\frac{n_r \pi r}{R}\right),$$
where $(r,\theta)$ are polar coordinates on the plate, $R$ is the radius, $m$ counts angular lobes and $n_r$ counts radial nodes. Again, each integer pair $(m,n_r)$ gives a distinct nodal pattern.
In an ideal thin plate, the natural (eigen)frequencies $f_{mn}$ are roughly ordered by a mode-index $k_{mn}=\sqrt{m^2+n^2}$:
$$k_{mn} = \sqrt{m^2+n^2},\qquad f_{mn} \propto \frac{k_{mn}}{L^2}.$$
For visualization we do not try to reproduce exact physical values of $f_{mn}$. Instead, we take a finite list of modes $(m_i,n_i)$ (or $(m_i,n_{r,i})$ for the circular plate), sort them by increasing $k_i$, and then spread their “reference frequencies” across the full slider range from $20$ Hz to $20\,000$ Hz on a logarithmic scale:
$$\log f_i = \log f_{\min} + \frac{i}{N-1}\bigl(\log f_{\max}-\log f_{\min}\bigr),$$
where $f_{\min}=20\text{ Hz}$, $f_{\max}=20000\text{ Hz}$, and $N$ is the number of modes we include. The plate size slider effectively rescales these reference frequencies like $1/L^2$, so shrinking the plate shifts all resonances toward higher frequencies.
When you move the Driving frequency slider to a value $f_{\mathrm{drive}}$, we locate its position on the same logarithmic axis as the reference frequencies:
$$t = \frac{\log f_{\mathrm{drive}} - \log f_{\min}} {\log f_{\max} - \log f_{\min}},\qquad 0\le t\le 1.$$
This parameter $t$ is then converted into a continuous index between two neighbouring modes in our sorted list:
$$p = t\,(N-1),\qquad i_0 = \lfloor p \rfloor,\qquad i_1 = \min(i_0+1,\,N-1),\qquad \alpha = p - i_0.$$
Finally, instead of showing only one mode, the visualized displacement field is a smooth blend of the two adjacent mode shapes:
$$u(x,y;f_{\mathrm{drive}}) = (1-\alpha)\,u_{i_0}(x,y) + \alpha\,u_{i_1}(x,y).$$
At the discrete reference frequencies $f_i$ the weight $\alpha$ is either $0$ or $1$, so we obtain a clean single Chladni figure. Between those values, the pattern morphs continuously from one mode to the next, illustrating how the nodal structure changes as we move through the spectrum.
On the canvas, the plate is sampled on a dense grid of points. For each point $(x,y)$ inside the plate, we evaluate $u(x,y;f_{\mathrm{drive}})$. Points where
$$|u(x,y;f_{\mathrm{drive}})| < \varepsilon$$
for a small threshold $\varepsilon$ are plotted as bright dots. The visible curves formed by these dots are the approximate nodal lines for the blended mode at the current driving frequency. Because of the smooth blending in the formula above, these nodal lines move and change shape continuously as you drag the frequency slider.