finish pitch page
This commit is contained in:
Felix Roos
parent
aa3cb35f09
commit
cec7b90631
2 changed files with 160 additions and 22 deletions
|
|
@ -5,6 +5,7 @@ layout: ../../layouts/MainLayout.astro
|
|||
|
||||
import { MiniRepl } from '../../docs/MiniRepl';
|
||||
import { PitchSlider } from '../../components/PitchSlider';
|
||||
import Box from '@components/Box.astro';
|
||||
|
||||
# Understanding Pitch
|
||||
|
||||
|
|
@ -12,11 +13,12 @@ Let's learn how pitch works! The slider below controls the <span style="color:#3
|
|||
|
||||
{/* <PitchSlider client:load showFrequencySlider plot /> */}
|
||||
|
||||
<PitchSlider client:load showFrequencySlider />
|
||||
<PitchSlider client:load showFrequencySlider min={20} max={20000} />
|
||||
|
||||
- Drag the slider to hear a pitch
|
||||
- Move the slider to change the pitch
|
||||
- Observe how the Hz number changes
|
||||
- <span className="text-red-300">Caution</span>: The higher frequencies could be disturbing for children or animals!
|
||||
|
||||
The Hz number is the frequency of the pitch you're hearing.
|
||||
The higher the frequency, the higher the pitch and vice versa.
|
||||
|
|
@ -24,6 +26,17 @@ A pitch occurs whenever something is vibrating / oscillating at a frequency, in
|
|||
The unit **Hz** describes how many times that oscillation happens per second.
|
||||
Our eyes are too slow to actually see the oscillation on the speaker, but we can [see it in slow motion](https://www.youtube.com/watch?v=CDMBWw7OuJQ&t=5s).
|
||||
|
||||
<Box>
|
||||
|
||||
The hearing range of a newborn is said to be between 20Hz and 20000Hz.
|
||||
The upper limit decreases with age. What's your upper limit?
|
||||
|
||||
</Box>
|
||||
|
||||
In Strudel, we can play frequencies directly with the `freq` control:
|
||||
|
||||
<MiniRepl client:visible tune={`freq("200 [300,500] 400 [500,<600 670 712 670>]")`} />
|
||||
|
||||
## Frequency vs Pitch Perception
|
||||
|
||||
Maybe you have already noticed that the <span style="color:#3b82f6;">frequency slider</span> is "lopsided",
|
||||
|
|
@ -38,11 +51,15 @@ Try out the buttons above to sweep through the frequency range in 2 different wa
|
|||
- Frequency Sweep: <span style="color:#3b82f6;">frequency rises linear</span> , <span style="color:#eab308">pitch rises logarithmic</span>
|
||||
- Pitch Sweep: <span style="color:#3b82f6;">frequency rises exponential</span> , <span style="color:#eab308">pitch rises linear</span>
|
||||
|
||||
<Box>
|
||||
|
||||
Don't be scared of these mathematical terms:
|
||||
|
||||
- "logarithmic" is just a fancy way of saying "it starts fast and slows down"
|
||||
- "exponential" is just a fancy way of saying "it starts slow and gets faster"
|
||||
|
||||
</Box>
|
||||
|
||||
Most of the time, we might want to control pitch in a way that matches our perception,
|
||||
which is what the <span style="color:#eab308">pitch slider</span> does.
|
||||
|
||||
|
|
@ -56,18 +73,97 @@ To approach that unit of pitch, let's look at how frequency behaves when it is d
|
|||
- Use the now stepped pitch slider above
|
||||
- Can you hear how these pitches seem related to each other?
|
||||
|
||||
In mathematical terms, the frequency of button `n` would be `50Hz * 2^n` (n starting from 0).
|
||||
We could already use that `n` as a pitch unit! So a value of 0 would relate to a certain base frequency (50Hz),
|
||||
and each whole number step would be an additional doubling of 2.
|
||||
<Box>
|
||||
|
||||
In musical terms, a pitch with double the frequency of another is an `octave` higher.
|
||||
|
||||
Because octaves are pretty far apart, octaves are typically divided into 12 equal parts:
|
||||
</Box>
|
||||
|
||||
Because octaves are pretty far apart, octaves are typically divided into 12 smaller parts:
|
||||
|
||||
<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} initial={440} />
|
||||
|
||||
This step is also called a semitone, which is the most common division of pitched music.
|
||||
For example, the keys on a piano keyboard are also divided into semitones.
|
||||
|
||||
In Strudel, we could do that with `freq` like this:
|
||||
|
||||
<MiniRepl
|
||||
client:visible
|
||||
tune={`freq(
|
||||
"0 4 7 12"
|
||||
.fmap(n => 440 * 2**(n/12))
|
||||
).piano()`}
|
||||
/>
|
||||
|
||||
Of course, this can be written shorter with note, as we will see below.
|
||||
|
||||
## From Semitones to MIDI numbers
|
||||
|
||||
Now we know what the distance of a semitone is.
|
||||
Above, we used an arbitrary base frequency of 440Hz, which means the exponent 0 is equal to 440Hz.
|
||||
Typically, 440Hz is standardized to the number 69, which leads to this calculation:
|
||||
|
||||
<PitchSlider
|
||||
client:load
|
||||
showPitchSlider
|
||||
showFrequencySlider
|
||||
baseFrequency={440}
|
||||
zeroOffset={69}
|
||||
pitchStep={1 / 12 / 7}
|
||||
min={440 / 8}
|
||||
max={7040}
|
||||
initial={440}
|
||||
/>
|
||||
|
||||
The yellow number is now a MIDI number, covering more than the whole human hearing range with numbers from 0 to 127.
|
||||
In Strudel, we can use MIDI numbers inside `note`:
|
||||
|
||||
<MiniRepl client:visible tune={`note("69 73 76 81").piano()`} />
|
||||
|
||||
## From MIDI numbers to notes
|
||||
|
||||
In western music theory, notes are used instead of numbers.
|
||||
For each midi number, there is at least one note label:
|
||||
|
||||
<PitchSlider
|
||||
client:load
|
||||
showPitchSlider
|
||||
showFrequencySlider
|
||||
baseFrequency={440}
|
||||
zeroOffset={69}
|
||||
pitchStep={1 / 48}
|
||||
min={440 / 8}
|
||||
max={880}
|
||||
initial={440}
|
||||
claviature
|
||||
/>
|
||||
|
||||
A full note label consists of a letter (A-G), 0 or more accidentals (b | #) and an octave number.
|
||||
This system is also known as [Scientific Pitch Notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation).
|
||||
In Strudel, these note labels can also be used inside `note` as an alternative to midi numbers:
|
||||
|
||||
<MiniRepl client:visible tune={`note("A4 C#5 E5 A5").piano()`} />
|
||||
|
||||
## Open Questions
|
||||
|
||||
Now that we have learned about different representations of pitch, there are still open questions:
|
||||
|
||||
- Why 12 notes? What about different divisions of the octave?
|
||||
- Why are notes labeled as they are? Why only 7 letters?
|
||||
- Are there other labeling systems?
|
||||
- What about Just Intonation Systems?
|
||||
- What about Timbre?
|
||||
|
||||
All those questions are important to ask and will be answered in another article.
|
||||
|
||||
## Definition
|
||||
|
||||
From [wikipedia](<https://en.wikipedia.org/wiki/Pitch_(music)>): "Pitch is a perceptual property of sounds that allows their ordering on a frequency-related scale,[1] or more commonly, pitch is the quality that makes it possible to judge sounds as "higher" and "lower" in the sense associated with musical melodies."
|
||||
At first, I wanted to start this article with a definition, but then thought it might be a good idea to focus on intuitive exploration.
|
||||
Maybe you now understand this definition much better:
|
||||
|
||||
The oscillation is just a pattern of movement that repeats over and over again.
|
||||
<Box>
|
||||
|
||||
From [wikipedia](<https://en.wikipedia.org/wiki/Pitch_(music)>): "Pitch is a perceptual property of sounds that allows their ordering on a frequency-related scale, or more commonly, pitch is the quality that makes it possible to judge sounds as "higher" and "lower" in the sense associated with musical melodies."
|
||||
|
||||
</Box>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue