The Bach-Project: Going Lissajous
Yesterday I was at the openeing of a new exhibition in the HNF where the canadian artist Todd McLellan was presenting his great photographs of taken apart devices. At this evening I met Tim Rodenbröker and Patrik Hübner, two media artists from Paderborn that create art by coding. We had a great chat and they were telling me about their bach-project, an exploration about visualizing the beauty of music.
I was thrilled by the idea, so I decided to give it a shot myself and to brush up on my processing skills. And here is the result: A visualization of Bachs famous prelude in c. The idea is to take the frequency of the left hand notes as a base (for the x-axis) and then visualize the ratio to the right hand notes using lissajous curves. While the left hand note is played, both frequencies are the same, which generates the line pattern. If the frequencies differ many different curves evolve, whose pattern depend on the ratio between the x- and y-frequencies.
The sketch itself is rather simple:
var lines = [];
var notes = [];
var freq = [];
var lastUpdate;
var currentPosition = 0;
var osc;
function preload() {
lines = loadStrings("preludeCFrequencies.txt");
}
function setup() {
var cv = createCanvas(800, 800);
cv.parent("preludeCanvas");
//read in prelude notes and frequencies
for(var i=0; i < lines.length; i++)
{
notes.push(parseFloat(lines[i].split(":")[0]));
freq.push(parseFloat(lines[i].split(":")[1].trim()));
}
osc = new p5.Oscillator();
osc.setType('sine');
osc.freq(freq[0]);
osc.amp(1);
osc.start();
stroke("#586e75");
lastUpdate = millis();
}
function draw() {
if(millis() - lastUpdate > 250 && currentPosition < notes.length)
{
background("#073642");
noFill();
var baseFreq = freq[8*Math.floor(currentPosition/8)];
var noteFreq = freq[currentPosition];
var ratio = baseFreq/noteFreq;
osc.freq(noteFreq);
angleMode(DEGREES);
beginShape();
//draw Lissajous
for(var i=0; i < 80*360; i += 45)
{
var x = (width/2-20)*sin(i)+ width/2;
var y = (height/2-20)*sin(ratio*i) + height/2;
curveVertex(x,y);
}
endShape();
currentPosition++;
lastUpdate = millis();
}
if( currentPosition >= notes.length)
{
osc.stop();
}
}Here you can find the file with the notes and the frequencies.
If you like Lissajous curves, you should check out the small book about a device called harmonograph.