Create a Vector Renderer for Classical Music Scores

A journey from an idea to a finished product

Who got this crazy idea? Creating vector graphics for classical music scores?

About two years ago, we got an idea to create vector graphics for classical music scores. You might have known some score writers can export scores to 3rd-party vector graphics editors. However, the thing we are seeking is little more complicated. Those generated vector objects must be interpreted perfectly by Core Graphics which is a two-dimensional drawing engine available for iOS, and macOS applications. Almost instantly, we realized that we have to create a vector renderer from scratch to meet our need.

Oops! a score is not composed by staves only

In our experiments, we tried different combinations of tools and libraries. A common problem is that notes are misaligned and can’t be attached on staves firmly. The issue has to be addressed by a separate way to deal with music notes; therefore, an alternative geometry logic for macOS and iOS platforms individually is necessary because they don’t share the same coordinate system.

Eh? Life should not be wasted for waiting

The second challenge seems to be cliched because it’s about the performance for rendering speed. Nevertheless, it’s always a deal breaker when trying to bring something from theory to reality. Owing to most our targets are classical music scores and have more than thousands of vector objects in pipelines for drawing and presenting, we built a special cache flow to maintain reasonable refresh rate on iOS devices.

Phew~ The price is worth it

Although the initial idea is quite crazy and we have walked that long road, the process is enjoyable and pleasing to us. Not only our vector music scores can be scaled and printed at any size without losing quality, but also occupy only 4.3MB with total 204 pages for Beethoven Piano Sonatas Nos. 1–8. In the past year, we created a desktop development tool on macOS for our scores. And we also built a Swift native rendering engine for the drawing of music stave and notes. On top of that, the experience is priceless when it comes to conquering something.