Created with Sketch.

Woodbury Shortridge

Steiner Chain Synth

Tone generation in ActionScript3
Steiner Chain Synthesizer

The purpose of this synthesiser is not to create deliberate sounds - think the reverse of the music visualizer found on iTunes or Windows Media Player. The Steiner Chain Synth generates abstract sound textures through sonification of geometric animations. My mappings of sound to visual parameters was largely inspired by psychology studies finding cross-modal correspondences by measuring response time for classifying concurrently presented auditory and visual stimuli:

Effects of Spatial Congruity on Audio-Visual Multimodal Integration Natural cross-modal mappings between visual and auditory features

What is this?

While exploring ActionScript3, I found some Steiner Chain geometry written by Andre Michelle.

Steiner Chain is a series of an infinite possible number of circles in which each circle is tangent to two other non-intersecting circles. Jakob Steiner described the chain as follows:

“If at least one closed Steiner chain of n circles exists for two given circles α and β, then there is an infinite number of closed Steiner chains of n circles; and any circle tangent to α and β in the same way is a member of such a chain.”

I wanted to animate the chain, lured by the possibility of a geometric theorem resulting in an infinite number of objects. I could not resist attempting to make it generate tones - a geometric synthesizer.

Steiner Chain Geometry

I started with a simple sine wave. I set the phase of the wave to the circle's starting position divided by a sampling rate ((44100) * 2 pi). To create a tone, I used the sine function of this phase times the circle radius and speed. Mapping the circle radius to frequency created a sequencing or arpeggio like effect - as the radius changes when the circles rolls around the annulus, the frequency changes accordingly in steps. Multiplying this times speed creates a transposing effect - as the speed increases, the whole sequence goes up in frequency.

Initially, I was not satisfied by ActionScript3's tone generation because it created a popping noise when changing frequency. The pop is because the phase position jumps when AS3 recreates the sine wave from a starting position at the origin. I noticed the sequenced popping sounded like an infrasonic pulse wave, so I wondered if I could generate tones with periodic pops above 20hz. I recreated the glitchy pops with not only phase changes, but also volume and pan. Then, I mapped volume to X and pan to Y coordinates of the circle. This creates interesting overtones when added to the sine wave, making the synth sound more “synthy.”

Because the pulse wave frequency had a very large range, I created a fold-over effect when the circles gain speed and quantity - a circuit-bending type sound as the waves fold over into the next periodic cycle. This temporal aliasing is analogous to the wagon-wheel optical illusion seen when the circles get so fast they appear to stand still or move backwards.


Enable Flash and click or focus the canvas below to start. Use the up/down arrow keys to change the infinite number of circles & frequency. Left/right to adjust speed & sequencing.

Warning Due to hacky tone generation, this demo is very loud. Please adjust volume acordingly.

Made with


by Woodbury with

styled components

Have a look at the  Github repository   and find   more about me