Rendering a visual depiction of a staff w/ notes, based on MIDI notes being played

Hello everyone,

I’m fairly new to Juce, and I’m working on a polyphonic synthesizer. As part of the GUI, I’d like to display a musical grand staff, with noteheads on it displaying the MIDI notes currently being played.

On my audioProcessor side, I have an array that’s collecting the currently held pitches, so I can pretty easily feed my audioEditor a simple list of MIDI pitches to display, it’s really just a question of being able to draw them accurately.

The only way I can think of to implement this would be to display an image of a blank grand staff: 212466.image0 and then draw notehead-shaped ovals at the proper note positions’ Y coordinates, determined by some fancy formula having to do with the MIDIpitch vs the height above the bottom of the grand staff image. Is that basic approach correct? And if so, any thoughts on how to implement this formula to calculate the needed distance from the top/bottom of the grand staff image based on midiPitch?

[also, adding/removing ledger lines could be another issue entirely… maybe if a note is “off the staff”, then instead of a regular notehead, draw a notehead w/ a ledger line through it at those coordinates…?]

Thanks in advance for your help!

While is is being played? The bigger problem I see with that would be knowing what note to draw (1/4, 1/8th, etc.), since you don’t know until a note is released how long it was, and manually getting a note exactly the right length can be very difficult, especially at higher tempos or for shorter duration notes.

But yes, your approach sounds like what I would do for the drawing. I’d probably have pre-made bitmaps for each possible note type (including up and down versions), with transparency for the non-black parts, to let the background staff images show through.

I actually don’t need to draw/render any tempo/rhythmic information – I just want to display a visual reference of what pitches are active/on AT THIS EXACT MOMENT, so every pitch that’s on can be represented by just a black notehead with no stem, similar to the NSlider object in Max/MSP:Screen Shot 2020-11-12 at 4.22.11 PM

would you store the notehead shape as a bitmap, and draw it in all the correct locations for each active pitch? Or try to do this with some complicated vector graphics?

You should use a font like bravura and use the information in SMUFL how to draw and connect those.

Beware, it is a very long topic, the layout is a difficult task, especially the horizontal layout.

Bravura font: https://github.com/steinbergmedia/bravura

SMUFL informations: https://www.smufl.org/

btw. Bravura is licensed under a permessive license SIL.