search

Kubbaj / DodecaTone

1 stars 0 forks source link

Pattern Notes highlighting #2

Open Kubbaj opened 1 month ago

Kubbaj commented 1 month ago

I've tried a couple of times to add a feature that highlights the included notes when you select a pattern (and dims unincluded ones), but I keep running into issues specifically with the wheel, and usually only when animations are on...

What I'd like is for the notes in the pattern to be given a 3px white border, and the other notes to have their brightness reduced to 0.5 (and obv to switch when the pattern or tonic switches, and to all revert when no pattern is selected)

And I got this working perfectly on the keyboard, but could never seem to fix all the bugs with the wheel... It would render fine initially, but when changing the tonic, the wrong notes would be highlighted... Sometimes the borders would update correctly, but the brightness wouldn't (which was perplexing to me as the updates were directly adjacent in the code), and other times the whole thing would be wrong.

I'm almost certain it's an issue with the "tempElements" that get created for the animations, as it would work fine when animations were off, and there are no tempElements for the keyboard... But I also kept getting tangled up in the varying syntax between the wheel and the keys, as the former is an SVG while the latter is just total html.... (is there any reason we can't make the wheel html as well?)

DefenderOfBasic commented 1 month ago

(is there any reason we can't make the wheel html as well?)

haven't looked at the code yet, but I think we could. I think lack of consistency here is probably the main reason it's difficult to get all this sorted

like I think if I was making it from scratch I might build it on top of an HTML canvas (possibly using a library like this https://pixijs.com/), they have lots of little examples here: https://pixijs.com/8.x/playground?exampleId=basic.container

the "Cync" project I was showing you is made with something similar, but I think is even simpler: https://two.js.org/

firefox_K8gQNlCyln

DefenderOfBasic commented 1 month ago

using canvas makes things like rotation https://github.com/Kubbaj/DodecaTone/issues/4 super simple, you have an object, and you say object.rotation += 25 and that rotates it by 25 degrees, and you're done!

Kubbaj commented 1 month ago

using canvas makes things like rotation #4 super simple, you have an object, and you say object.rotation += 25 and that rotates it by 25 degrees, and you're done!

(One thing to consider here is that I'd like the text labels to remain upright, so we'd also need to counter-rotate them at the same time. I'm sure that's possible tho, right?)