Monthly Archives: January 2014

Using beam tracing to calculate reflections in JavaScript

I have been researching beam tracing for a project of mine for a while now. Beam tracing is a method for calculating reflection paths. I won't go into any details of how beam tracing works, as this is something you can find on google in case you're not familiar with it.

My first attempt at beam tracing was made in Python, about a year ago. I made an algorithm that worked in 3D, but it became exceedingly complicated as I worked on it (mostly related to occlusion and clipping). As it turned out, I was overcomplicating things. The paper "Accelerated beam tracing algorithm" by Laine et al. served as an excellent introduction into how basic beam tracing should be done: as simply as possible. To get a better understanding of the paper, I decided to try to implement some of the very basics in 2D using JavaScript.

The result

Click to place the source, the specular reflections are updated automatically as you move the mouse around. Note that reflections are only calculated up to a certain limit (theoretically there are an infinite amount of reflections).

Firstly, it should be noted that I only utilised the very basic ideas presented in the paper in my implementation (beam trees and accelerated ray tracing). I only wanted to spend a few days on this, which means that there are probably a lot of things which could (and should) be optimised. I spent most of the time pruning out bugs, which at times were very hard to find. I also pushed the MIT-licensed source code to Bitbucket, in the hopes that someone might think of something useful to do with 2D beam tracing in JavaScript!

Stereo widening using phase cancellation

I got the idea to try the topic of this blog post during the holidays. It's nothing new (cross-talk cancellation), but interesting nonetheless. The basic principle is relatively simple, which makes it a fascinating example of applied physics!

Note that you need speakers, preferably ones which you can place quite close to each other and in front of you. A laptop should generally work nicely. Also, this doesn't work on internet explorer. Then follow these steps and fill in the information below:

  • Measure the distance between your speakers (middle-to-middle, A).
  • Measure the distance from your ears to the middle point between your speakers (B).
  • Make sure your head is in the middle, as in the picture below, and at about the same distance as when you measured the distance B.
  • Click "Left" or "Right"!
Distances to measure

Distances to measure

Try it out!

See "Troubleshooting" if nothing special seems to be happening.


What should be happening: you should see a user interface, in which you can play a sound by clicking "Left" or "Right". The sound should shift to the far right or far left when phase cancellation is enabled, even when the speakers are right in front of you.

There are some problems related to the audio playback-part of the demonstration. It doesn't seem to work on a lot of systems (even if you're not using internet explorer). If the sound is more like a sharp bell than a soft bell, something went wrong and the effect won't be that great, sorry. This means that the sound is distorted. I might fix this at some point, but it seems to be related to the Web Audio API / pico.js somehow, so it's probably not an easy fix.

Some other stuff that might affect the result:

  • The measurements need to be fairly accurate.
  • Make sure you're not close to any walls.
  • Too much reverberation will impair the effect.
  • Sit in the middle, relative to the speakers, and look straight ahead.
  • Some speakers distort the sound when you turn the volume up (my laptop does), so try lowering the volume if the demonstration doesn't work. The audible sound should be as close to a sine wave (smooth) as possible.
  • There will be problems when you raise the frequency enough. Try 400 Hz, it worked nicely for me.
  • The effect is more pronounced when the speakers are close to each other and in front of you (like in a laptop); the sound will appear to be coming from a totally different direction.
  • If your speakers already form a wide stereo field, the effect isn't that noticeable

What was that?

Let's start by considering what makes the sound appear to be coming from the direction of a speaker, in general. The two most important cues which allow you to deduce the direction of the sound are related to how the sound arrives at our ears; the sound reaches each ear at a different time and at a different volume.  People usually talk about the interaural level difference (ILD) and the interaural time difference (ITD). The sound usually has a different distance to travel for each ear, so the sound will arrive a little bit later at the other ear. It will also arrive at a slightly lower volume. In our case, the ITD and ILD are approximated using  the distances in the image below.

Sound source - ears, distance

Sound source - ears, distance

Now let's introduce the concept of phase cancellation. This is something which active noise cancelling headphones use, for example. Sound consists of pressure changes. If we can align positive and negative pressure changes in the same point in space, they sum up to zero. The basic idea is explained in the following image:

Phase cancellation [wiki]

Phase cancellation [wiki]

OK, let's now combine the two previous principles! We want to play a sound from the right speaker, but we want to cancel out the sounds arriving at the left ear. How do we do this?

Phase cancellation

Cross-talk cancellation

  • We play the sound using the right speaker
  • We play another sound (with inverted phase) using the left speaker. We time the signal so that the sound from the right speaker and the sound from the left speaker arrive at the left ear simultaneously. They cancel each other out at the left ear.
B + C

There's still a problem; what will happen when the sound with the inverted phase (image A) arrives at the right ear (image B)? This will cause problems, we don't want anything to arrive at the right ear after the first signal! So what do we do? We cancel it out, once more, using a signal with the correct phase (image B).

But, once more, the signal we played in image B needs to be cancelled out at the left ear (image C). Well, I hope you get the picture. This goes on and on for a while. Luckily, we won't have to do this forever, as the volume of the phase cancellation signal decreases with time.


I think this is a cool example which demonstrates the wave nature of sound. It's intuitive and relatively simple, yet gives results anyone with proper hearing can observe (assuming the demonstration works on your setup).