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! :)

  • My immediate thought was a blackboard, but that may become disastrous. Jun 19, 2013 at 0:12
  • 1
    Design patterns are tools used to solve common problems, not blueprints. When you find you have a problem that can be solved by a pattern, use it. But it is still a tool - one doesn't build a house saying "I have a King stud and jack, and a pair of cripples" but rather - "I want a window in this wall, where do I put the king stud and cripples?" context - identify the problem first, then look to solve it. A singleton or facade isn't going to design it for you.
    – user40980
    Jun 19, 2013 at 0:42
  • 1
    non-trivial problem; research prior solutions first, e.g. lenmus.org/en/lomsedocs/hacking/render/layouting-scores.html Jun 19, 2013 at 4:07
  • Thanks guys. @StevenA.Lowe that link was a very interesting read, thank you.
    – Macks
    Jun 20, 2013 at 9:30

1 Answer 1


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.

  • Thank you very much! The reason I thought I wanted a design pattern was that I thought I was looking for a way to structure the layouting-process. Something like a Factory-pattern.
    – Macks
    Jun 20, 2013 at 9:28
  • Patterns are just a way to communicate ideas. design algorithms to solve problems ;)
    – Matt D
    Jun 20, 2013 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.