The Bach-Project: Going Harmonograph
Now I got curious! After I created the Lissajous visualization of Bachs Prelude in C yesterday, I was wondering what other figures I could get out of this music. When using lissajous figures the two axis are perpendicular and independent from each other. When using a harmonograph an additional rotational movement is added, which changes the apperance of the figures drawn. By adding a phase shift of 90 degrees to the second frequency, the unison is now represented as a circle instead of a line.
If I find the time I will make this sketch interactive so you can play with the various parameters and see how I alters the shapes drawn by the music.
var lines = [];
var notes = [];
var freq = [];
var lastUpdate;
var currentPosition = 0;
var osc;
function preload() {
lines = loadStrings("preludeCFrequencies.txt");
}
function setup() {
var can = createCanvas(800, 800);
can.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];
osc.freq(noteFreq);
//first draw nearly transparent line for neon glow effect
stroke(0x58,0x6e,0x75,30)
strokeWeight(10);
drawHarmonoraph(baseFreq, noteFreq, 90,0);
//then draw normal line
stroke("#586e75");
strokeWeight(1);
drawHarmonoraph(baseFreq, noteFreq, 90,0);
currentPosition++;
lastUpdate = millis();
}
if(millis() - lastUpdate > 250 && currentPosition >= notes.length)
{
osc.stop();
}
}
function drawHarmonoraph(freq1, freq2, angle, dampening)
{
angleMode(DEGREES);
beginShape();
for(var i=0; i < 90; i += .1)
{
var x = (width/4-20)*sin(freq1*i)*exp(dampening*i)+ width/2 + (width/4-20)*sin(freq1*i)*exp(dampening*i);
var y = (height/4-20)*sin(angle+freq2*i) * exp(dampening*i) + height/2 + (width/4-20)*cos(freq1*i)*exp(dampening*i);
curveVertex(x,y);
}
endShape();
}Here you can find the file with the notes and the frequencies.