Contents  Introduction  How Waves Are  Simulated  Transparent  Surface Ray-  Tracing  Printable version

Part 1 - How Waves Are Simulated

This mechanism behind this effect is remarkably simple. It is so simple, that I believe that it was invented by accident while experimenting with area sampling. But before I dive into the calculations behind the wave simulation, I will tell you something about area sampling.

Area Sampling
Area sampling is a very common algorithm in computer graphics. Considering a two-dimensional map, the value at (x, y) is affected by values surrounding position (x, y), such as (x+1,y), (x-1,y), (x,y+1) and (x,y-1). Our wave simulation actually works in three dimensions, but I'll get to that later.

Area Sampling Example: A Simple Blur
Blurring a map is very simple. You'll need two maps: one containing the data you want to blur, and one for the resulting map. The algorithm (using five sample values) looks like this:

ResultMap[x, y] := ( SourceMap[x, y] +
                     SourceMap[x+1, y] +
                     SourceMap[x-1, y] +
                     SourceMap[x, y+1] +
                     SourceMap[x, y-1] ) DIV 5

In plain English: the value at (x, y) depends on the average value of surrounding values. Sure, things get a bit more complicated when you want to blur images, but you get the idea.

Creating a wave simulation is basically the same, but the value at (x, y) is calculated in a different manner. Earlier I mentioned that our wave simulation works in three dimensions. Well, our third dimension is time. In other words: while calculating our wave simulation, we have to know how the waves looked like one moment earlier. The resulting map becomes the source map for the next frame.

This is the actual wave simulation algorithm:

ResultMap[x, y] := (( CurrentSourceMap[x+1, y] +
                      CurrentSourceMap[x-1, y] +
                      CurrentSourceMap[x, y+1] +
                      CurrentSourceMap[x, y-1] ) DIV 2 ) - 
                      PreviousResultMap[x, y]

You'll notice that the first four values obtained from the current source map are divided by two. This results in a value twice the average. Next, we subtract the value at our working location (x, y) from the previous result map. This produces a new value. Look at figure a and b to learn how this effects the wave.

The horizontal gray line represents the average height of the waves. If the previous value at (x, y) was lower than average, then the wave will rise towards average level, as shown in figure a.

If the previous value at (x, y) was higher than average, as shown in figure b, the wave will drop towards average level.

Damping
Every time a wave moves up and down, its energy is distributed over a growing area. This means that the amplitude of the wave drops until the wave levels out. Using a damping factor simulates this. The factor, a certain amount or percentage of the amplitude, is subtracted from the current amplitude to let high amplitudes die out fast, and low amplitudes die out slow. In the example below, one sixteenth of the amplitude is subtracted each time it moves.

Wave Simulation Example
The following code fragment originally included some inline assembler, but I replaced it by native Pascal code so it can be easily ported to any language and/or platform.

Popup: Source Listing 1

When this code is executed, you would render the result to an image buffer. How this is done is explained in part 2. Important is that you swap the source and result map for the next iteration, after rendering the image:

Temporary_Value := CT;
CT := NW;
NW := Temporary_Value;

But what do CT and NW mean? CT and NW are variables that point to different wavemaps. CT is the current wavemap, which contains the data we need to generate the new wavemap, pointed to by NW. CT and NW can hold two values, 0 and 1, and can never be the same. Because we swap the maps after each iteration, the new wavemap contains the data of the wavemap generated before the current wavemap. I realize that this might sound complicated, but it really isn't.

Getting It To Move
The procedure above simply levels out the waves. So, how can we make the whole thing move? Exactly, by lowering values in the wavemap. An undisturbed wavemap contains only zero's. To create a wave, just pick a random location and change the value like this:

WaveMap[x, y] := -100;

The higher the value the bigger the waves.

Next : Part 2 - Transparent Surface Ray-Tracing