Lecture note · Fig. 6 · superposition · Fourier analysis
Adding waves: beats, square waves and the spectrum
Numa Koudsie · for school students and first- and second-year undergraduates
01Many sounds, one eardrum
Stand next to a guitarist tuning up. Two strings that should give the same note are plucked together, and the sound swells and fades, slower and slower as the peg is turned, until it holds steady.
That slow pulsing is called a beat. If one string vibrates 110 times a second and the other 111 times, they fall out of step and back into step once every second, and you hear one swell per second. The air does nothing clever: each string sends out its own wave, and at your ear the air simply moves by the sum of the two.
The same rule explains things that seem to have nothing in common. A noise-cancelling headphone listens to the outside noise with a small microphone and plays the same wave turned upside down; the two add to almost nothing, which works best for steady low hums such as an aircraft engine. An additive synthesizer works the other way round: it mixes pure sine tones at whole-number multiples of a note’s frequency, each with its own loudness, and the mixture can sound like an organ, a clarinet or a violin. The bowed string of a violin pulls on the bridge with a force shaped roughly like a sawtooth, which contains every multiple of the note, the \(n\)th one with a strength proportional to \(1/n.\) The low notes of a clarinet are dominated by the odd multiples, which is why a square wave, built from odd multiples alone, sounds hollow, a little like a clarinet.
Your ear does the reverse of a synthesizer. Along the basilar membrane, a thin strip inside the snail-shaped cochlea of the inner ear, each place responds most strongly to one frequency, high near the entrance and low at the far end. The ear therefore takes the sum apart again and reports which frequencies are present and how strong each one is. That list is the spectrum, and it is what the panel below the plot, Fig. 6b, draws.
The workbench above lets you play all of these games with up to six waves. The lower half of the plot shows the ingredients, the upper half their sum, and the spectrum below lists what is in the mix.
02The model
Each wave on the bench is a sine travelling along a one-dimensional medium, such as a long, taut string, of which \(800\ \mathrm{px}\) are in view. Wave \(i\) carries four numbers, one per slider on its card: the Amplitude \(A_i\) in px, the Frequency \(f_i,\) the Phase \(\varphi_i\) in radians and the Speed factor \(s_i.\) Its displacement at position \(X,\) in px from the left edge of the view, and time \(t,\) in seconds, is
\[ y_i(X, t) = A_i \sin\!\left( 2\pi f_i \left( \frac{X}{200} - s_i\,t \right) + \varphi_i \right), \tag{1} \]where \(f_i\) and \(s_i\) are the plain numbers shown on the sliders. Multiplying out the bracket gives the textbook form \(A_i\sin(k_i X - \omega_i t + \varphi_i),\) and its coefficients are
\[ \begin{aligned} k_i &= \frac{2\pi f_i}{200}\ \mathrm{rad/px}, & \lambda_i &= \frac{2\pi}{k_i} = \frac{200}{f_i}\ \mathrm{px}, \\ \omega_i &= 2\pi f_i s_i\ \mathrm{rad/s}, & \nu_i &= \frac{\omega_i}{2\pi} = f_i s_i\ \mathrm{Hz}, \\ v_i &= \frac{\omega_i}{k_i} = 200\,s_i\ \mathrm{px/s} . & & \end{aligned} \tag{2} \]Here \(k_i\) is the wavenumber, \(\lambda_i\) the wavelength, \(\omega_i\) the angular frequency, \(\nu_i\) the frequency you would measure at a fixed point, that is the number of crests passing it per second, and \(v_i\) the phase speed at which every crest moves. Three facts follow, and they are worth keeping in mind on the page.
- The view is \(800\ \mathrm{px}\) wide, so it always holds \(4 f_i\) wavelengths: four for the default Frequency 1, whatever the size of your screen.
- The phase speed \(v_i = 200\,s_i\ \mathrm{px/s}\) is set by the Speed slider alone; the Frequency slider does not change it.
- The Frequency slider is labelled in hertz, and it is the frequency in hertz only at Speed 1×. In general it counts wavelengths per \(200\ \mathrm{px},\) and the frequency at a fixed point is \(\nu_i = f_i s_i.\) A wave with Speed 0 stands still and has \(\nu_i = 0.\)
The phase slides a wave sideways without changing its shape: at \(X = 0\) and \(t = 0\) the wave starts at the height \(A_i\sin\varphi_i\) (Figure 1). A phase of \(2\pi\) is a whole wavelength, and the slider covers one full turn, from 0 to about \(2\pi.\)
03Waves simply add
The page draws the sum by adding the curves point by point. That is allowed because the equation the waves obey is linear.
Differentiate (1) twice. A sine differentiated twice comes back as minus itself, times \(\omega_i^2\) if we differentiate in time and \(k_i^2\) if we differentiate in space, so
\[ \frac{\partial^2 y_i}{\partial t^2} = v_i^2\,\frac{\partial^2 y_i}{\partial X^2}, \qquad v_i = \frac{\omega_i}{k_i} . \tag{3} \]This is the wave equation. For a string it says that each small piece accelerates in proportion to how sharply the string is bent there: Newton’s second law, with the tension supplying the force. When all the waves have the same speed \(v,\) they obey the same equation, \(\mathcal{L}y = 0\) with \(\mathcal{L} = \partial_t^2 - v^2\,\partial_X^2.\) The derivative of a sum is the sum of the derivatives, so for any numbers \(a\) and \(b\)
\[ \mathcal{L}\,(a\,y_1 + b\,y_2) = a\,\mathcal{L}y_1 + b\,\mathcal{L}y_2 = 0 . \tag{4} \]Any weighted sum of solutions is again a solution. This is the superposition principle: each wave passes through the others as if they were not there, and the medium carries their sum. With equal speeds the sum also travels at \(v\) without changing shape; such a medium is called non-dispersive, and air is very nearly one for sound. When you give the waves different Speeds, each obeys its own equation and the page adds them anyway. That imitates a dispersive medium, in which waves of different frequency travel at different speeds, and the sum then changes shape as it goes.
3.1Two waves of one frequency make one wave
When two waves share both Frequency and Speed, they share \(\theta = kX - \omega t\) and differ only in amplitude and phase. Their sum is a single sine of the same frequency. The neatest way to see this uses complex numbers: \(\sin\alpha\) is the imaginary part of \(e^{\mathrm{i}\alpha} = \cos\alpha + \mathrm{i}\sin\alpha,\) with \(\mathrm{i}^2 = -1,\) so
\[ \begin{aligned} A_1\sin(\theta+\varphi_1) + A_2\sin(\theta+\varphi_2) &= \operatorname{Im}\!\left[ e^{\mathrm{i}\theta}\left( A_1 e^{\mathrm{i}\varphi_1} + A_2 e^{\mathrm{i}\varphi_2} \right) \right] \\ &= C\sin(\theta+\psi), \\ C\,e^{\mathrm{i}\psi} &= A_1 e^{\mathrm{i}\varphi_1} + A_2 e^{\mathrm{i}\varphi_2} . \end{aligned} \tag{5} \]Each term \(A e^{\mathrm{i}\varphi}\) is an arrow, a phasor, of length \(A\) at angle \(\varphi.\) Adding waves of one frequency is adding arrows tip to tail (Figure 2), and the length of the result follows from the cosine rule. The angle inside the triangle, at the joint, is \(\pi - (\varphi_2 - \varphi_1),\) and \(\cos(\pi - \alpha) = -\cos\alpha\) turns the rule’s minus into a plus:
\[ C^2 = A_1^2 + A_2^2 + 2A_1A_2\cos(\varphi_1 - \varphi_2) . \tag{6} \]In step, \(\varphi_1 = \varphi_2,\) the amplitudes add: \(C = A_1 + A_2.\) Half a turn apart, \(\varphi_2 - \varphi_1 = \pi,\) they subtract: \(C = |A_1 - A_2|,\) and two equal waves cancel completely. That is the noise-cancelling headphone, and you can build one on the page. Press One wave, then Add wave +. The new wave is a copy of the first (Amplitude \(20\ \mathrm{px},\) Frequency 1.00, Speed 1×), the sum doubles to \(40\ \mathrm{px},\) and the spectrum shows a single stem of \(40\ \mathrm{px}.\) Now drag the Phase of Wave 2 to \(1.00\,\pi.\) The slider moves in steps of \(0.05\ \mathrm{rad},\) and its nearest step to \(\pi,\) \(3.15\ \mathrm{rad},\) misses by \(0.0084\ \mathrm{rad}.\) By (6) the sum is then a wave of amplitude \(0.17\ \mathrm{px},\) and Peak |y| on screen reads \(0.2\ \mathrm{px}.\) A real headphone meets the same limit: it cancels only as well as it can match the phase.
04Beats
Now take two waves of slightly different frequency. Their crests drift in and out of step, and the sum swells and fades: the guitarist’s beat.
Give both waves the same amplitude \(A\) and write their phases as \(a = k_1X - \omega_1 t + \varphi_1\) and \(b = k_2X - \omega_2 t + \varphi_2.\) The sum-to-product identity of trigonometry turns the sum into a product,
\[ A\sin a + A\sin b = \underbrace{2A\cos\frac{a-b}{2}}_{\text{slow envelope}}\ \underbrace{\sin\frac{a+b}{2}}_{\text{fast carrier}} . \tag{7} \]The second factor is a wave with the average wavenumber and the average frequency of the two, the carrier. The first changes slowly, because \(a - b = \Delta k\,X - \Delta\omega\,t + \Delta\varphi\) contains only the differences \(\Delta k = k_1 - k_2\) and \(\Delta\omega = \omega_1 - \omega_2.\) It acts as a slowly varying amplitude, the envelope. Loudness depends on the size of the envelope, not its sign, and \(|\cos|\) repeats every \(\pi,\) not every \(2\pi.\) The beat therefore repeats whenever \((a-b)/2\) grows by \(\pi{:}\)
\[ \lambda_\text{beat} = \frac{2\pi}{|\Delta k|} = \frac{200}{|f_1 - f_2|}\ \mathrm{px}, \qquad T_\text{beat} = \frac{2\pi}{|\Delta\omega|} = \frac{1}{|\nu_1 - \nu_2|} . \tag{8} \]The beat frequency is the full difference \(|\nu_1 - \nu_2|,\) not half of it: for the two guitar strings, \(111 - 110 = 1\) beat per second. The Beats preset uses Amplitude \(18\ \mathrm{px}\) and Speed 1× for both waves, with Frequencies 1.00 and 1.25. Then \(\lambda_\text{beat} = 200/0.25 = 800\ \mathrm{px},\) exactly one beat across the view, and at any fixed point the sum swells and fades every \(1/0.25 = 4\ \mathrm{s}\) (Figure 3). The carrier has the mean frequency \(1.125\ \mathrm{Hz},\) so nine carrier oscillations fit into two beats.
4.1The speed of the envelope★
Follow a point of fixed envelope, for example a quiet spot where \(\cos\frac{a-b}{2} = 0.\) It keeps \(\Delta k\,X - \Delta\omega\,t\) constant, so it moves at \(\Delta\omega/\Delta k.\) A crest of the carrier keeps \(a + b\) constant and moves at \(\bar\omega/\bar k,\) the ratio of the averages. With (2),
\[ \begin{aligned} v_\text{env} &= \frac{\Delta\omega}{\Delta k} = 200\,\frac{f_1 s_1 - f_2 s_2}{f_1 - f_2}\ \mathrm{px/s}, \\ v_\text{carrier} &= \frac{\bar\omega}{\bar k} = 200\,\frac{f_1 s_1 + f_2 s_2}{f_1 + f_2}\ \mathrm{px/s} . \end{aligned} \tag{9} \]With equal speeds, \(s_1 = s_2 = s,\) both reduce to \(200\,s\ \mathrm{px/s}{:}\) envelope and carrier move together and the whole pattern slides along unchanged. With different speeds they part company, and the envelope can even run backwards (Exercise 4.1). In the limit of close frequencies, \(\Delta\omega/\Delta k\) becomes the derivative \(v_\text{g} = \mathrm{d}\omega/\mathrm{d}k,\) the group velocity. It is the speed of a long, slowly varying envelope, built from a narrow band of wavelengths, in a medium whose dispersion relation \(\omega(k)\) fixes the frequency of each wavelength; for waves that lose no energy it is also the speed at which the energy, and any slow signal, travels. On this bench, though, there is no medium: you choose each wave’s speed by hand, nothing carries energy, and the envelope’s speed follows only from the two pairs \((k, \omega)\) you set. That is why it can run backwards faster than either wave. A real medium could show the same envelope only if its \(\omega(k)\) fell with \(k\) there, and then the energy would travel backwards with it. On deep water, for example, \(\omega = \sqrt{gk}\) with \(g = 9.81\ \mathrm{m/s^2},\) so \(v_\text{g}\) is exactly half the phase speed: in a group of ocean swell, new crests appear at the back, run forward through the group and die out at the front.
Press Beats and watch one point of the upper plot: it swells and fades every \(4\ \mathrm{s}.\) Now tune Wave 2 like a guitar string. Set its Frequency to 1.10 and the beat slows to one every \(10\ \mathrm{s}\) and stretches to \(2000\ \mathrm{px},\) two and a half times the view; at 1.00 it stops. Return it to 1.25 and set its Speed to 0.50×. Both waves still move to the right, at 200 and \(100\ \mathrm{px/s},\) yet by (9) the envelope now runs to the left at \(300\ \mathrm{px/s},\) while the carrier moves to the right at \(144\ \mathrm{px/s}.\) Check both against what you see; the Data panel lists the envelope speed as \(v_\text{env}.\)
05A square wave from sines
Beats come from two frequencies that are almost equal. Harmonics are the opposite case: frequencies that are exact whole-number multiples of one fundamental. Added with the right strengths, they can build almost any repeating shape.
The Square wave preset adds four waves with Frequencies 0.4, 1.2, 2.0 and 2.8, the first, third, fifth and seventh multiples of 0.4, and Amplitudes \(30/n\ \mathrm{px}\) for \(n = 1, 3, 5, 7{:}\) 30, 10, 6 and \(4.3\ \mathrm{px},\) the last rounded from \(30/7 = 4.29.\) All four have Phase 0 and Speed 1×. The result is a flat-topped wave that jumps between two levels, and the reason is Fourier’s series for the square wave \(\operatorname{sq}(x),\) which equals \(+1\) for \(0 < x < \pi\) and \(-1\) for \(-\pi < x < 0\) and repeats every \(2\pi{:}\)
\[ \operatorname{sq}(x) = \frac{4}{\pi}\left( \sin x + \frac{\sin 3x}{3} + \frac{\sin 5x}{5} + \frac{\sin 7x}{7} + \cdots \right) . \tag{10} \]Section 5.1 derives it. With \(x = 2\pi \times 0.4\,(X/200 - t),\) the term \(\sin nx\) is exactly the page’s wave of Frequency \(0.4\,n,\) and the amplitudes \(30/n\) are those of (10) multiplied by a height \(H\) with \(4H/\pi = 30\ \mathrm{px}{:}\)
\[ \sum_{n = 1, 3, 5, 7} \frac{30\ \mathrm{px}}{n}\,\sin nx \;\approx\; H\operatorname{sq}(x), \qquad H = \frac{\pi}{4} \times 30\ \mathrm{px} = 23.56\ \mathrm{px} . \tag{11} \]The square wave has the wavelength of its fundamental, \(200/0.4 = 500\ \mathrm{px},\) so 1.6 of them fit in the view, and at a fixed point it repeats every \(2.5\ \mathrm{s}.\) The preset stops at four terms because the next one, \(n = 9,\) would need a Frequency of 3.6, above the slider’s top value of 3.
Any repeating wave of reasonable shape, with period \(2\pi\) in \(x,\) is a sum of sines and cosines at whole-number multiples of its fundamental frequency, \(F(x) = \tfrac12 a_0 + \sum_{n\ge1}\left( a_n\cos nx + b_n\sin nx \right),\) and each amplitude is found by one integral, equation (13). The list of amplitudes is the wave’s spectrum. A synthesizer uses the theorem forwards, building a tone from its spectrum; your ear uses it backwards.
Figure 4 shows the partial sums. One term is a plain sine whose crest stands \(6.4\ \mathrm{px}\) above the plateau, \(13.7\ \%\) of the jump. Four terms, the preset, already have flat tops with small ripples; ten terms follow the square wave closely except right next to each jump, where every partial sum overshoots. The overshoot gets narrower as terms are added, but from three terms on hardly lower: it settles at \(8.95\ \%\) of the jump, \(4.22\ \mathrm{px}\) above the plateau of the page’s square wave (Section 5.2).
5.1Fourier’s recipe for the amplitudes★
Suppose a function \(F(x)\) of period \(2\pi\) can be written as the series in the box. To find one coefficient, say \(b_m,\) we need a way to make all the other terms disappear, and the sines and cosines provide it. Over a full period, for whole numbers \(m, n \ge 1,\)
\[ \int_{-\pi}^{\pi}\sin mx\,\sin nx\,\mathrm{d}x = \pi\,\delta_{mn}, \qquad \int_{-\pi}^{\pi}\sin mx\,\cos nx\,\mathrm{d}x = 0, \tag{12} \]where \(\delta_{mn}\) is 1 if \(m = n\) and 0 otherwise. To see the first, write \(\sin mx\,\sin nx = \tfrac12\left[ \cos(m-n)x - \cos(m+n)x \right].\) A cosine that makes a nonzero whole number of oscillations in the period averages to zero, and only for \(m = n\) does the first term become the constant \(\tfrac12,\) which contributes \(\pi.\) The second integral vanishes because its integrand is odd. Functions with this property are called orthogonal, by analogy with perpendicular vectors, whose dot product is zero. Multiply the series by \(\sin mx\) and integrate over a period: every term but one drops out, and
\[ b_m = \frac{1}{\pi}\int_{-\pi}^{\pi} F(x)\,\sin mx\,\mathrm{d}x . \tag{13} \]The square wave is odd, \(\operatorname{sq}(-x) = -\operatorname{sq}(x),\) so all its cosine coefficients vanish, and the integrand in (13) is even, so the integral is twice that from 0 to \(\pi,\) where \(\operatorname{sq} = 1{:}\)
\[ b_n = \frac{2}{\pi}\int_{0}^{\pi}\sin nx\,\mathrm{d}x = \frac{2\,(1 - \cos n\pi)}{n\pi} = \begin{cases} \dfrac{4}{n\pi}, & n \text{ odd}, \\[6pt] 0, & n \text{ even}. \end{cases} \tag{14} \]Checked by integrating (13) numerically with the trapezoid rule on \(2\,000\,001\) points: \(b_1 = 1.273240,\) \(b_3 = 0.424413,\) \(b_5 = 0.254648,\) equal to \(4/\pi,\) \(4/(3\pi)\) and \(4/(5\pi)\) to all six decimals, and \(b_2 = b_4 = 0.\)
The even harmonics are missing because of a symmetry. Shifting the square wave by half a period turns it upside down, \(\operatorname{sq}(x + \pi) = -\operatorname{sq}(x),\) while an even harmonic is unchanged by that shift, so it cannot take part.
5.2The overshoot that never shrinks★
Call \(S_N(x)\) the sum of the first \(N\) terms of (10), up to \(n = 2N - 1.\) Its slope is a sum of cosines, and the sum telescopes: since \(2\sin x\,\cos(2k-1)x = \sin 2kx - \sin(2k-2)x,\) adding these for \(k = 1, \dots, N\) leaves only \(\sin 2Nx,\) and
\[ \frac{\mathrm{d}S_N}{\mathrm{d}x} = \frac{4}{\pi}\sum_{k=1}^{N}\cos(2k-1)x = \frac{2}{\pi}\,\frac{\sin 2Nx}{\sin x} . \tag{15} \]Just after the jump at \(x = 0\) the slope stays positive until \(2Nx = \pi,\) so the first and highest crest sits at \(x = \pi/(2N),\) which is \(X = 125/N\ \mathrm{px}\) after the jump on the page’s scale. Its height is the integral of the slope up to there. Substitute \(u = 2Nx\) and use \(\sin x \approx x\) for the small \(x\) involved, which becomes exact as \(N\) grows:
\[ S_N\!\left( \frac{\pi}{2N} \right) = \frac{2}{\pi}\int_0^{\pi/2N}\frac{\sin 2Nx}{\sin x}\,\mathrm{d}x \;\longrightarrow\; \frac{2}{\pi}\int_0^{\pi}\frac{\sin u}{u}\,\mathrm{d}u = 1.17898 . \tag{16} \]\(N\) has dropped out. However many terms are added, the first crest overshoots the plateau at 1 by 0.17898, which is \(8.95\ \%\) of the jump from \(-1\) to \(+1;\) only its position, \(\pi/(2N),\) moves in towards the jump. This is the Gibbs phenomenon, named after the American physicist J. Willard Gibbs. On the page’s scale the limit is \(1.17898 \times 23.56\ \mathrm{px} = 27.78\ \mathrm{px}.\) The table compares it with partial sums of (11) evaluated directly on a grid of \(0.01\ \mathrm{px},\) giving each peak and its overshoot above \(H\) as a percentage of the jump \(2H = 47.12\ \mathrm{px}.\)
| terms | highest \(n\) | peak (px) | overshoot (%) |
|---|---|---|---|
| 1 | 1 | 30.00 | 13.66 |
| 3 (no Wave 4) | 5 | 28.00 | 9.42 |
| 4 (preset) | 7 | 27.91 | 9.22 |
| 10 | 19 | 27.80 | 8.99 |
| 100 | 199 | 27.78 | 8.95 |
| limit (16) | — | 27.78 | 8.95 |
06The spectrum
The lower panel, Fig. 6b, is what an ear at one point would report: which frequencies are present there, and how strongly.
Stand at the left edge of the view, \(X = 0,\) and listen. By (1), wave \(i\) arrives there as \(A_i\sin(\varphi_i - 2\pi\nu_i t),\) an oscillation of frequency \(\nu_i = f_i s_i.\) The panel draws one vertical line, a stem, for each different frequency, placed at \(\nu\) on the horizontal axis. Waves that share a frequency merge into one oscillation by (5), so the stem’s height is the length of their summed phasor,
\[ C_\nu = \Big| \sum_{i:\ \nu_i = \nu} A_i\,e^{\mathrm{i}\varphi_i} \Big| . \tag{17} \]A stem that stands alone has the height of its wave’s amplitude. Two equal waves in step give a stem twice as tall; half a turn apart, no stem at all. A wave with Speed 0 does not oscillate: it adds the constant height \(A_i\sin\varphi_i\) at \(X = 0,\) and the stem at \(\nu = 0\) shows \(\big|\sum A_i\sin\varphi_i\big|.\)
The stems tell how the mean-square displacement is shared: square the height at a fixed point and average over a long time, written \(\overline{y^2}.\) Squaring a sum of sines gives squares, each of which averages to half its amplitude squared, and cross terms such as \(\sin(2\pi\nu_1 t + \alpha)\,\sin(2\pi\nu_2 t + \beta),\) which average to zero when \(\nu_1 \ne \nu_2.\) For a spectrum with no stem at \(\nu = 0,\) therefore,
\[ \overline{y^2} = \frac{1}{2}\sum_{\nu} C_\nu^2 . \tag{18} \]This is Parseval’s theorem: the mean square of a wave is the sum of the mean squares of its frequencies. For the Square wave preset it gives \(\tfrac12\,(30^2 + 10^2 + 6^2 + 4.3^2)\ \mathrm{px^2} = 527.2\ \mathrm{px^2}.\) The square wave it imitates sits at \(\pm H\) all the time, so its mean square is \(H^2 = 555.2\ \mathrm{px^2}{:}\) four terms already carry about \(95\ \%\) of the ideal square wave’s mean square; the rest lives in the sharp corners, which need the higher harmonics. That is a measure of the signal’s size, not automatically of its energy.
Checked by averaging \(y^2\) of the preset at \(X = 0\) over one period, \(2.5\ \mathrm{s},\) on \(250\,000\) points: \(527.2450\ \mathrm{px^2},\) the value of (18).
Energy counts the harmonics differently. A stretched string with mass \(\mu\) per length and tension \(T\) stores kinetic energy \(\tfrac12\mu\,(\partial y/\partial t)^2\) and stretching energy \(\tfrac12 T\,(\partial y/\partial X)^2\) per length. For a wave running one way, \(\partial y/\partial t = -v\,\partial y/\partial X\) and \(T = \mu v^2,\) so the two are equal. A harmonic swings each point with a velocity of amplitude \(\omega_n A_n,\) so its mean kinetic energy per length is \(\tfrac14\mu\,\omega_n^2 A_n^2\) and its total twice that; the cross terms average away as in (18), and the mean energy per length is \(\overline e = \tfrac12\mu\sum_n \omega_n^2 A_n^2.\) The fast harmonics weigh more because they move faster. For a square wave \(A_n \propto 1/n\) and \(\omega_n \propto n,\) so every odd harmonic carries the same energy (in the preset too, to within \(0.7\ \%\)) and the endless sum diverges: a string with true vertical steps would hold infinite energy in this small-slope model, though its mean square is only \(H^2.\) The \(95\ \%\) above says how close the preset’s shape comes to the square wave, not what share of a string’s energy it would carry.
A simpler bound holds at every instant. No sine exceeds its amplitude, so by the triangle inequality
\[ \Big| \sum_i y_i \Big| \;\le\; \sum_i |y_i| \;\le\; \sum_i A_i . \tag{19} \]The Sum of amplitudes readout is this ceiling, and Peak |y| on screen reaches it only where all the crests coincide. In the square wave they never do, since \(\sin 3x = -1\) wherever \(\sin x = 1;\) its peak, \(27.9\ \mathrm{px},\) stays well below the ceiling of \(50.3\ \mathrm{px}.\)
What the spectrum leaves out is just as instructive. The stems record amplitudes, not phases, and to a good approximation the ear does the same for a steady tone, a rule known as Ohm’s acoustic law. Two waves with the same spectrum but different phases sound nearly alike, even when their shapes look nothing alike.
Press Square wave; Peak |y| on screen reads \(27.9\ \mathrm{px}.\) Remove Wave 4 with its × button: three terms remain, the corners round off, the ripples widen, and the peak becomes \(28.0\ \mathrm{px},\) which is exactly \(30\cdot\tfrac12 + 10 + 6\cdot\tfrac12,\) the value at \(x = \pi/6.\) Press Square wave again and set the Phase of Wave 2 to \(1.00\,\pi.\) The flat tops vanish and the peak jumps to \(41.7\ \mathrm{px},\) yet no stem in the spectrum moves, because no amplitude has changed. Played as sound at an audible pitch, the two shapes would sound very nearly the same.
07Computing the curves
There is no differential equation to solve step by step: (1) gives every wave at every place and time directly, so the page simply evaluates it. Each frame does the following.
- The clock adds the real time since the last frame, \(\Delta t,\) to \(t,\) so the waves move at their stated speeds on any screen. \(\Delta t\) is capped at \(0.05\ \mathrm{s}{:}\) if the browser manages fewer than 20 frames a second, the motion slows down instead of jumping. Pause stops the clock.
- The plot is sampled once per screen pixel across its width, at \(M + 1\) points \(X_j = 800\,j/M\ \mathrm{px},\) \(j = 0, \dots, M,\) where \(M\) is the plot width in screen pixels minus 58. Measured in Chromium, a 1440 × 900 window gives a plot 770 pixels wide and \(M = 712,\) one sample every \(1.12\ \mathrm{px}\) of the medium; a phone 390 pixels wide gives \(M = 298,\) one sample every \(2.68\ \mathrm{px}.\)
- Each wave is evaluated exactly at every sample, and the sum is accumulated at the same points. The code calls the sine three times per wave and sample, twice for the component curve and once for the sum: \(3N(M+1)\) calls, \(8\,556\) per frame for the Square wave preset in the wide window, plus two per wave, one for the stored values at the centre of the view and one for the spectrum.
- Peak |y| on screen is the largest \(|y|\) among the samples of the current frame. The readouts are rewritten every eighth frame, 7.5 times a second at 60 frames a second.
The values themselves are exact to the precision of double-precision arithmetic, about 16 significant digits. The only approximation is in the drawing: the curve is a chain of straight segments between samples, and a chord cuts under a crest by about \(A k^2\,\Delta X^2/8,\) with \(\Delta X\) the sample spacing. For the shortest wave the sliders allow, Frequency 3 with \(\lambda = 66.7\ \mathrm{px},\) at the full amplitude of \(40\ \mathrm{px},\) that is \(0.06\ \mathrm{px}\) in the wide window and \(0.32\ \mathrm{px}\) on the phone, where about 25 samples still cover each wavelength. The same small gap can make the peak readout fall slightly short of the true crest. The spectrum is not measured from the curve at all: it is computed from the slider values with (17). The page writes the quantities used here, among them \(t,\) \(\Delta t,\) \(M,\) \(\Delta X\) and the peak, into its data store at the line that computes them, and the Data panel at the edge of the screen lists them.
08From the medium to the screen
The upper panel of the plot, \(56\ \%\) of the height left after the margins, shows the sum in ink with a soft burgundy fill down to the axis; the lower panel shows each wave in its own colour. Sample \(j\) sits in screen column \(44 + j,\) so the \(800\ \mathrm{px}\) of the medium always fill the plot width. Vertically each panel has its own range, \(\pm R\) for the sum and \(\pm R_\text{c}\) for the components, and a displacement \(y\) is drawn at the screen height
\[ \begin{aligned} R &= \max\!\left( 20,\ 10\left\lceil \tfrac{1}{10}\textstyle\sum_i A_i \right\rceil \right)\ \mathrm{px}, \\ R_\text{c} &= \max\!\left( 20,\ 10\left\lceil \tfrac{1}{10}\max_i A_i \right\rceil \right)\ \mathrm{px}, \\ y_\text{screen} &= y_\text{mid} - \frac{y}{R}\cdot\frac{h}{2}, \end{aligned} \tag{20} \]where \(y_\text{mid}\) is the panel’s axis and \(h\) its height in screen pixels (with \(R_\text{c}\) in place of \(R\) for the components). The sum’s range is the ceiling (19) rounded up to the next \(10\ \mathrm{px},\) so the sum can never leave its panel. The two directions have different scales. For the Square wave preset in the wide window, \(R = 60\ \mathrm{px}\) and \(h = 220.1\) screen pixels, so \(1\ \mathrm{px}\) of displacement is drawn 1.83 pixels tall, while \(1\ \mathrm{px}\) along the medium is 0.89 pixels wide: the curves look about twice as steep as they are.
In the spectrum, a stem at frequency \(\nu\) stands \(44 + (\nu/6\ \mathrm{Hz})\,(w - 58)\) screen pixels from the left edge, where \(w\) is the panel width, and its height is \(C_\nu\) scaled so that \(40\ \mathrm{px},\) or the tallest stem if that is taller, fills the panel. The axis runs from 0 to \(6\ \mathrm{Hz}\) because \(\nu = f s\) can reach \(3 \times 2 = 6\ \mathrm{Hz};\) the caption beneath the panel states this 0–6 Hz range. Each wave keeps one colour for its card, its sliders, its curve and its stem, and a stem shared by several waves is drawn in ink.
One detail can puzzle. The Amplitude slider moves in whole pixels, so the \(4.3\ \mathrm{px}\) of the preset’s Wave 4 appears on its card as \(4\ \mathrm{px},\) while the wave itself, the Sum of amplitudes of \(50.3\ \mathrm{px}\) and the stored data keep \(4.3\ \mathrm{px}.\)
09What the model leaves out
- The medium is infinite, uniform and lossless. The \(800\ \mathrm{px}\) view is a window onto it, and lengths are in pixels of that window rather than metres.
- The waves are exactly linear. Very loud sound is not: its compressions travel slightly faster than its rarefactions, the wave steepens as it goes, and harmonics appear that were not in the mix.
- Different Speeds imitate dispersion, but each wave’s speed is chosen by hand. In a real medium a dispersion relation \(\omega(k)\) fixes it, as \(\omega = \sqrt{gk}\) does on deep water.
- The spectrum is computed from the list of waves at \(X = 0,\) not measured. Two waves with the same \(\nu\) but different wavelengths are merged with their relative phase at \(X = 0;\) at another point that phase differs, and so would the merged stem.
- A real analyser, or an ear, listens for a finite time \(T\) and cannot separate frequencies closer than about \(1/T,\) so its lines have a width that these stems do not.
9.1Further reading
- R. P. Feynman, R. B. Leighton and M. Sands, The Feynman Lectures on Physics, Volume I, Addison-Wesley, 1963: chapters 48 (Beats) and 50 (Harmonics), free in the Caltech online edition.
- A. P. French, Vibrations and Waves, W. W. Norton, 1971: chapters 2 (the superposition of periodic motions, including beats) and 6 (normal modes of continuous systems and Fourier analysis); Internet Archive record with the contents.
- E. Hecht, Optics, 5th edition, Pearson, 2017: chapter 7 (the superposition of waves); publisher’s page with the contents.
- M. L. Boas, Mathematical Methods in the Physical Sciences, 3rd edition, Wiley, 2006: chapter 7 (Fourier series and transforms, with Parseval’s theorem in Section 7.11); publisher’s page with the contents.