Sonification: Transforming Data or Sound into Image

Two Directions

Sonification refers to two distinct but related practices:

1. Data → sound: transforming a dataset into audio to make it perceptible to the ear

2. Sound → image: analysing an audio signal and deriving visual forms from it

Sound → Image in p5.js


// Volume-reactive circle
let mic, amp;
function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn(); mic.start();
  amp = new p5.Amplitude(); amp.setInput(mic);
}
function draw() {
  background(11, 15, 20, 40);
  let level = amp.getLevel();
  let r = map(level, 0, 0.5, 10, 200);
  noStroke(); fill(55, 227, 195, 180);
  ellipse(width/2, height/2, r*2);
}


// FFT spectrum
let fft;
function setup() {
  let mic = new p5.AudioIn(); mic.start();
  fft = new p5.FFT(); fft.setInput(mic);
}
function draw() {
  let spectrum = fft.analyze();
  for (let i = 0; i < spectrum.length; i++) {
    let h = map(spectrum[i], 0, 255, 0, height);
    rect(map(i, 0, spectrum.length, 0, width), height-h, width/spectrum.length, h);
  }
}

Data → Sound


let osc;
function setup() { osc = new p5.Oscillator('sine'); osc.start(); }
function draw() {
  osc.freq(map(mouseX, 0, width, 110, 880));
  osc.amp(map(mouseY, height, 0, 0, 0.5), 0.01);
}

The Mapping: The Core Decision

A good mapping is intuitive: the ear immediately understands the relationship between data and sound.

Data	Audio property	Effect
Temperature	Frequency	Hot = high-pitched
Altitude	Volume	High = loud
Speed	Tempo	Fast = fast

See ATLAS GNAWA work → · Discuss your project →

Discuss your project →