1---
2title: Understanding Pitch
3layout: ../../layouts/MainLayout.astro
4---
5
6import { MiniRepl } from '../../docs/MiniRepl';
7import { PitchSlider } from '../../components/PitchSlider';
8import Box from '@components/Box.astro';
9
10# Understanding Pitch
11
12Let's learn how pitch works! The slider below controls the <span style="color:#3b82f6;">frequency</span> of an oscillator, producing a pitch:
13
14{/* <PitchSlider client:load showFrequencySlider plot /> */}
15
16<PitchSlider client:load showFrequencySlider min={20} max={20000} />
17
18- Drag the slider to hear a pitch
19- Move the slider to change the pitch
20- Observe how the Hz number changes
21- <span className="text-red-300">Caution</span>: The higher frequencies could be disturbing for children or animals!
22
23The Hz number is the frequency of the pitch you're hearing.
24The higher the frequency, the higher the pitch and vice versa.
25A pitch occurs whenever something is vibrating / oscillating at a frequency, in this case it's your speaker.
26The unit **Hz** describes how many times that oscillation happens per second.
27Our eyes are too slow to actually see the oscillation on the speaker, but we can <a href="https://www.youtube.com/watch?v=CDMBWw7OuJQ" target="_blank">see it in slow motion</a>.
28
29<Box>
30
31The hearing range of a newborn is said to be between 20Hz and 20000Hz.
32The upper limit decreases with age. What's your upper limit?
33
34</Box>
35
36In Strudel, we can play frequencies directly with the `freq` control:
37
38<MiniRepl client:visible tune={`freq("<200 [300,500] 400 [500,<600 670 712 670>]>*8")`} />
39
40## Frequency vs Pitch Perception
41
42Maybe you have already noticed that the <span style="color:#3b82f6;">frequency slider</span> is "lopsided",
43meaning the pitch changes more in the left region and less in the right region.<br/>
44To make that more obvious, let's add a <span style="color:#eab308">pitch slider</span>
45that controls the frequency on a different scale:
46
47<PitchSlider animatable plot showFrequencySlider showPitchSlider client:load />
48
49Try out the buttons above to sweep through the frequency range in 2 different ways:
50
51- Frequency Sweep: <span style="color:#3b82f6;">frequency rises linear</span> , <span style="color:#eab308">pitch rises logarithmic</span>
52- Pitch Sweep: <span style="color:#3b82f6;">frequency rises exponential</span> , <span style="color:#eab308">pitch rises linear</span>
53
54<Box>
55
56Don't be scared of these mathematical terms:
57
58- "logarithmic" is just a fancy way of saying "it starts fast and slows down"
59- "exponential" is just a fancy way of saying "it starts slow and gets faster"
60
61</Box>
62
63Most of the time, we might want to control pitch in a way that matches our perception,
64which is what the <span style="color:#eab308">pitch slider</span> does.
65
66## From Hz to Semitones
67
68Because Hz does not match our perception, let's try to find a unit for pitch that matches.
69To approach that unit of pitch, let's look at how frequency behaves when it is doubled:
70
71<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 7} />
72
73- Use the now stepped pitch slider above
74- Can you hear how these pitches seem related to each other?
75
76<Box>
77
78In musical terms, a pitch with double the frequency of another is an `octave` higher.
79
80</Box>
81
82Because octaves are pretty far apart, octaves are typically divided into 12 smaller parts:
83
84<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} initial={440} />
85
86This step is also called a semitone, which is the most common division of pitched music.
87For example, the keys on a piano keyboard are also divided into semitones.
88
89In Strudel, we could do that with `freq` like this:
90
91<MiniRepl
92 client:visible
93 tune={`freq(
94 "0 4 7 12"
95 .fmap(n => 440 * 2**(n/12))
96)`}
97/>
98
99Of course, this can be written shorter with note, as we will see below.
100
101## From Semitones to MIDI numbers
102
103Now we know what the distance of a semitone is.
104Above, we used an arbitrary base frequency of 440Hz, which means the exponent 0 is equal to 440Hz.
105Typically, 440Hz is standardized to the number 69, which leads to this calculation:
106
107<PitchSlider
108 client:load
109 showPitchSlider
110 showFrequencySlider
111 baseFrequency={440}
112 zeroOffset={69}
113 pitchStep={1 / 12 / 7}
114 min={440 / 8}
115 max={7040}
116 initial={440}
117/>
118
119The yellow number is now a MIDI number, covering more than the whole human hearing range with numbers from 0 to 127.
120In Strudel, we can use MIDI numbers inside `note`:
121
122<MiniRepl client:visible tune={`note("69 73 76 81")`} />
123
124## From MIDI numbers to notes
125
126In western music theory, notes are used instead of numbers.
127For each midi number, there is at least one note label:
128
129<PitchSlider
130 client:load
131 showPitchSlider
132 showFrequencySlider
133 baseFrequency={440}
134 zeroOffset={69}
135 pitchStep={1 / 48}
136 min={440 / 8}
137 max={880}
138 initial={440}
139 claviature
140/>
141
142A full note label consists of a letter (A-G), 0 or more accidentals (b | #) and an octave number.
143This system is also known as [Scientific Pitch Notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation).
144In Strudel, these note labels can also be used inside `note` as an alternative to midi numbers:
145
146<MiniRepl client:visible tune={`note("A4 C#5 E5 A5").piano()`} />
147
148## Open Questions
149
150Now that we have learned about different representations of pitch, there are still open questions:
151
152- Why 12 notes? What about different divisions of the octave?
153- Why are notes labeled as they are? Why only 7 letters?
154- Are there other labeling systems?
155- What about Just Intonation Systems?
156- What about Timbre?
157
158All those questions are important to ask and will be answered in another article.
159
160## Definition
161
162At first, I wanted to start this article with a definition, but then thought it might be a good idea to focus on intuitive exploration.
163Maybe you now understand this definition much better:
164
165<Box>
166
167From [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."
168
169</Box>
pitch.mdx