Wave Simulator is a web app that allows to simulate 2D waves in your browser.
Simply choose a background image, a color gradient and tweak the different parameters, then start the simulation and let the app simulate the wave.
lens.mp4
 |
 |
 |
 |
The simulation is done by numerically solving the wave equation:
where u is the wave function.
It uses this formula to compute the second deriviative:
The simulation is performed on every pixel at each frame using WebGL: a JavaScript API for GPU-accelerated processing.
The following is the documentation of Wave Simulator:
This image defines the behaviour of the wave throughout the canvas. At any given point, if the alpha value is greater than the alpha threshold, the value is set to zero (acting like a wall).
Otherwise, if the alpha value is smaller than the alpha threshold, the alpha value dictates the speed of the wave. For example, if the alpha value of a pixel is 0.5 and the alpha threshold is 1.0, the wave will be 2 times slower in that pixel.
This image can be created using a vector graphics software.
- Download an example image: click on Background > File > Download Example
- Use your own files: click on Background > File > Open
This image defines the color of the simulated wave. The color is read from top to bottom.
If average energy is set to false, the range is -1.0 to 1.0,
Otherwise, if average energy is set to true, the range is 0.0 to 1.0
- Download an example image: click on Gradient > File > Download Example
- Use your own files: click on Gradient > File > Open
This checkbox controls whether the app displays the value of the wave or the average energy carried by the wave (average of its squared value).
It controls the way the wave interacts with the boundary of the canvas by setting a virtual value outside the canvas.
| Condition | Virtual value |
|---|---|
| Absorb | equal to the previous value of the wave at the neighbour pixel |
| Reflect | equal to the value of the wave at the neighbour pixel |
| Zero | 0.0 |
This slider controls the alpha threshold, i.e. any pixel with an alpha value greater than this is considered a wall.
This can prevent antialiasing on images to cause unwanted behaviour such as the wave looking like it's emitted from a wall (see video bellow).
antialiasing.problem.mp4
This checkbox controls whether the simulation canvas keeps the same aspect ratio as the background image.
This checkbox controls whether the gradient legend is shown on the bottom right of the canvas.
It controls the pixel density of the simulation, i.e. the size of a simulation pixel compared to the background image pixels.
This parameter is only available on desktop (not mobile).
| LOD | simulation pixels per background pixel |
|---|---|
| High | 1 |
| Medium | 2 |
| Low | 2.8 |
Controls the speed of the simulation (by skipping frames).
| Speed | frames skipped |
|---|---|
| Max | O |
| Medium | 3 |
| Slow | 8 |
Defines the way the wave is created. There are four types:
Plane wave
This creates a sinusoidal plane wave by forcing the edge pixels to have an oscillating value.Controls the edge from which the wave comes from.
Controls the duration of the oscillation, in frames.
Controls the frequency of the oscillation.
Controls the amplitude of the oscillation.
Pulse
This creates a pulse by setting the value of the wave at frame zero to a Gaussian function.Controls the shape of the pulse:
- Circular: the Gaussian function depends on the distance to the center
- Vertical: the Gaussian function depends on the x position of the pixel
- Horizontal: the Gaussian function depends on the y position of the pixel
Controls the position of the center of the Gaussian function.
(x, y) = (0.0, 0.0) is bottom left.
(x, y) = (1.0, 1.0) is top right.
Controls the amplitude of the Gaussian function.
Controls how much the Gaussian function is spread. Higher value results in a less spread wave.
Spherical wave
This creates a sinusoidal spherical wave by forcing the center pixel to have an oscillating value.Controls the position of the center pixel.
(x, y) = (0.0, 0.0) is bottom left.
(x, y) = (1.0, 1.0) is top right.
Controls the duration of the oscillation, in frames.
Controls the frequency of the oscillation.
Controls the amplitude of the oscillation.
Interactive pulse
This adds a pulse to the wave where you click. A pulse is a Gaussian function shaped wave.Controls the shape of the pulse:
- Circular: the Gaussian function depends on the distance to the click
- Vertical: the Gaussian function depends on the x position of the pixel
- Horizontal: the Gaussian function depends on the y position of the pixel
Controls the amplitude of the Gaussian function.
Controls how much the Gaussian function is spread. Higher value results in a less spread wave.