Dan Raskin

Interactive "Light-to-Sound" Web Audio Synth

With Haley Ryan

"Science Fair Synth"

First presentated Dec 18, 2022 @ Cyanotopia, Minneapolis, MN

Users navigate a simple browser interface to convert RGB color data into electronic music. A light sensor (Adafruit flora Color Sensor) attached to a Raspberry Pi sends RGB color data to the cloud. Node.js server utilizes Server-Sent Events to forward RGB color data to clients. Mobile users control the browser synthesizer by selecting constantly changing color data, which is converted into sound using an experimental web audio library i dropped my phone the screen cracked by developer Bill Orcutt.

  • Synth allows users to control three simultaneous signal chains, arranged as columns of three squares.
  • Top square in column generate sinewaves (osc and subosc) based on 'R' value of selected 'RBG' color.
  • Middle squares modulate sine frequencies via an Low-Frequency Oscillator (LFO). LFO frequency and gain are set by ratios of R, G, and B values.
  • Bottom squares are Low-Pass Filters (LPF); they are currently deactivated--I haven't figured out yet how to incorporate these into the signal chain!

This hosted demonstration runs a node.js script which randomly generates RBG values every other second, replicating the function of the Raspberry Pi controller.


How to use

mobile home screen

Top of interface displays current color. In hosted demo, color changes every other second. In a live interactive context, display changes when a user 'samples' a real-world color using the Adafruit color sensor.

No squares are selected, and no sound will play.

mobile home screen

Two signal paths have been triggered. The middle oscillators are being modified by an LFO.

If an LFO (middle square) is deactivated while app is running, either by clicking 'reset' on square (top right corner) or 'MUTE' at bottom, it will not restart. Refresh browser to continue modifying LFO.

APP IN ACTION!!!


Explanatory Instagram posts by Haley Ryan

mobile home screen mobile home screen mobile home screen mobile home screen mobile home screen mobile home screen mobile home screen mobile home screen