Polyrhythms and Introducing labs.seanchenpiano.com

Today we’re going to be looking at figuring out how to calculate the execution of polyrhythms. It can seem difficult trying to figure out how to divide a beat into different numbers evenly, especially if they’re odd or prime numbers. But all it is is simple math, and once you have the system down, it’s pretty automatic and you can even find patterns that are even more helpful (and you probably learned those in music school if you went).

Before we start with that, I also want to introduce a new subsection of the website: labs.seanchenpiano.com. I have a lot of programming projects that I’ve worked on throughout the years, and I’m going to try to finish them up and put them on. They won’t be super polished at first, and will receive many updates after publication. Right now, there’s only one thing on there, and that is a polyrhythm metronome app. It should work on most browsers and devices, but let me know in the comments if anything is buggy, or any feature requests!

Preface

Polyrhythms are usually not meant to be performed exactly mathematically correct. Oftentimes it is just a composer trying to fit more notes into a beat, or maybe the composer wants the de-synchronization as part of an affect or expression, and not necessarily the precise division. But just like with many expressive techniques, I think it is important to know what the baseline is — what it should precisely be — before you add in rubato or other personal touches. So, just to be clear, I’m not advocating for metronomic or robotic execution of polyrhythms.

Definition

So what are polyrhythms? It happens when you have two or more voices going, and each of them are dividing a beat into different tuples. Tuples are just a subdivision of beats: duples, triplets, quadruplets, etc. The most common of polyrhythms is 3 against 2 or 2 against 3, written 3:2 or 2:3, and most musicians learn how to execute those early on. I’m not aware of any tradition or logic behind what number goes where; for me, as a pianist, it seems that the first number corresponds to the right hand and the second to the left hand, though I can see it being interpreted as the second number being the general beat of the passage, and the first number being the “ornament” or deviation.

9:5 Polyrhythm from Scriabin’s Etude Op. 42 No. 1. The actual meter is 3/4

The Problem

We want to find a method so that we can be 100% sure of where the micro-beats should lie. Let’s do a pie analogy:

We have a whole pie.
We want everyone at the dinner to get the same amount of pie with no leftovers
We know we are going to have either 2 or 3 people at the dinner.
How can we divide up the pie so that regardless of whether 2 or 3 people show up, we can divide the pie evenly?

The question then becomes, what number of slices divides into both 2 and 3 without remainder? The answer lies in something you learned in elementary school, but probably didn’t care to remember how to calculate it: the Least (Lowest) Common Multiple (LCM). But wait, there’s more! In order to calculate the LCM, you need to know the Greatest Common Divisor (GCD) of the two numbers. Yay! Math! Fun!

Keep in mind, this proof is very non-rigorous, and probably has many holes and unwritten assumptions. But I hope it’ll make it logical how to find the LCM.

Numbers

A couple of terminology clarifications.

I’ll be saying “number” a lot, but what we really care about are only the natural (or counting) numbers: $1, 2, 3, ...$ . So, you can replace any “number” with “natural number” or “positive integer“.

In this set of numbers, we call one number divisible by another if the remainder is exactly 0. You might say, “3 IS divisible by 2; you get 1.5!” Again, we are dealing with the set of natural numbers, and 1.5 is not in this set, so 3 is not divisible by 2.

A factor or divisor of a number divides that number, i.e. 2 is a factor 6, but 5 is not a factor of 6.

A Common Multiple

Most of you might recall that to find the LCM of two numbers, you should just multiply the two numbers together… or something. But let’s reason this out:

A number $x$ is always at least divisible by 1 and itself; there can be other factors, but the number itself and 1 must always be factors. (Think prime numbers: they are the least divisible numbers, besides 1, and even they are divisible by one and themselves.)
The easiest way to make any number into a multiple of another number $n$ is to multiply by $n$ .

Fine, so we have a number $x$ , and its factors include at least 1 and $x$ . If we want to make that number also a multiple of $y$ , then we multiply the two together. Algebraically, the fact that this makes the resulting number a common multiple (ACM — my abbreviation) is obvious. (Note for people who don’t know algebra, when we write two variables right next to each other, we mean that they should be multiplied):

$Given positive integers $x$ and $y$: $acm(x, y) = xy$, since the numbers $x$ and $y$ are \textit{literally} in the product.$

You can divide $xy$ by $x$ and get $y$ and vice versa. And we can be sure that there is no remainder, because by definition, $x$ and $y$ are whole numbers.

Let’s call this $xy$ product officially the ACM.

The Least Common Multiple?

How can we be sure it’s the least common multiple? And if it isn’t, how can we make it the least?

Let’s assume for now that this ACM $xy$ is not the LCM, and that there is a whole number $d>1$ that you can divide the ACM by to get the LCM. That means:

$lcm(x, y) \stackrel{?}{=} \dfrac{acm(x,y)}{d}= \dfrac{xy}{d}$

Fine! So if this new fraction is indeed the LCM, we can then still divide by each of the original numbers (and get 0 remainder). Let’s see what we get if we do that:

$\dfrac{xy}{d} / x = \dfrac{y}{d} \text{ and } \dfrac{xy}{d} / y = \dfrac{x}{d}$

So, since the remainder must be zero, that means that $\dfrac{y}{d} \text{ and } \dfrac{x}{d}$ are both whole numbers, and thus $d$ must be a divisor/factor of both $x$ and $y$ . We now divide the ACM by $d$ to get a new common multiple. If this new common multiple is not the least, then we should be able to find another common divisor of $x$ and $y$ . Rinse and repeat until there are no more common divisors, in which case, we have found THE least common multiple.

So all we have to do to go from ACM-> LCM is to continually divide by common divisors until there are no more common divisors besides 1 (since dividing by 1 doesn’t change anything).

Example:

$Find the gcd of 24 and 30. Common divisors of 24 and 30 are 1, 2, and 3. First we multiply 24 and 30 to get 720, then divide by 2 to get 360, then divide by 3 to get 120. gcd(24, 30) = 120.$

An easier way than dividing sequentially through all common divisors is just to find the greatest common divisor, and divide our ACM by it. Almost there.

Greatest Common Divisor

The GCD of two numbers is the largest whole number that divides both numbers without remainder. For example, $gcd(6, 3) = 3$ and $gcd(7, 9) = 1$ . You can check for yourself using these examples that the gcd is the largest number that will divide evenly both numbers. Sidenote: numbers that have a GCD of 1 are called coprime numbers.

There are many methods for finding GCD, including the Euclidean Algorithm. For our purposes (since polyrhythms don’t tend to get that high in number), we can just try every number from smaller of the two numbers (whose GCD we are calculating) down to 1. If you get to one and haven’t found a number that divides into both, then the GCD is 1, and the numbers are coprime, in which case the ACM we calculated is equal to the LCM. Otherwise, you divide the ACM by the GCD to get the LCM.

The Least Common Multiple!

Let’s summarize the equation for finding the least common multiple:

$lcm(x,y) = \dfrac{xy}{gcd(x,y)}$

So what do we do with this?

Method 1

Again, let’s do any easy example: 3:2 polyrhythm. First, we write down all the numbers:

$\begin{tabular}{c c c c c c} 1 & 2 & 3 & 4 & 5 & 6 \\ \end{tabular}$

Then, on the bottom, we want to ask ourselves, if two people showed up to our pie party, how many slices would each one get? $\dfrac{6}{2}=3$ . So on the bottom row, let’s write two groups of “123”

$\begin{tabular}{c c c c c c} 1 & 2 & 3 & 4 & 5 & 6 \\ \hline 1 & 2 & 3 & 1 & 2 & 3 \\ \end{tabular}$

Now, let’s put an X on the first of each group, and erase the rest:

Then you

$\begin{tabular}{c c c c c c} 1 & 2 & 3 & 4 & 5 & 6 \\ \hline X & & & X & & \\ \end{tabular}$

The X’s are where the notes are going to be played. Do the same sort of thing for the top, except now it’s three groups of two (the pie divided among three people):

$\begin{tabular}{c c c c c c} 1 & 2 & 1 & 2 & 1 & 2 \\ \hline 1 & 2 & 3 & 4 & 5 & 6 \\ \hline X & & & X & & \\ \end{tabular}$

And then change the first of each groupinto X’s

$\begin{tabular}{c c c c c c} X & & X & & X & \\ \hline 1 & 2 & 3 & 4 & 5 & 6 \\ \hline X & & & X & & \\ \end{tabular}$

To read this chart, we count to 6, and on one hand we tap the top line, and the other the bottom. Now you have one way of thinking about 3:2 accurately – subdivide the beat into 6, and play the notes on their respective microbeats.

But, when the polyrhythms get more complex, it can result in a high LCM, and we don’t want to have to count to that high of a number. There’s a cyclical way to think about this chart, and we will do it with the same polyrhythm.

Method 2

For this method, you will choose one of the divisions to be the main “pulse.” In this case, since the duple is on the bottom, that will be the main pulse. We’re going start by doing the same thing as the previous method:

$\begin{tabular}{c c c c c c} 1 & 2 & 3 & 4 & 5 & 6 \\ \hline 1 & 2 & 3 & 1 & 2 & 3 \\ \end{tabular}$

Now copy the bottom line to the middle line, and then put X’s on the bottom line first micro-beats, like so:

$\begin{tabular}{c c c c c c} 1 & 2 & 3 & 1 & 2 & 3 \\ \hline X & & & X & & \\ \end{tabular}$

Next, let’s put our 3 groups of two on the top line:

$\begin{tabular}{c c c c c c} 1 & 2 & 1 & 2 & 1 & 2 \\ \hline 1 & 2 & 3 & 1 & 2 & 3 \\ \hline X & & & X & & \\ \end{tabular}$

And then turn them into X’s:

$\begin{tabular}{c c c c c c} X & & X & & X & \\ \hline 1 & 2 & 3 & 1 & 2 & 3 \\ \hline X & & & X & & \\ \end{tabular}$

Last step, for each top X, copy the number directly under it and overwrite the X:

$\begin{tabular}{c c c c c c} 1 & & 3 & & 2 & \\ \hline 1 & 2 & 3 & 1 & 2 & 3 \\ \hline X & & & X & & \\ \end{tabular}$

Though in writing this seems like a lot of steps, in practicality, you don’t need a lot of the intermediate steps once you know what’s going on.

To perform this, you tap or clap the bottom line, then you start saying the middle line quietly (or thinking it), and then once you get a good groove, you start accenting the numbers that fall on the top line. In graphical form, you would be doing something like this: 1 2 3 1 2 3, where the gray numbers you don’t say out loud, the magenta ones you do, and you clap on “1”.

This way of thinking about polyrhythms is how some conservatories teach you. Again, that is to clap the bottom line, think the middle line, and say the top line:

$\begin{tabular}{l | c c c c c c} say & 1 & & 3 & & 2 & \\ \hline think (or whisper) & 1 & 2 & 3 & 1 & 2 & 3 \\ \hline clap & X & & & X & & \\ \end{tabular}$

This table also gives you a visual aid to use if you want to tap, say, the right hand for the top line and left hand for the bottom line. You can see how things are supposed to line up.

Here’s one for 7:3 ( $lcm(7,3)=21$ ) in both table versions:

$\begin{tabu}{*{21}{c}} 1 & & & 4 & & & 7 & & & 10 & & & 13 & & & 16 & & & 19 & & \\ \hline 1 & 2 & 3 & 4 & 5 & 6 & 7 & 8 & 9 & 10 & 11 & 12 & 13 & 14 & 15 & 16 & 17 & 18 & 19 & 20 & 21\\ \hline 1 & & & & & & & 8 & & & & & & & 15 & & & & & & \\ \end{tabu}$

$\begin{tabu}{*{21}{c}} 1 & & & 4 & & & 7 & & & 3 & & & 6 & & & 2 & & & 5 & & \\ \hline 1 & 2 & 3 & 4 & 5 & 6 & 7 & 1 & 2 & 3 & 4 & 5 & 6 & 7 & 1 & 2 & 3 & 4 & 5 & 6 & 7 \\ \hline X & & & & & & & X & & & & & & & X & & & & & & \\ \end{tabu}$

The second one is easier to count, right? (I mean, neither are particularly easy.)

Conclusion

Again, I want to make sure to emphasize that one should not be robotic about their performance of polyrhythms. However, knowing how it should mathematically work allows you to know what the baseline is. And with modern music, sometimes you have to do it precisely! I hope this and the tool on the labs will help you. Again, check out labs.seanchenpiano.com/polyrhythms! The default (non-verbose) mode on the metronome shows you the cyclical way of counting (method 2), and the verbose mode shows you everything!

June 21, 2018June 21, 2018

Web Technologies for Musicians

or, From Score to Performance for Programmers

In this post I hope to give musicians (or anyone with a musical background) an easy insight into how a web page gets from the “internet” onto your browser. You won’t learn how to program, or even get a remotely detailed look at it, since this will be a high-level overview. But hopefully, it will allow you to be able to communicate more clearly with someone who is a programmer (especially if they’re working on or maintaining your site). And besides, we live in a world now where everything is basically a website; even many of the “apps” on your phone are just basically running a web browser.

For programmers who are interested in the behind-the-scenes for musicians and performers, this is just as simplified (and agenda-ified) a view of musicians as it is of web rendering, but hopefully it inspires you to read more into it.

Scenario: musician

Okay, so let’s say you’re a pianist – you’ve gone through years of school, learned how to interpret the score and make stylistically informed performances. Your teachers have put good habits into your practice and your playing, and you’re out on your own now.

You get a request one day to perform this cool Cage piece. Since you don’t have a copy of this piece, you have to get one from the library. You look up the phone number of the library, (123) 456-789 and call them, because you’re too lazy to go there physically. You ask the librarian if you can borrow the cool Cage piece. She checks her computer for a bit, and then puts you on hold. Moments later, she returns and says, “I’ve found the piece you wanted.” You’ll get it in a few days.

Few days later, the score comes in the mail. You take a quick look at the score. There’s a note in the first page that says that there are two inserts necessary to perform the piece. Confused, you call the library back, and ask the librarian about the inserts. “Ah,” she says, and puts you on hold again. She returns and says, “I’ve found the two inserts. One of them has some extra dynamics and articulations that either aren’t in the score or are corrections, listed by measure and beat numbers; the second insert has some complicated performance directions. We’ll send it over.”

A few more days pass, and now you have all the parts and begin learning the piece.

As you read through the piece, you realize that the first insert (of dynamics and articulations) has two options. One of them is meant for performances in large halls, the other for small halls. Furthermore, there is a small addendum in case the performer does not have access to electronic amplification.

The second insert is more involved. You have to roll dice to get random numbers, rearrange parts of the score, repeat some sections, etc. This is some serious business!

The day comes for your performance, and after all of your work reading the score, incorporating the right option in the first insert (you didn’t know how big the hall was, or if they could provide amplification, so you were pretty stressed out), and following all of the instructions in the second insert to a tee, you’re met with ~~thunderous applause and standing ovation~~ perplexed faces, furrowed eyebrows, and noncommittal applause, because modern music.

Scenario 2: Web Client (browser)

Okay, so let’s say you’re a browser, maybe Google Chrome – you’ve been programmed by thousands of programmers, learned how to read HTML, and render it onto the screen according to all of the specifications. Your programmers made sure you followed all the rules before they released you, and you’re now installed onto some bozo’s computer.

One day, the bozo opens you up, and directs you to go to a website. Since you don’t have this website in your cache, you have to call its host and get a copy. You look up the IP number of the library, 123.456.789.012, and call them, because you’re a browser, and you can’t go anywhere. You ask the host if you can get that HTML page that the bozo wants. She checks herself (because she IS the server) for a bit, and then puts you on hold. Milliseconds later, she returns and says, “I’ve found the HTML page you wanted.” You’ll get it in a few milliseconds.

Few milliseconds later, the HTML comes in through HTTP. You take a quick look at the page. There’s a note in the header that says that there are two inserts necessary to render the page. Confused, you call the host back, and ask it about the inserts. “Ah,” she says, and puts you on hold again. She returns and says, “I’ve found the two inserts. One of them is a CSS that has some extra styles that aren’t in the HTML, or are corrections, listed by element class or ID; the second insert is a JavaScript file. We’ll send it over.”

A few more milliseconds pass, and now you have all of the assets and begin rendering the page.

As you parse the HTML, CSS, and scripts, you realize that the CSS has two options. One of them is meant for large screens, the other for small ones like smart phones. Furthermore, there is a small addendum in case the browser does not support modern CSS grid-based layout.

The second insert, the script is more involved. You have to generate random numbers, rearrange parts of the DOM, repeat some elements, etc. This is some serious business!

The time comes for your rendering, and after all of your work parsing the HTML, incorporating the right option in the CSS, and following all of the JavaScript instructions to a tee, you’re met with ~~gratitude and praise from the bozo~~ complaints that it took too long to render, and questions of why the scrolling is so laggy.

The Components

HTML <-> Score

HTML stands for HyperText Markup Language. Hypertext just means text that can contain hyperlinks (which are links to other webpages). The important thing is that it’s a markup language which is a way to create documents or pages that describes not only the content, but any other metadata attached to it. There are many other markup languages, like XML, EPUB, and RSS.

Music notation is a markup language. It contains not only the raw content (which we can call the notes), but also metadata, including time signatures, tempo markings, key signatures, ossia, etc. In fact, this is why there is a portable music notation format, MusicXML. Most importantly, without scripts, HTML is static, unchanging. Scores, without performance indications, remain static as well.

Just like you can define things like a <table>, <div>, or <script> in HTML, you can create <measure>, <clef>, and <pitch> in MusicXML. In most markup languages, you need to close your tags with a corresponding one: <table>content</table> or

<pitch>
    <step>C</step>
    <octave>4</octave>
</pitch>

CSS <-> Dynamics, articulations, etc.

CSS stands for Cascading Style Sheets, which contain the styles necessary for rendering the page. Styles can also be defined in the HTML, but for reasons such as the one in the scenario above, you might need different style sheets depending on the window size, or even the font size. It’s called cascading, because styles defined later override previous ones, just like corrections in scores. The difference in this comparison would be that we usually don’t put dynamics and articulations in a separate file, again, unless they’re corrections.

JavaScript <-> Performance directions

JavaScript is a programming language. Browsers can read these scripts and perform the work that is asked of them. For example, a browser could be asked to fetch a video, or calculate some numbers, or render 3D graphics, just like how performers can be asked to sing, hit the inside of the piano, or sit there in silence. These are not standard things in music, and equivalently, the things that JavaScript asks the browser to do are not able to be represented in HTML, because they often encode dynamic behavior.

In modern websites, most of the power and heavy-lifting is in the JavaScript. When you see a website (like mine) that is a SPA (single-page application, which means that clicking on different links within the site causes the content to be changed dynamically, and not through an entire page load) you can be sure that most of the work is being done by JavaScript. In fact, my HTML file is probably 30 lines long, whereas there are tens of thousands of lines of JavaScript. By using JavaScript, you can generate HTML on the fly, and so the user experience is more interactive and dynamic.

Programmer <-> Composer

In this case, we are talking about a front-end programmer. They program the HTML (in a very generic sense, keeping this high-level), just like composers write down the score.

If we are to make it more modern, programmers usually work indirectly with HTML, usually writing code that generates HTML (either on the server or client side). The equivalent would be a composer jotting down sketches, and then having an arranger flush out the orchestration, or a publisher cleaning everything up and typesetting it so that it is readable.

Client (Browser) <-> Musician

Musicians are trained and have musical knowledge within them to read the score, and parse the performance indications. Browsers each have a rendering engine – Chrome and Safari use versions of WebKit, Firefox currently uses Gecko, and Edge uses EdgeHTML. These all read HTML and can translate that into a web page, just like how musicians can read a score and turn it into music. Furthermore, all of the browsers have a JavaScript engine – Chrome uses V8, Firefox uses SpiderMonkey, and Edge uses ChakraCore. (The one clear takeaway is that programmers need to come up with better names.)

Server <-> Library/Music Store

To get the score we have to either get it from the library or a music store, if we don’t already have it. Similarly, the browser needs to get the HTML page from a server, if they don’t already have it in the cache. The server does a lot of things behind the scenes, just like a music store or library would have a lot of internal workings that you don’t see, such as how different pages are stored, how databases are accessed, etc.

I hope this gives you a bit of an understanding into what goes into rendering a page. I didn’t define every term in the scenarios, but I think given the parallel, they should be self-explanatory. And, if not, there is always Wikipedia. Let me know in the comments if there’s anything specific you’d like to hear about!

June 8, 2018June 8, 2018

Things I Learned Making a Website from Scratch

I think I’ve reached a point with this new website where I feel comfortable saying it is pretty much done. I just wanted to do a quick post about the process, and what I learned. First off, all of the code is open source on GitHub: https://github.com/kamiyo/sycpiano. Thanks also to my brothers Jason and Andrew for getting me started and helping me with things, especially in the earlier stages. It took around 2 years! Don’t worry if the acronyms mean nothing to you – I’m going to do a simple musicians guide to web programming later!

Feel free to skip to the last section (Main Takeaways) if you want to read the main takeaways. The following sections are just me bragging a little bit about the web programming technical things I learned, so I can feel a bit better about myself and not like I’ve wasted two years in working on this website…

Going In

I had programmed my previous two sites myself as well, but I didn’t have the guidance of two programmers at those times. To go back further, I was messing around with HTML and CSS back in the blogger and Geocities days.

So I came into this process knowing a bit:

HTML
CSS
JavaScript (vanilla)
PHP (sorta)
MySQL (very basic)
Messing around with .htaccess

I was fortunate to have taken some comp sci courses when I was in school, so I had a solid foundation of any ALGOL-like languages (C, C++, Java).

What I Learned

The early stages of the website was all about learning the framework and modern JS. In my old site I just gzipped up the JavaScript file, and served it along with some libraries like jQuery through their CDNs.

My brothers suggested I use React as my framework, whereas for my previous site I used AngularJS (v1). They also setup a toolchain using Webpack and Gulp, running on NodeJS. Later on we dragged Typescript in.

So, things I learned:

Almost everything runs on JS now.
You basically never touch .html files anymore.
React
NodeJS
Reducers and state management
Typescript and Modern JavaScript (es6+)
Promises!
Using and creating a restful API
Using a build tool like Webpack
Postgres, using an ORM like Sequelize, and Full-Text Search
A bit about Nginx and some server stuff like using pm2 to keep the Node server running.
More familiarity with version control (git)
CSS-in-JS solutions
Canvas and WebGL animations
Using Chrome devtools

And not web-related, I learned a bit on using OpenCV and doing some facial recognition (trying to automate thumbnail creation of my own photos) and about constant-Q transforms when turning audio time data to frequency data (as seen in the music visualization). I’ll also do a post about that.

Main Takeaways

Mostly, I learned I have no design chops. I have the hardest time choosing colors and layout, and making user interaction decisions. So much of the design is literally hours of trial and error. The coding part is fine. It’s the design part that is hard.

It takes time. All the code planning, debugging, refactoring, especially when you don’t have experience working with a large codebase. But you learn alot. And you save money.

Everything is on the internet. Stackoverflow, GitHub issues and gists – if you have a problem, chances are someone else has had it before you.

Cross-platform is a b*tch. Just because it works on one browser on one device, doesn’t mean it will work on another one. I’m also starting to think mobile-first would be the best way to go (which is not what I did). It’s harder to do good mobile UI/UX compared to desktop. You can tell on my site mobile was (not-quite, but almost) an afterthought… or like a halfway-through-thought.

Designing your own website means you can have it exactly the way you want. If you want a feature, you implement it. If you can’t, it’s because you’re not good enough, not because it’s not possible.

Modern web development seems to be “libraries, libraries, libraries” but it really does make it easier. Because of that, a lot of development time is spent also on building and making sure the shipped code is compact and performant.

Finally, just like how artists learn by tracing, composers learn by transcribing, and musicians learn by listening, it’s helpful to start coding from examples. I was sort of reluctant to learn React, and all this new stuff, but since my brothers helped get things started, I could study what they had written and learn from there.

And just like music, do it only if you enjoy it.