ookey-clock

click to turn on and off

My graphical concept was to create a “sound clock” where the frequencies corresponded to the hours, minutes, and seconds.  These three frequencies would come into harmony when the hour was struck.  I was originally going to program this piece for Max.  However, I didn’t want the piece to only be accessible for people with the software, and I wanted to have the ability to embed it.  I decided, then, to explore the p5.js sound library.  I was able to create my initial idea in it, but it wasn’t interesting sound-wise and, if anything, sounded pretty annoying.  I then looked into different ways I could manipulate the sound, but still have it represent the time.  I ended up filtering sound with a band filter that increased in frequency based on the hour.  The minutes would then be in different harmonies with this filter frequency depending on ratio intervals ex. 2:1 (octave), 3:2 (perfect fifth), 4:3 (perfect fourth), 5:4 (major third), 6:5 (minor third).  I lastly had the seconds alter the resonance of the band filter so that it would progressively get more “noisy” as it neared the next minute.

In terms of improvements, I would like to make a better transition between the hours and at the start of a new day. I also think the piece could be more visually interesting.  Using a FFT was my original idea, and although it is a good way to visualize sound, it is not very engaging.  Despite these changes I would make, I am proud of my ability to convert my original concept which relied on a software I am comfortable with into a form of code that was new to me.  I also enjoy the final sound that is produced.

As this is mostly a sound piece, I have attached videos instead of gifs:

7:58pm-8:01pm (representation of hourly transition):

Sounds produced every 10 minutes to show how the piece changes throughout the day:

Code:

//Help taken from Professor Golan Levin's Clock
//https://www.openprocessing.org/sketch/503875
//and p5.js FFT library example
//https://p5js.org/reference/#/p5.FFT/analyze
 
var filterH;
var fft;
var prevSec;
var millisRolloverTime;
var ratio;
 
 
function setup(){
  createCanvas(400,400);
  millisRolloverTime = 0;
  noise = new p5.Noise();
  noise.amp(1.0);
  filterH = new p5.BandPass();
  filterH.res(50);
  noise.disconnect();
  noise.connect(filterH);
  noise.start();
 
  oscM = new p5.Oscillator();
  oscM.amp(0.8);
  oscM.setType('square');
  oscM.disconnect();
  oscM.connect(filterH);
  oscM.start();
 
  fft = new p5.FFT();
}
 
function draw(){
  background(249,241,241);
  var S = second();  
  if (prevSec != S) {
    millisRolloverTime = millis();
  }
  prevSec = S;
  var Smils = S + (floor(millis() - millisRolloverTime)/1000);
 
  var M = minute() + (Smils / 60);
  var H = hour() + (M / 60);
 
 
  var freqH = map(H, 0.0, 23.0, 20.0, 2320.0) / 2.0;
  filterH.freq(freqH);
  filterH.res((sin(map(Smils, 0, 60, 0, PI)) * 60) + 10);
 
  ratio = (60 - M + 20) / (60 - M + 10);
  freqM = freqH * ratio;
  oscM.freq(freqM);
 
 
  var spectrum = fft.analyze();
  noStroke();
  fill(123,184,197);
  for (var i = 0; i< spectrum.length; i++){
    var x = map(i, 0, spectrum.length, 0, width);
    var h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x, height, width / spectrum.length, h )
  }
 
  stroke(255);
 
}

sketches: