I’ve got a bunch of Note-Models with properties like pitchand duration. In music notation, these notes must now be placed into a certain bar on a certain line on a certain page, and so on. Many more factors influence the positioning of these notes like the notes that are placed in the same bar before them.
Also, style-properties influence many different view-elements.
The positioning of notes is affected by the “line-height” of the music lines, whether the bar is justified to the width of the page or not, and so on.
I’m looking for a design pattern that can help me cleanly position all these views relative to each other.
Can anybody help me out?
I’m using SVG with JavaScript for my current project, if this is important.
Thank you so much for helping out! 🙂
4
Why do you want a design pattern?
What you really want is an algorithm.
Musical notes derive their “height” on the stave by the note which they represent.
They derive their position on the stave relative to the time at which they are played within the bar. Additional information may change how notes are draw, such as triplets, or other rules regarding ties, and groups of 8th notes.
My advice would be to work out all the rules. And then look at your data structure, and work out how to turn the data, with the help of the rules, into something you need to render.
It might help to think of each bar as a tree of notes of varying lengths. The first level would be a semibreve, which has two children (minims) each which have to children (semiquavers) and so on. You’d only fill out the nodes in the tree if those notes exist, or if there is a rest for that period. Then you could traverse the tree for each bar to apply the rules associated with position, and note grouping, and what not.
You may have to change this slightly to handle triplets (perhaps a notification on the parent node which contains the triplets).
Using an M-way tree you could represent any time signature this way as well.
There’s a few open source note tablature (guitar notation) renderers which also draw note staves, go and have a look at how they do this too.
2