Ripple Tank Sim

Introduction

Ripple Tank Sim is a wave simulator for demonstrating common wave behaviours that occur naturally in many media. This ripple tank can exhibit slow propagation of waves that will reflect off walls (and optionally sides), diffract around corners and constructively and destructively interfere to create interference patterns. It is also possible to demonstrate the Doppler effect with a moving point source.

Demos

Below are some examples of what can be demonstrated with this simulator. In addition to following these instructions please see the section below on mouse or touch controls, rotating the 3D view can give a more intuitive perspective. Switching shader modes can also make the waves clearer.

Reflection

Turn off the bar dipper and press "Clear" to level the water and remove all waves (or click the link below). You should now have no waves on the screen. Touch (or click) the surface of the water to create a wave that will propagate from that point.
Observe how waves reflect off the wall, press the "Wall Behaviour" button and do the same again. You should see a difference in the way the waves are reflected. Press the "Shader" button so that the label reads "Height". This will allow you to see the difference more clearly. Remember the peaks are red and the troughs are blue.
Click on the "Edge Behaviour" button and notice how waves can be made to reflect off the edge of the tank in the same way.
Ripple Tank Sim - Reflection

Diffraction

Ensure that the bar dipper is on, press "Wall" so that the label reads "1 Slit" and press "Clear". You should now see liner waves moving towards the wall. Pause the simulation before the first wave-front hits the wall. What will happen next? Resume the simulator by pressing "Run". Observe what happens to the waves when they pass thorough the gap in the wall. Alter the value labelled Gap Width. How does this affect the behaviour of the waves passing through the gap.
Ripple Tank Sim - Single Slit Diffraction

Young's double-slit experiment

Clicking on the link below will select the necessary options for the Young's double-slit experiment. Observe how the waves behave when the diffracted wave-fronts meet each other.
Ripple Tank Sim - Young's Double-slit

Standing Waves

Set "Edge Behaviour" and "Wall Behaviour" both to "Hard". Set Wall to "1 Slit" and "Gap Width" to "0.00". Now press "Clear" and ensure that "Bar Dipper" is on. What happens after the waves from the bar dipper hit the wall?
Ripple Tank Sim - Standing Waves

Doppler

To demonstrate the Doppler effect turn off the bar dipper and remove the wall, click the "Point Dipper" button until the label reads "Doppler". Press the "Clear" button to remove all waves from the screen. Alternatively this link will set a Doppler sim up for you:
Ripple Tank Sim - Doppler

Controls

Mouse

Clicking on the water surface will disturb the water so that a wave will propagate out from that point.
To rotate the view ensure that it is in 3D mode then hold either of the Shift or Ctrl buttons and click and drag.
To zoom in scroll the mouse wheel.

Touch

Touching on the water surface will disturb the water so that a wave will propagate out from that point.
To rotate the view ensure that it is in 3D mode and use two fingers, move them together keeping the space between them the same. Move your fingers apart/towards each other to zoom. The touch behaviour is the same as that used by Google Earth.

Control Bar

Pause/Run

Pauses/starts the simulator.

Clear

Removes all waves and resets the dippers to their initial positions.

2D/3D

Changes between top-down orthogonal view and 3D perspective view. See Mouse and Touch sections for rotating and zooming the 3D view.

Render Style

Changes the style of rendering between solid, grid and points. It should be noted that the grid and points are much more course that the heightmap.

Shader

Switches between an illuminated surface that look semi-natural and surface that has all heigh points painted blue. Points near the original level are painted black.

Edge behaviour

Determines what happens when waves hit the edges of the heightmap.
The default option is "None" which means that waves should pass through the boundaries without being reflected.
"Soft" means that waves hit a boundary that is free to move up and down. This causes reflectied waves to have the same polarity to incident waves.
"Hard" means that waves are reflected from a boundary that is always clamped to zero. This causes reflections to have opposite polarity to incident waves. See Acoustics and Vibration Animations by Dr. Dan Russell for further explenation of hard vs soft refelection.

Bar Dipper

Turns the bar dipper on and off. At present you cannot change the frequency or amplitude of the dipper.

Wall behaviour

Determines what happens when waves hit the wall. Same as Edge behaviour but does not have a "None" option.

Wall

Allows you to have a wall that has one or two gaps (slits) or have no wall. This is useful for demonstrating diffraction.

Gap Width

Allows you to change the size of the gap in the wall through which waves can pass.

Gap Dist

Allows you to change the distance between the gaps in a two gap wall.

Point Dipper

Switches the mode of the point dippers. These are sinusoidally osculating point sources of waves.
Choose from: Single, Two in phase, Two in anti-phase, or Doppler.
Doppler is a point source moving in a circle which is moving slower than the speed of the waves it is generating.

Point Dist

Allows you to set the distance between the point sources when you use two in phase or two in anti-phase modes.

Technical

Background

All physics and graphics in this simulator are run using WebGL. This means that all calculations are performed using your GPU and not your CPU. This simulator relies on you having a browser that supports WebGL well. You also require working up-to date graphics drivers. If your simulation is running slow it may be that you need to update your graphics drivers or it may simply be that you need a more powerful graphics card (It works well on a GeForce GT 610). You can get extra performance by disabling your computer's window compositor (on KDE use Shift + Alt + F12).
Your graphics card may not be powerful enough to run two instances of this simulator at the same time. Ensure that you only have one window with a running simulator open at a time. You can use the pause button to prevent a simulator instance from using GPU power.

Basic Algorithm

Waves are simulated using a heightmap so it is therefore not possible to simulate breaking waves using this software.
A heightmap is just a 2D grid of values stored in memory that represent the height of the water at a point on the surface. The heightmap in this simulation is 512 x 512 values in size.
To explain how waves are made to propagate across the heightmap we can imagine the heightmap as a series of points attached to their four nearest neighbours by springs. The basic algorithm is to compute for each height value the average of the neighbour's values and subtract this from the current value (this is the average of the spring lengths). Assuming a spring constant of 1 this gives a force that must be applied to an imaginary mass at this point. We assume the mass to be 1 so Newton's 2nd law of motion (F=MA, A=F/M) states that this value is also the acceleration. Now we must apply this acceleration to the velocity of the imaginary mass, these velocities are also stored in memory. We simply add the computed acceleration to the current velocity to get the new velocity. After new velocities are calculated for every point in the grid these velocities are then added to their respective height values to give the new height values.
The effects that are exhibited (reflection, diffraction etc...) in this simulation are not programmed in but are a natural consequence of the basic algorithm.

Known issues

Microsoft Internet Explorer does not support the necessary blend functions for damping or direct interaction to work correctly.
Multitouch input will only work on mobile browsers and desktop Chrome due to limitations with touch support in other desktop browsers.
Touch input and direct interaction do not work on the previous release version of Chrome (43) on Linux with Intel HD Graphics due to this bug: Issue 503608. Chrome 44 functions correctly, unsure you are using the latest version of Chrome.
Performance of WebGL applications in Firefox is poor due to its software compositor. (It has to pull each frame back off the graphics card and into main memory, composite it with the rest of the page and upload it again). Firefox is getting a new hardware accelerated compositor that performs much better. For better performance you can either download the beta version of Firefox and enable the hardware accelerated compositor in "about:config" or use Chrome. Enabling the hardware compositor in Firefox may cause rendering problems with many sites.

Bug Reports

Please report all bugs on GitHub.

Credits

All code in the main file except where stated is ©Matthew Wellings 2015-2017 and may be distributed under the MIT license.
This code uses:
gl-matrix - High performance matrix and vector operations version 2.2.2 Copyright (c) 2013, Brandon Jones, Colin MacKenzie IV.
Stats widget (Framerate counter etc.) by mrdoob / http://mrdoob.com/.
Open boundaries equation from Fast Water Simulation for Games Using Height Fields by Dr Matthias Müller-Fischer

	Ripple Tank Sim - Help
	Introduction Demos - Reflection - Diffraction - Young's double-slit experiment - Standing Waves - Doppler Controls - Mouse - Touch - Control Bar Technical - Background - Basic Algorithm - Known Issues - Bug Reports Credits	Introduction Ripple Tank Sim is a wave simulator for demonstrating common wave behaviours that occur naturally in many media. This ripple tank can exhibit slow propagation of waves that will reflect off walls (and optionally sides), diffract around corners and constructively and destructively interfere to create interference patterns. It is also possible to demonstrate the Doppler effect with a moving point source. Demos Below are some examples of what can be demonstrated with this simulator. In addition to following these instructions please see the section below on mouse or touch controls, rotating the 3D view can give a more intuitive perspective. Switching shader modes can also make the waves clearer. Reflection Turn off the bar dipper and press "Clear" to level the water and remove all waves (or click the link below). You should now have no waves on the screen. Touch (or click) the surface of the water to create a wave that will propagate from that point. Observe how waves reflect off the wall, press the "Wall Behaviour" button and do the same again. You should see a difference in the way the waves are reflected. Press the "Shader" button so that the label reads "Height". This will allow you to see the difference more clearly. Remember the peaks are red and the troughs are blue. Click on the "Edge Behaviour" button and notice how waves can be made to reflect off the edge of the tank in the same way. Ripple Tank Sim - Reflection Diffraction Ensure that the bar dipper is on, press "Wall" so that the label reads "1 Slit" and press "Clear". You should now see liner waves moving towards the wall. Pause the simulation before the first wave-front hits the wall. What will happen next? Resume the simulator by pressing "Run". Observe what happens to the waves when they pass thorough the gap in the wall. Alter the value labelled Gap Width. How does this affect the behaviour of the waves passing through the gap. Ripple Tank Sim - Single Slit Diffraction Young's double-slit experiment Clicking on the link below will select the necessary options for the Young's double-slit experiment. Observe how the waves behave when the diffracted wave-fronts meet each other. Ripple Tank Sim - Young's Double-slit Standing Waves Set "Edge Behaviour" and "Wall Behaviour" both to "Hard". Set Wall to "1 Slit" and "Gap Width" to "0.00". Now press "Clear" and ensure that "Bar Dipper" is on. What happens after the waves from the bar dipper hit the wall? Ripple Tank Sim - Standing Waves Doppler To demonstrate the Doppler effect turn off the bar dipper and remove the wall, click the "Point Dipper" button until the label reads "Doppler". Press the "Clear" button to remove all waves from the screen. Alternatively this link will set a Doppler sim up for you: Ripple Tank Sim - Doppler Controls Mouse Clicking on the water surface will disturb the water so that a wave will propagate out from that point. To rotate the view ensure that it is in 3D mode then hold either of the Shift or Ctrl buttons and click and drag. To zoom in scroll the mouse wheel. Touch Touching on the water surface will disturb the water so that a wave will propagate out from that point. To rotate the view ensure that it is in 3D mode and use two fingers, move them together keeping the space between them the same. Move your fingers apart/towards each other to zoom. The touch behaviour is the same as that used by Google Earth. Control Bar Pause/Run Pauses/starts the simulator. Clear Removes all waves and resets the dippers to their initial positions. 2D/3D Changes between top-down orthogonal view and 3D perspective view. See Mouse and Touch sections for rotating and zooming the 3D view. Render Style Changes the style of rendering between solid, grid and points. It should be noted that the grid and points are much more course that the heightmap. Shader Switches between an illuminated surface that look semi-natural and surface that has all heigh points painted blue. Points near the original level are painted black. Edge behaviour Determines what happens when waves hit the edges of the heightmap. The default option is "None" which means that waves should pass through the boundaries without being reflected. "Soft" means that waves hit a boundary that is free to move up and down. This causes reflectied waves to have the same polarity to incident waves. "Hard" means that waves are reflected from a boundary that is always clamped to zero. This causes reflections to have opposite polarity to incident waves. See Acoustics and Vibration Animations by Dr. Dan Russell for further explenation of hard vs soft refelection. Bar Dipper Turns the bar dipper on and off. At present you cannot change the frequency or amplitude of the dipper. Wall behaviour Determines what happens when waves hit the wall. Same as Edge behaviour but does not have a "None" option. Wall Allows you to have a wall that has one or two gaps (slits) or have no wall. This is useful for demonstrating diffraction. Gap Width Allows you to change the size of the gap in the wall through which waves can pass. Gap Dist Allows you to change the distance between the gaps in a two gap wall. Point Dipper Switches the mode of the point dippers. These are sinusoidally osculating point sources of waves. Choose from: Single, Two in phase, Two in anti-phase, or Doppler. Doppler is a point source moving in a circle which is moving slower than the speed of the waves it is generating. Point Dist Allows you to set the distance between the point sources when you use two in phase or two in anti-phase modes. Technical Background All physics and graphics in this simulator are run using WebGL. This means that all calculations are performed using your GPU and not your CPU. This simulator relies on you having a browser that supports WebGL well. You also require working up-to date graphics drivers. If your simulation is running slow it may be that you need to update your graphics drivers or it may simply be that you need a more powerful graphics card (It works well on a GeForce GT 610). You can get extra performance by disabling your computer's window compositor (on KDE use Shift + Alt + F12). Your graphics card may not be powerful enough to run two instances of this simulator at the same time. Ensure that you only have one window with a running simulator open at a time. You can use the pause button to prevent a simulator instance from using GPU power. Basic Algorithm Waves are simulated using a heightmap so it is therefore not possible to simulate breaking waves using this software. A heightmap is just a 2D grid of values stored in memory that represent the height of the water at a point on the surface. The heightmap in this simulation is 512 x 512 values in size. To explain how waves are made to propagate across the heightmap we can imagine the heightmap as a series of points attached to their four nearest neighbours by springs. The basic algorithm is to compute for each height value the average of the neighbour's values and subtract this from the current value (this is the average of the spring lengths). Assuming a spring constant of 1 this gives a force that must be applied to an imaginary mass at this point. We assume the mass to be 1 so Newton's 2nd law of motion (F=MA, A=F/M) states that this value is also the acceleration. Now we must apply this acceleration to the velocity of the imaginary mass, these velocities are also stored in memory. We simply add the computed acceleration to the current velocity to get the new velocity. After new velocities are calculated for every point in the grid these velocities are then added to their respective height values to give the new height values. The effects that are exhibited (reflection, diffraction etc...) in this simulation are not programmed in but are a natural consequence of the basic algorithm. Known issues Microsoft Internet Explorer does not support the necessary blend functions for damping or direct interaction to work correctly. Multitouch input will only work on mobile browsers and desktop Chrome due to limitations with touch support in other desktop browsers. Touch input and direct interaction do not work on the previous release version of Chrome (43) on Linux with Intel HD Graphics due to this bug: Issue 503608. Chrome 44 functions correctly, unsure you are using the latest version of Chrome. Performance of WebGL applications in Firefox is poor due to its software compositor. (It has to pull each frame back off the graphics card and into main memory, composite it with the rest of the page and upload it again). Firefox is getting a new hardware accelerated compositor that performs much better. For better performance you can either download the beta version of Firefox and enable the hardware accelerated compositor in "about:config" or use Chrome. Enabling the hardware compositor in Firefox may cause rendering problems with many sites. Bug Reports Please report all bugs on GitHub. Credits All code in the main file except where stated is ©Matthew Wellings 2015-2017 and may be distributed under the MIT license. This code uses: gl-matrix - High performance matrix and vector operations version 2.2.2 Copyright (c) 2013, Brandon Jones, Colin MacKenzie IV. Stats widget (Framerate counter etc.) by mrdoob / http://mrdoob.com/. Open boundaries equation from Fast Water Simulation for Games Using Height Fields by Dr Matthias Müller-Fischer