chromatone / chromatone.center

Chromatone is a digital garden of visual music theory and a collection of visual music instruments

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.

Contact

Contact the author and the headquarter of the project.

Roadmap

We've ported almost all separate apps into the main website. It becomes more and more integrated tool. But there's more!

Current tasks and progress are open at this ClickUp project

Any other ideas? Welcome to our subreddit

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

chromatone.center's Issues

Colorize notes not working. Availability on other websites using ABCjs

Hi. First of all, blown away by your work, both the concept and the implementation.

I started to tinker with it, including showcasing it in VR https://twitter.com/utopiah/status/1626972965731442688 but as mentioned in https://twitter.com/utopiah/status/1627611793748070406 somehow the notes remain black & white for me.

Also is it possible to colorize any website featuring ABCjs content and if so how?