HTML5 Visualization of Steve Reich’s ‘Piano Phase’

HTML5 Visualization of 'Piano Phase'

HTML5 Visualization of ‘Piano Phase’. The different colored dots represent the two players.

Fans of Steve Reich will enjoy this visualization. It is another excellent demonstration of the Web Audio API (along with the HTML5 canvas tag) used to create this visualization of ‘Piano Phase‘. The piece is one of the most recognizable of the minimalist movement, where two pianists play the same short figure at the same time, with the second pianist gradually changing the tempo such that the two players become out of phase. The gradual shifting in tempo, reveals interesting patterns created by the interplay of the two melodic figures. You can read the score here (scribd).

The site was created by Alexander Chen, one of the creative directors at Google Creative Lab in New York (and the brains behind the famous Les Paul Google Doodle).

This site is based on the first section from Steve Reich’s 1967 piece Piano Phase. Two pianists repeat the same twelve note sequence, but one gradually speeds up. Here, the musical patterns are visualized by drawing two lines, one following each pianist.

(via @PLamere)

Using Fire to Visualize Music – A 2D Ruben’s Tube

A Ruben’s Tube is a gas pipe with multiple holes along the way which is used to demonstrate the principle of standing waves. When a suitable frequency is found, areas of high and low pressure (the nodes and antinodes) affect the flow of gas out of the pipe and therefore the height of the flame.

Below is a video demonstrating a 2D planar version of a Ruben’s Tube which makes a fantastic music visualizer!