[FEATURE REQUEST] Visualization of same notes at same time without overlap

[TS53]

When two or more voices play the same note at same time, only one of the voices is shown and the voice(s) below are hidden.
The following is an example:
ThreeVoices.zip

If it's not too much work to implement this, it would be nice to show all voices instead of only one.
I can imagine the following visualizations:

• create the note with the same width like always but built from all colors of the voices that appear at this time at this note.
  For example, when two voices have this note at this time, make it 50 % color1 and 50 % color 2. With three notes 33 % of each color.
• stripe the note like above but diagonal

[spessasus]

I am against your suggestion. The voices in your example appear to have the same length, so the color which is show is not determined. Spessasynth renders the shortest notes at the front and longest at the back, like every other visualization I am aware of that handles overlapping notes (Synthesisia or Midiano for example)

For example if blue note lasts for 5 seconds, and then a red note lasts for a second somewhere in the middle, the end result will be a blue note with the red note drawn over it in the place where it gets pressed. Also stripes would be tricky to implement as it's not CSS, but canvas. Not to mention that is quite rare that two exactly the same notes play at the exact same time.

Here's how Midiano handles overlapping notes:

And here's Spessasynth:

As you can see, they are the same and quite clean IMO.

[TS53]

The voices in your example appear to have the same length

Exactly! I made them look like they have the same length while in fact they do not! To show how difficult it is to see when and how long the underlying note is actually played.

like every other visualization I am aware

Yes, I also have not seen a single one that can do this and wondered why.

Not to mention that is quite rare that two exactly the same notes play at the exact same time.

Unfortunately, it's quite often, ca. 50 % of my MIDIs have this problems and they are from different composers.

Also stripes would be tricky to implement as it's not CSS, but canvas.

Ok, that's unfortunate. Maybe a different way of visualization exists that makes it more obvious. Also when the shorter note is on top, which is good, it is not clear, if at the same time the note below is played.

[TS53]

Maybe just put a small circle of each color that is played simultanesly in the shortest note. This would be simple to render I think and would make it clear. But I'm not 100 % sure how good this will look in praxis.

When the shortest note is blue and behind this note also orange and red are played, the blue note gets two circles in it.
This will show, that at this time two additional notes are played.

Only information problem that still exists: are those other notes put together using multiple short notes or one long note.
This can also be not seen using this method.

After looking at such MIDIs again, I think, the last method can solve it quite well and also the information problem can get solved:

In the shortest note: create a filled circle for each hidden note. Repeat this circle pattern with same distance as long as the shortest note is. So, each circle possibly appears multiple times but they are in same distance and color pattern.
Now, create the same effect when a piano note is played (transparent shadow around the note) also around each circle. But only while the circle is played. Using this way, we can also see how long the note in the background is and if it is created from multiple notes.
When it's one long note: all circles of same color within the shortest note get the shadow at same time, exactly like it's also for a normal note. When the note is created from multiple short notes, only create the shadow of the currently active background note even though more circles of same color exist in this note (they get the shadow later).

[spessasus]

Can you maybe take a screenshot and draw a visual representation of your ideas?

[TS53]

The first note (orange) looks like this currently:

It hides the red and yellow notes. One of them has the same length. Nonetheless, the color orange is shown here as the only one.
I think, in the orange note it should already made clear, that there are more notes behind that are currently played and are hidden. Like this one (maybe not the best way, but a first idea):

When a note that is displayed on top hides an other note which finishes earlier, the small rectangle of this shorter note should only get displayed at the position of the note.

In the example above two colors are chosen for the small rectangles because two notes are hidden. If it is only one note then only one color is drawn. If it is three notes, then three colors in an alternating pattern.

This is my first idea of solving this.

My idea was to choose circles instead of rectangles to make clear that those circles are not single notes (rectangles can be seen like single notes because they look the same)

[TS53]

Another idea would be to form this note by a sequences of smaller rectangles with rounded corners in the alternating pattern but not on top of the orange note. Instead, there is no main note (here orange was chosen as main note). The alternating blocks of rounded rectangles form the note and all blocks get the shadow.
Since the lower and upper blocks have the shadow at the same time, it is clear to the viewer that these are multiple notes that would overlap otherwise.