epiccoleman / react-circle-of-fifths

An interactive Circle of Fifths component for React
https://www.npmjs.com/package/react-circle-of-fifths
MIT License
9 stars 0 forks source link

Planned Feature: Display Key Signatures #4

Open epiccoleman opened 1 year ago

epiccoleman commented 1 year ago

One of the common use cases of the Circle of Fifths is as a mnemonic device for remembering key signatures (i.e. how many sharps or flats are in a given key).

It would be cool to come up with a good way of displaying key signatures on the Circle in addition to the other information. This would probably have some crossover with Issue 3, because I think we'd need to resize the existing rings to accommodate this option.

My current thinking is that users would have to choose between displaying key signatures and the diminished chords - i.e. if you want to show key signatures, you'd have to give up showing the diminished chords. I think in that case, I'd probably place the key signatures on the outermost "ring", and push the major and minor chords into the middle and center rings respectively. This one is worth spending some time experimenting with to make sure everything looks nice.

The LogRocket article that served as the original inspiration for this component demonstrates what seems like a good approach for rendering nice looking key signatures as part of the SVG.