Add ScoreVisualizer to display NoteSequences as musical scores in staffs

Current Visualizer class is cool (great job @notwaldorf ), and it could evolve to display sequences not just as pianoroll, but music staff as well. A derived ScoreVisualizer is proposed.

It must fit current pianoroll functionality in a polymorphic way introducing minimal changes:

• constructor(sequence, canvas, config) which:
  • Constructs all the internals according to the given config.
  • Ends up doing the initial redraw.
• redraw(activeNote, scrollIntoView) which:
  • Uses the graphical placeholder (currently canvas) to do the drawing (if needed) with the non-highlighted style.
  • Uses the activeNote, if given, to highlight it in the drawing, dimming the style colour according with the velocity note (if any).
  • Scrolls the graphical placeholder to locate the activeNote properly if requested in scrollIntoView.

Minimum Viable Product (MVP) must add new music staff functionality through the same Visualizer interface:

• Prepare a class hierarchy to allow SVG visualizers.
• Provided values config.minPitch and config.maxPitch should be used to select the musical clef (at least treble clef and bass clef). Undetermined cases will default to treble clef.
• Different values of time signature will be extracted from given sequence, if any. Otherwise it will be assumed 4/4 for all staff.
• It will be displayed the clef signature at the beginning of the staff, and it won’t change through the score.
• No key signature will be displayed at the beginning of the staff. It will be assumed C key.
• Initial time signature will be displayed at the beginning of the staff.
• Bar separators will be displayed according with initial time signature.
• There will only be a single five-line staff per NoteSequence. Multiple staff will be handled instantiating several vertically aligned ScoreVisualizer instances with different config.minPitch and config.maxPitch values.
• Horizontal note disposition will be coherent with current pianoroll Visualizer in order to allow aligning heterogeneous visualizers vertically. It’s out of scope in this class to visualize compact staff which would be handled in future derived visualizers.
• Musical clef, time signature and key signature displayed at the beginning of the staff will be handled to allow vertical alignment with other visualizers as mentioned. Yet to be detailed.
• Notes and rests will be drawn from whole note (semibreve) to sixty-fourth note (hemidemisemiquaver) including dotted-note versions (single dotted).
• No ties will be displayed to join two equal-pitch different length notes, so gaps due to rounding duration would appear.
• Note stems will be displayed upwards or downwards as expected (downwards if the notehead lies on or above the middle line of the staff).
• Shorter than octave notes will show individual note flags.
• Rests will be highlighted jointly to its former note, given they are not related to any activeNote.
• It will be shown only sharp notes, no flat ones, given there’s no key signature and sticking to the “all sharps or all flats” criteria.
• Sharps will be shown in every note they apply, providing accidental redundancy instead skipping them when they appears previously in same note in same bar.

Nice to have functionalities out of MVP:

• Different values of key signature will be extracted from given sequence, if any. Otherwise it will be assumed C key for all staff.
• Initial key signature will be displayed at the beginning of the staff.
• Changes in key signature will be displayed through score if any.
• Changes in time signature will be displayed through score if any.
• Music ties will be displayed, including multi-bar scenarios.
• Accidentals won’t be repeated within a bar, applying as well to the remainder of the measure where they occur.
• Shorter than eighth notes will group note flags in binary groups (2, 4, 8…) displaying homogeneous note beams. No mixed durations beam will be generated.
• Chord changes will be displayed on top of staff through score, if any. There will be no superscript text on it (7th and the like) but a straight single line text.
• Triplet signs will be shown.
• Values of qpm from sequence.tempos will be used to highlight rests.
• Values of qpm from sequence.tempos will be used to show cursor animation (starting with each redraw() call).
• Extra VisualizerConfig fields will be defined to achieve finer control.

Current pianoroll Visualizer relies on html5 canvas placeholder, claming in the source code it could be improved the redrawing() performance. Benefits of using SVG instead should be evaluated.

[notwaldorf]

Alright, cleaned this up again. I made redraw be the abstract function, and tested it on the SVG visualizer that now doesn’t redraw at every step.

Still thinking that your staff visualizer should inherit from the BaseVisualizer class, however. There’s nothing inherently SVG-y about PianoRollSVGVisualizer, so I don’t think any of its methods will be useful to you. This will also lead to a pretty flat hierarchy, which is much easier to grok.

[notwaldorf]

This was merged, so closing this! 🎉🎉🎉