/circle-of-5ths

Interactive circle of fifths with chords and modes; also plays chords using howler

Primary LanguageTypeScriptMIT LicenseMIT

Tech

Exploring svelte-5 preview.

Using svg (initially built in InkScape) as the main rendering medium.

Using tonal to show info about selected chord & howler to play it.

Piano sprite is made using Fl Studio.

About

Demo: https://mrnovado.github.io/circle-of-5ths/

Note: all flat chords are changed to sharp variants for personal convinience (most piano UIs are sharp-first)

image

Interactive circle of 5ths to help explore music.

  • shows diminished, minor and major chords
  • shows scales and scale degrees
  • shows relative chords
  • highlights current key
  • can switch scales by clicking on scale names
    • simple click switches boths scale and key, ie rotates both sharps and modes circles together
    • shift+click only rotates modes/degrees
  • mouse-wheel rotates chords/sharps
  • can play selected chords
    • must choose go howler at the beginning
    • piano sprite is built using FL Studio
    • see console for additional event/chord info