https://github.com/mrbenj/synesthesia

An artistic project attempting to depict my experience with synesthesia as a programmer
https://github.com/mrbenj/synesthesia

art audio audio-visualizer javascript vanilla-js

Last synced: 2 days ago
JSON representation

An artistic project attempting to depict my experience with synesthesia as a programmer

• Host: GitHub
• URL: https://github.com/mrbenj/synesthesia
• Owner: MrBenJ
• Created: 2019-12-09T04:17:39.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T16:29:43.000Z (about 2 years ago)
• Last Synced: 2024-04-08T16:12:59.565Z (9 months ago)
• Topics: art, audio, audio-visualizer, javascript, vanilla-js
• Language: JavaScript
• Homepage: https://mrbenj-synesthesia.surge.sh/
• Size: 5.94 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Synesthesia

[View this project live on the web!](https://mrbenj-synesthesia.surge.sh)

This is my attempt to allow someone to experience [Synesthesia](https://www.wikipedia.org/Synesthesia) as I experience it while writing code.

Things that you can see:

* Pretty colors that morph and change to music!

* Top and bottom peripheral visions.

* Cool background tints.

* (Some) Shapes and colors going wild in the top and bottom.

Things beyond my current programming skill or unable to reproduce for you:

* I can't make you feel the music underneath your skin (makes you feel like you're flying and the sound is giving you a big happy hug telling you everything is going to be ok.)

* Left and right peripheral vision (tried it. Makes the browser run extremely slow)

* Sense of euphoria and uplifting nature.

* Sweating, deep breathing

MP3 included here is: **"Heavy with Hoping"** by Madeon.

## Hack with me

Make sure you have:

* Node v10+

* npm v6+

* Chrome or Chromium browser with audio context

* A great pair of headphones or speakers to listen with

To install:

* Clone this repo

* Run `npm install`

* Run `npm run dev` and look at `localhost:3000`.

Edit `static/script.js` and `style.scss` to play around with JS and CSS. The window will auto-reload whenever a JS change is made, and will inject new CSS whenever you edit the styling.

Hope you enjoy it!