From 95ae5191ceedfdaae1f85b8e5ed34926129bb9fa Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 16 May 2024 03:36:35 +0200 Subject: [PATCH 1/4] begin "understanding voicings" --- website/src/config.ts | 1 + website/src/pages/understand/voicings.mdx | 196 ++++++++++++++++++++++ 2 files changed, 197 insertions(+) create mode 100644 website/src/pages/understand/voicings.mdx diff --git a/website/src/config.ts b/website/src/config.ts index 9dee2aac2..f85d60d81 100644 --- a/website/src/config.ts +++ b/website/src/config.ts @@ -99,6 +99,7 @@ export const SIDEBAR: Sidebar = { { text: 'Coding syntax', link: 'learn/code' }, { text: 'Pitch', link: 'understand/pitch' }, { text: 'Cycles', link: 'understand/cycles' }, + { text: 'Voicings', link: 'understand/voicings' }, { text: 'Pattern Alignment', link: 'technical-manual/alignment' }, { text: 'Strudel vs Tidal', link: 'learn/strudel-vs-tidal' }, ], diff --git a/website/src/pages/understand/voicings.mdx b/website/src/pages/understand/voicings.mdx new file mode 100644 index 000000000..a36ecd8a7 --- /dev/null +++ b/website/src/pages/understand/voicings.mdx @@ -0,0 +1,196 @@ +--- +title: Understanding Chod Voicings +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '../../docs/MiniRepl'; +import { PitchSlider } from '../../components/PitchSlider'; +import Box from '@components/Box.astro'; + +# Understanding Chords and Voicings + +Let's dig deeper into how chords and voicings work. +I'll try to keep theory jargon to a minimum, so hopefully this is approachable for anyone interested. + +## What is a chord + +Playing more than one note at a time is generally called a chord. Here's an example: + +").room(.5)`} /> + +Here's the same with midi numbers: + +").room(.5)`} /> + +Here, we have two 3-note chords played in a loop. +You could already stop here and write chords in this style, which is totally fine and gives you control over individual notes. +One downside is that it can be difficult to find good sounding chords and maybe you're yearning for a way to organize chords in some other way.. + +## Labeling Chords + +Chords are typically given different labels depending on the relationship of the notes within. +In the number example above, we have `48,51,55` and `53,57,60`. + +To analyze the relationship of those notes, they are typically compared to some `root`, which is often the lowest note. +In our case, the `roots` would be `48` (= `c3`) and `53` (= `f3`). +We can express the same chords relative to those `roots` like this: + +".add("<48 53>")).room(.5)`} /> + +Now within each chord, each number represents the distance from the root. +A distance between pitches is typically called `interval`, but let's stick to distance for now. + +Now we can see that our 2 chords are actually quite similar, as the only difference is the middle note (and the root of course). +They are part of a group of chords called `triads` which are chords with 3 notes. + +### Triads + +These 4 shapes are the most common types of `triads` you will encounter: + +| shape | label | +| ----- | ---------- | +| 0,3,6 | diminished | +| 0,3,7 | minor | +| 0,4,7 | major | +| 0,4,8 | augmented | + +Here they are in succession: + +".add("60")) +.room(.5)._pitchwheel()`} +/> + +Many types of music often only use minor and major chords, so we already have the knowledge to accompany songs. Here's one: + +\`.add(\`< +a c d f +a e a e +>\`)).room(.5)`} +/> + +These are the chords for "The house of the rising sun" by The Animals. +So far it doesn't sound too exiting but at least it's recognizable.. + +## Voicings + +A `voicing` is one of many ways a certain chord shape could be played. +The term comes from choral music, where chords can be sung in different ways by changing which voice sings which note. +For example we could add 12 to one or more notes in the chord: + +".add("48")) +.room(.5)`} +/> + +Notes that are 12 steps apart (= 1 `octave`) are considered to be equal in a harmonic sense, which is why they get the same note letter. +Here's the same example with note letterns: + +") +.room(.5)`} +/> + +This type of voicings are also called `inversions`. There are many other ways we could `voice` this minor chord: + +".add("48")) +.room(.5)`} +/> + +Here we are changing the flavour of the chord slightly by + +1. doubling notes 12 steps higher, +2. using very wide distances +3. omitting notes + +## Voice Leading + +Let's revisit "The House of the Rising Sun", this time using our newly acquired voicing techniques: + +\`.add(\`< +a c d f +a e a e +>\`)).room(.5)`} + punchcard +/> + +These voicings make the chords sound more connected and less jumpy, compared to the version without voicings. +The way chords interact is also called voice leading, reminiscent of how a choir voice would move through a sequence of chords. + +For example, try singing the top voice in the above example. Then try the same on the example without voice leading. Which one's easier? + +Naturally, there are many ways a progression of chords could be voiced and there is no clear right or wrong. + +## Chord Symbols + +Musicians playing chord-based music often rely on a so called lead sheet, which is a simplified notation of a music piece. +The chords in those lead sheets are notated with symbols that allow a piece to be notated in a very concise manner. +A common way to write the chords "The House of the Rising Sun" would be: + +``` +Am | C | D | F +Am | E | Am | E +``` + +Here, each symbol consists of the `root` of the chord and optionally an `m` to signal it's a minor chord (just the root note means it's major). +We could mirror that notation in strudel using the `pick` function: + +" + .pick({ + Am: "57,60,64", + C: "55,60,64", + D: "50,57,66", + F: "57,60,65", + E: "56,59,64", + }) + .note().room(.5)`} + punchcard +/> + +## The voicing function + +Coming up with good sounding voicings that connect well can be a difficult and time consuming process. +The `chord` and `voicing` functions can be used to automate that: + +").voicing().room(.5)`} punchcard /> + +Here we're also using chord symbols but the voicings will be automatically generated with smooth voice leading. + +## Voicing Dictionaries + +The voicing function internally uses so called `voicing dictionaries`, which can also be customized: + +") + .dict('house').anchor(66) + .voicing().room(.5)`} + punchcard +/> + +In a `voicing dictionary`, each chord symbol is assigned one or more voicings. +The `voicing` function then picks the voicing that is closest to the `anchor` (defaults to `c5`). + +The handy thing about this approach is that a `voicing dictionary` can be used to play any chord progression with automated voice leading! From 83e46037d2b0156e6270ab2f46d533e4bb61d091 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 16 May 2024 08:59:07 +0200 Subject: [PATCH 2/4] typo --- website/src/pages/understand/timbre.mdx | 12 ++++++++++++ website/src/pages/understand/voicings.mdx | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 website/src/pages/understand/timbre.mdx diff --git a/website/src/pages/understand/timbre.mdx b/website/src/pages/understand/timbre.mdx new file mode 100644 index 000000000..47a8e2994 --- /dev/null +++ b/website/src/pages/understand/timbre.mdx @@ -0,0 +1,12 @@ +--- +title: Understanding Timbre +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '../../docs/MiniRepl'; +import { PitchSlider } from '../../components/PitchSlider'; +import Box from '@components/Box.astro'; + +# Understanding Timbre + +Let's learn what timbre is! diff --git a/website/src/pages/understand/voicings.mdx b/website/src/pages/understand/voicings.mdx index a36ecd8a7..d66e075e0 100644 --- a/website/src/pages/understand/voicings.mdx +++ b/website/src/pages/understand/voicings.mdx @@ -1,5 +1,5 @@ --- -title: Understanding Chod Voicings +title: Understanding Chord Voicings layout: ../../layouts/MainLayout.astro --- From e12dadb33fb9ec489df91fb76f87d7250deac9a1 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Tue, 24 Dec 2024 00:59:03 +0100 Subject: [PATCH 3/4] write more --- website/src/pages/understand/voicings.mdx | 127 +++++++++++++++++++++- 1 file changed, 126 insertions(+), 1 deletion(-) diff --git a/website/src/pages/understand/voicings.mdx b/website/src/pages/understand/voicings.mdx index d66e075e0..d255d8765 100644 --- a/website/src/pages/understand/voicings.mdx +++ b/website/src/pages/understand/voicings.mdx @@ -9,7 +9,7 @@ import Box from '@components/Box.astro'; # Understanding Chords and Voicings -Let's dig deeper into how chords and voicings work. +Let's dig deeper into how chords and voicings work in strudel. I'll try to keep theory jargon to a minimum, so hopefully this is approachable for anyone interested. ## What is a chord @@ -194,3 +194,128 @@ In a `voicing dictionary`, each chord symbol is assigned one or more voicings. The `voicing` function then picks the voicing that is closest to the `anchor` (defaults to `c5`). The handy thing about this approach is that a `voicing dictionary` can be used to play any chord progression with automated voice leading! + +## The default dictionary + +When using the default dictionary, you can use these chord symbols: + +``` +2 5 6 7 9 11 13 69 add9 +o h sus ^ - ^7 -7 7sus +h7 o7 ^9 ^13 ^7#11 ^9#11 +^7#5 -6 -69 -^7 -^9 -9 +-add9 -11 -7b5 h9 -b6 -#5 +7b9 7#9 7#11 7b5 7#5 9#11 +9b5 9#5 7b13 7#9#5 7#9b5 +7#9#11 7b9#11 7b9b5 7b9#5 +7b9#9 7b9b13 7alt 13#11 +13b9 13#9 7b9sus 7susadd3 +9sus 13sus 7b13sus +aug M m M7 m7 M9 M13 +M7#11 M9#11 M7#5 m6 m69 +m^7 -M7 m^9 -M9 m9 madd9 +m11 m7b5 mb6 m#5 mM7 mM9 +``` + +The available chords and the format is very much inspired by [ireal pro chords](https://technimo.helpshift.com/hc/en/3-ireal-pro/faq/88-chord-symbols-used-in-ireal-pro/). +Some symbols are synonymous: + +- "-" is the same as "m", for example C-7 = Cm7 +- "^" is the same as "M", for example C^7 = CM7 +- "+" is the same as "aug" + +You can decide which one's you prefer. There is no international standard for these symbols. +To get a full chord, the symbols have to be prefixed with a root pitch, e.g. D7#11 is the 7#11 chord relative to the pitch D. + +Here are all possible chords with root C: + +\`).voicing().room(.5)`} + punchcard +/> + +Note that the default dictionary contains multiple ways (= `voicings`) to play each chord symbol. +By default, the `voicing` function tries to minimize jumps. +You can alter the picked voicings in various ways, which are now explained in further detail: + +## anchor + +The `anchor` is a note that is used to align the voicings to: + +").chord("C").voicing().room(.5)`} punchcard /> + +By default, the anchor is the highest possible note the voicing can contain. +When deciding which voicing of the dictionary to pick for a certain chord, the voicing with a top note closest to the anchor wins. + +Note that the anchors in the above example match up with the top notes in the pianoroll. +Like `note`, anchor accepts either midi numbers or note names. + +## mode + +With `mode`, you can change the way the voicing relates to the `anchor`: + +").chord("C").anchor("c5").voicing().room(.5)`} + punchcard +/> + +The modes are: + +- `below`: the top note of the voicing is lower than or equal to the anchor (default) +- `above`: the bottom note of the voicing is higher than or equal to the anchor +- `duck`: the top note of the voicing is lower than the anchor +- `root`: the bottom note of the voicing is always the root note closest to the anchor + +The `anchor` can also be set from within the `mode` function: + +:c5").chord("C").voicing().room(.5)`} punchcard /> + +## n + +The `n` control can be used with `voicing` to select individual notes: + +>").voicing() +.clip("4 3 2 1").room(.5)`} + punchcard +/> + +## Example + +Here's an example of a Jazz Blues in F: + +\`) +$: n("7 8 [10 9] 8").set(chords).voicing().dec(.2) +$: chords.struct("- x - x").voicing().room(.5) +$: n("0 - 1 -").set(chords).mode("root:g2").voicing() +`} + punchcard +/> + +The chords are reused for melody, chords and bassline of the tune. From e4f89f072e3b1ed451d3b6133f2ef3d15c01defd Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Tue, 24 Dec 2024 01:05:01 +0100 Subject: [PATCH 4/4] delete timbre draft --- website/src/pages/understand/timbre.mdx | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 website/src/pages/understand/timbre.mdx diff --git a/website/src/pages/understand/timbre.mdx b/website/src/pages/understand/timbre.mdx deleted file mode 100644 index 47a8e2994..000000000 --- a/website/src/pages/understand/timbre.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Understanding Timbre -layout: ../../layouts/MainLayout.astro ---- - -import { MiniRepl } from '../../docs/MiniRepl'; -import { PitchSlider } from '../../components/PitchSlider'; -import Box from '@components/Box.astro'; - -# Understanding Timbre - -Let's learn what timbre is!