Waves - see - animation of wave interference

Waves - see
Start the animation of wave interference


Click the button above to start the JavaScript animation of wave interference. The initial animation consists of 36 frames (10 on mobile devices). Preparation of animation frames takes a while - usually less than 0.7 sec per frame for two sources. The preparation time is initially usually overestimated, it becomes more realistic after the first frames are produced.

If you want to experiment with sound waves, please, visit my page

Puzzles - basic level

Solve 8  puzzles 

Problems - advanced level

Solve 8  advanced problems 

Control the animation

During the animation:
  • stop and resume it - button Stop/Start
  • change the time interval between frames
  • view the whole image - press Full picture; later Alt-left or scroll up to see the controls


  • wavelength, λ (unit: pixel)
  • distance between sources (unit: λ)
  • period, T
  • phase difference of sources (unit: π)
  • amplitude, A
Press the button Apply and wait for a new animation.

In basic mode λ, T and A are the same for both sources.

In advanced mode specify arbitrary number of sources with individual properties in the array:
[[x1, y1, z1, R1, λ1, A1, φ1, T1], [x2, y2, z2, R2, λ2, A2, φ2, T2], ...]
where xi, yi and zi are the Cartesian coordinates of the source i (x and y in the plane of the image, x from left to right, y from top to bottom; the Z axis is perpendicular to the plane of the image), and φi is its phase.

More about  physics  in this animation.

Your animation

Advanced mode:
  • enter your sources array or
  • generate it by a program -  examples  included
The bigger the image size, number of sources and frames, the longer the preparation time.
Number of frames = least common multiple of sources periods, e.g. for periods 3, 5, 6 there are 30 frames.

Size and aspect ratio of the image

After changing the size of a browser window, reload the page - next animation will have proper size and aspect ratio.

Save image in PNG file

Chromium, Firefox
Right-click on the image, choose "Save image as..."


You can share your interesting sources configurations - the code and the image -  in the gallery . Join the group to add your post.

Useful key combinations

  • Ctrl-r Reload window, keep values in the form
  • Ctrl-F5 Reload window, reset values in the form to their default values
  • F11 Fullscreen mode on/off
  • Backspace or Alt-left Go back
  • F12 Console on/off

  • Ctrl-r Reload window
  • Shift-F5 Reload window, reset cache
  • F11 Fullscreen mode on/off
  • Alt-left Go back
  • F12 Console on/off
Read the console output if the program fails.


The program is available for free, under the terms of the  GNU General Public License  as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Author, contact

Piotr Nieżurawski
WWW:  pionie.com 
discussion group:  Pionie EN  - post remarks and interesting sources configurations
e-mail:  Piotr.Niezurawski@pionie.com 
Facebook:  Pionie.pl 
Twitter:  Piotr Nieżurawski 

Local usage

You can also use this program locally, without internet connection.
Quick start:
  • unpack the archive
  • open the file Waves-see-animation/waves-see.html in the browser
In case of some browsers you must start them with special flags to enable the use of local files, e.g.
$ chromium-browser --allow-file-access-from-files
In Linux terminal:
$ tar xf Waves-see-animation[...].tgz
$ cd Waves-see-animation/
$ ./chromium-local-files.bash
$ firefox waves-see.html


The animation shows a sum of spherical waves. In basic mode both waves have the same wavelength λ, amplitude A and period T. Color intensity is directly proportional to the net wave (until saturation).

Now, more formally and generally. A value of the net wave u is represented on the XY plane. The net wave
u = u1 + u2 + ...
ui = Ai sin(kri - ωt + φi) Ri/ri
for ri > Ri. Source i has a radius Ri, and ri denotes the distance to the center of this source. Variable t denotes time. Other constants:
ki = 2π/λi, ωi = 2π/Ti

Play with waves: 8 puzzles
basic level

Obtain the following wave patterns using two sources with equal λ, T and A (the basic mode).

Solving puzzles - hints

Open the animation in the next tab: Ctrl-click or right click and "Open link in new tab" to open Switch between tabs:
Ctrl-Tab - go forward
Ctrl-Shift-Tab - go back

Puzzle 1. Monopole

Like one source...

Puzzle 2. Point-like dipole

Like one source but antisymmetric, with total destructive interference along perpendicular bisector of (what?)...

Puzzle 3. Quiet sides

Partially destructive interference around line (axis) that passes through the sources...

Puzzle 4. Four quiet lines

Partially destructive interference along 4 lines...

Puzzle 5. Three quiet lines

Destructive interference along 3 lines (including 2 partialy destructive). No quiet sides...

Puzzle 6. Quiet sides and 3 lines

Destructive interference along 3 lines (including 2 partialy destructive). And quiet sides...

Puzzle 7. Two asymmetric quiet lines

Partially destructive interference along 2 lines. The lines are not symmetric with respect to the perpendicular bisector of a segment joining sources...

Puzzle 8. Twenty quiet lines

Partially destructive interference along 20 lines...


After these "experiments" you may try to summarize your observations. Examples of interesting questions:
  1. What is the relation of the number of "quiet lines" to the distance between sources if the phase difference is 0?
  2. How does this relation change if the phase difference is equal to π?
  3. What is the condition to obtain "quiet sides"?
  4. What did you do to visualize "point-like dipole"? Why it was necessary?
  5. How to explain the asymmetry of wave distribution in Puzzle 7?

Advanced mode - examples

In advanced mode choose an example, click "Prepare sources array", then "Apply".

You can modify the program and the array.

The programs are written in JavaScript.

In case of error, read messages in the console.

Advanced examples: Beats

Two sources with different periods, the same speed of waves.

Advanced examples: Line

Identical sources along a line.

Advanced examples: Corner

Identical sources in L.

Advanced examples: Circle

Identical sources on a circle.

Advanced examples: Carpet

A quarter of a Talbot carpet.

Advanced examples: Grating

Diffraction grating (16 sources).

Advanced examples: Outside the plane, 3D

Three sources. Two of them outside the image plane. Can you tell whether on the same side of the plane or on the opposite sides?

Advanced examples: Circle, 3D

A circle perpendicular to the plane of the image. Radius of the circle = 4λ. Is there any difference between this image and the image for two point sources at a distance of 8λ?

Advanced examples: Disk, 3D

A disk perpendicular to the plane of the image. Subsequent images are for the  Fresnel number  equal to 6, 3, 2. In the third image you can see the furthest dark point corresponding to the Fresnel number equal to 2.

Problems - advanced level

In the advanced mode write programs to obtain the following wave patterns.

Save your programs in a text file on your system - they are not stored in the application.

Advanced problem 1. Bigger grating

Diffraction grating with at least 30 sources.

Advanced problem 2. Grid

Grid of identical sources, at least 8x8, with λ smaller than separation.

Advanced problem 3. Full carpet

Full Talbot carpet.

Advanced problem 4. Crystal diffraction, 2D

Illustrate Bragg diffraction. Take into consideration phase differences between sources.

Advanced problem 5. Standing wave

Create a (nearly) standing wave between two lines of sources.

Advanced problem 6. Spiral of sources

The most surprising wave pattern for me. The Archimedean spiral of sources, wavelength proportional to the radius, phase to the polar angle.
Sources outside the plane.

Advanced problem 7. Square, 3D

A square of sources, perpendicular to the plane of the image. How is it different from the image for the line (1D) of sources? How is it different from the image for a disk of sources?

Advanced problem 8. Ring (annulus), 3D

Ring of sources, perpendicular to the plane of the image. Can you see the expected similarities and differences? Is blank spot for the Fresnel number 2 in the same position as in the case of the disk?
A ring with a larger inner radius, the outer edge outside the image. A clearly visible amplification on the axis. More:  Arago-Poisson spot .

Known issues

Firefox (49.0.2)
  • In fullscreen mode (F11) visible distortions of animation in the upper part of the screen.

Chromium (53.0.2785.143):
  • Affects only local usage: Chromium does not accept local file for worker script; use provided bash script:
    $ ./chromium-local-files.bash
    or run with the flag
    $ chromium-browser --allow-file-access-from-files
Smartphone with Android 5.0, 8 cores, Chrome:
  • Prepration of animation takes up to 10 times longer than on a mid-range laptop.
Optimization of frames preparation, JavaScript:
  • Surprisingly, using Transferables (ArrayBuffer) and ImageData constructor to avoid copying of data did not increase performance (in fact, the program was a bit slower...). Tests with Firefox 55.0.1 and Chromium 60.0.3112.78.
  Author: Piotr Nieżurawski