Sound as Color

generative illustration, web development
HTML5 Canvas, Javascript, Web Audio API

Sound as Color is an exploration in converting audible frequencies to electromagnetic waves perceptible to human eye relative to that of the audible frequency range of the input sound signal.

This piece was shortlisted in the Kantar Information is Beautiful Awards 2017.

Technical Notes

  • Frequencies are extracted from the input audio and then mapped to the full visible spectrum where the lowest audible frequency in the input audio is equal to 390THz and the highest audible frequency from the input audio is equal to 750THz.
  • Samples are extracted from the input audio singal at a rate of ~2.61 per 1 second.
  • Each sample contains 16,384 indices each representing a 1.3458251953125Hz increase over the last where the value is equal to the amplitude of the sampled location.
  • Colors are generated in HSB where Hue and Saturation are extracted from the loudest audible frequency in each sample. Brightness is measured by the amplitude of that particular frequency. HSB is converted to RGB.
  • Samples are represented by circles and are mapped across the output image in an L-T-R writing system.
  • The size of each sample is determined by the average amplitude of every frequency in the sample.