sunyatasattva / rainbow-spectre Goto Github PK

• Color wheel should be a correct representation of a hue wheel.
• It should have two handles that can be dragged around.
• When handles are dragged it updates selected colors.

If one of the handles is moved into black during spectrum mode, it will not get any other color again

• Options box. Perhaps it should be hidden in a collapsible button. Options should look neat, and perhaps have little icon. Especially the “Reference frequency” should have the dotted circle icon, so as to make it clearer that the dotted circle in the UI represents that
• Add some sort of textual documentation

The user should be allowed to select a limit (perhaps not arbitrary, but from a reasonable list).

When the user has selected a limit, while moving the handle, the infobox will show the closest n-limit interval instead of the actual interval.

Difference between that and the actual interval should be shown on a cent slider at the bottom of the infobox (see how suonoterapia.org/overtones does it).

UX Questions

• What happens in this case to #19?

• • Should the user not be allowed to edit the interval when in “snap-mode”?
• • Or should the user input be converted to the closest n-limit interval?
• • Or should the user only be allowed to select an interval out of the available n-limit intervals?
• • • Perhaps a numeric input (similar to https://github.com/sunyatasattva/vue-draggable-number) would allow the user to cycle between n-smooth numerators and denominators?

• When a high limit is selected, how should the UI prioritize the interval shown? Just on proximity? Or should intervals have different “attractors”? See #21

• While clicking it should look pressed, then expand on release
• When autoplay, the circle should animate to indicate interactivity with it

The library used in overtones-spiral can be refurbished if converted to Typescript and ES6.

Perhaps highlight the regions of the color wheel associated with 12-TET locations with some “clock-like” markers.

What about also adding an option to the n-limit interval snapping option (see #24) to snap to 12-TET?

• Allow yin yang to be played separately (shortcut ALT+click and option)

• Add credits
• Add share buttons
• Add link to Overtone Spiral
• Favicon

• It is a circle divided in two smaller swirly parts.
• Each part can receive a color as a prop.
• Circle can be clicked to play the interval

Even if you made a 360-TET system, which would be obvious, you want the result to focus on the most prominent harmonic functions. And the limit should be considered. Should it be results from 5-limit just intonation? I believe you want supervising more refined, like 11-limit or even higher.

Maybe allow the user to select which n-limit.

Some of them – like 3:2– are stronger and should have stronger attraction (a wider internal of degrees where this value is shown)

Currently colors are hurting the eye, could use a different color palette.
S - saturation
L - luminosity

• Should allow to select a base frequency
• Autoplay on mouseup (default: on → discoverability)
• Lock ratio

• Should show the ratio between the two selected sounds
• Should show the equivalent musical interval

• No hardcoded text
• i18n support
• Help text should be able to include HTML (so that links can be embedded there)

https://en.wikipedia.org/wiki/List_of_pitch_intervals#List

https://physics.stackexchange.com/a/334767
http://changingminds.org/explanations/perception/visual/hsl.htm
https://stackoverflow.com/questions/1472514/convert-light-frequency-to-rgb
https://academo.org/demos/wavelength-to-colour-relationship/
https://stackoverflow.com/questions/11850105/hue-to-wavelength-mapping

Info should be accessible from the top right. A button should open a sidebar showing some explanation.

Sidebar should default to open on first visit.

Reference handle should have a dot in the middle to avoid user confusion.