synesthesia--lens.com (deprecated) is a creative code-generated visualization of how Alexander Scriabin, a famous composer and pianist, perceived his synesthesia. As you enter the Synesthesia Lens, the audio from your microphone is translated into lines of color depending on each instance's frequency, sporadically appearing on the page.
VSCode, p5.js web editor, GitHub
Synesthesia is an involuntary and automatic perception of a bodily sense when another bodily sense is stimulated. For example, some synesthetic people associate specific colors with specific words. In Scriabin's mind, he saw notes as specific colors, such as C being red, A being light green, and B being light blue.
This project uses P5.js and ML5.js libraries to create the synesthetic visualization and HTML, CSS, and JS to create the website.
Live audio data is taken in from the microphone and their frequencies are identified in real time via ML5.js. This frequency is categorized into one of the 12 distinct notes found in Western music, then mapped to the color Scriabin saw for that note. I used P5.js to display each instance of the audio as a colorful line that appears for an instant than fades slowly.
This the mapping of notes to colors I used in my visualization, representing Scriabin's synesthesia. For the more musically inclined, you might notice that this diagram is the circle of fifths! The circle of fifths is a very famous graphical representation of the relationships between different keys in music.
This project uses P5.js and ML5.js libraries to create the synesthetic visualization and HTML, CSS, and JS to create the website.
Live audio data is taken in from the microphone and their frequencies are identified in real time via ML5.js. This frequency is categorized into one of the 12 distinct notes found in Western music, then mapped to the color Scriabin saw for that note. I used P5.js to display each instance of the audio as a colorful line that appears for an instant than fades slowly.
This the mapping of notes to colors I used in my visualization, representing Scriabin's synesthesia. For the more musically inclined, you might notice that this diagram is the circle of fifths! The circle of fifths is a very famous graphical representation of the relationships between different keys in music.
If you're curious about my ideation process, roadblocks, and more, click here to read an interview I had with Ozioma Chukwukeme, community manager for ml5.js, on Medium.
If you want to check out my source code, click here.
.png)