Chromatone

The visual music research center

Theory

Cards and short overviews on physics and physiology of vision and hearing and their intersection at visual music research, exploration, practice and self expression.

Practice

Useful tools to have in the pocket like a pack of interactive cards to learn and use in everyday music practice. These are open source web-experiments with different aspects of sound and color.

Any ideas? Share in our subreddit

NPM package

https://www.npmjs.com/package/use-chromatone

A collection of sound analysis and synthesis tools along with other useful media instruments to experiment with.

STACK

• Vue 3

  • VueUse
  • VueUse/Gesture
  • Floating Vue

• Vite

  • unplugin-vue-components
  • unplugin-icons
    • Icônes
  • Vitepress
    • i18n like in vuepress

• UnoCSS

• Pug

• TonalJs

• AbcJs

• WebMidi.js

• graphics

  • colord
  • PaperJs
  • simplex-noise

• audio

  • Tone.js
    • @tonejs/midi
  • Meyda
  • AubioJs
  • audiomotion-analyzer
  • Elementary audio
  • Essentia.js TBD (WAC2021)

• OpenLayers

• RecordRTC

• TODO:

  • https://baianat.github.io/leaps/reveal.html#example
  • https://vuexyz.org/primitives/useArc.html

https://codesandbox.io/p/github/chromatone/chromatone.center/

TBD

• Tauri desktop build
  • https://github.com/NicolaSpadari/nuxtor
  • https://github.com/ZaneH/piano-trainer/blob/master/src-tauri/Cargo.toml
  • https://www.youtube.com/watch?v=RFFSYgdeczw
  • https://github.com/ruohki/tauri-midi-example/blob/main/src-tauri/src/main.rs
• Popover panels
  • https://caniuse.com/?search=popover
  • https://frontendmasters.com/blog/popovers-work-pretty-nicely-as-slide-out-drawers/
  • https://caniuse.com/css-text-wrap-balance