begin pitch page

website/src/pages/understand/pitch.mdx

@@ -0,0 +1,74 @@
+---
+title: Understanding Pitch
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { PitchSlider } from '../../components/PitchSlider';
+
+# Understanding Pitch
+
+Let's learn how pitch works! But first, let's experience pitch in its rawest form:
+
+<PitchSlider client:load />
+
+- Drag the slider to hear a pitch
+- Move the slider to change the pitch
+- Observe how the number on the right changes
+
+The number on the right is the **frequency** of the pitch you're hearing.
+The higher the frequency, the higher the pitch and vice versa.
+A pitch occurs whenever something is vibrating / oscillating at a frequency, in this case it's your speaker.
+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).
+
+## Pitch Perception
+
+Maybe you have already noticed that the pitch slider is "lopsided". To make that more obvious, let's automate the slider!
+Below are 2 buttons for automation, try them out:
+
+<PitchSlider animatable plot client:load />
+
+There are 2 different colored lines:
+
+- <span style="color:#3b82f6;">blue</span>: the frequency value
+- <span style="color:#eab308">yellow</span>: the pitch value or how you perceive the frequency
+
+Depending on the type of sweep, the lines behave differently:
+
+- Frequency Sweep: <span style="color:#3b82f6;">frequency is linear</span> , <span style="color:#eab308">pitch is logarithmic</span>
+- Pitch Sweep: <span style="color:#3b82f6;">frequency is exponential</span> , <span style="color:#eab308">pitch is linear</span>
+
+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"
+
+## A Pitch Slider
+
+Most of the time, we might want to control pitch in a way that matches our perception.
+Now that we know that frequency in Hz does not match our perception,
+let's make the slider exponential (and yellow):
+
+<PitchSlider logarithmic plot animatable client:load />
+
+- Do you see how the slider is now linked to the yellow line?
+- Try out the buttons again and compare it to the frequency slider above
+
+## A unit for Pitch
+
+Let's try to find a linear unit for pitch, as frequency won't cut it.
+To approach that unit of pitch, let's look at how frequency behaves when it is doubled:
+
+<PitchSlider logarithmic client:load buttons={[50, 100, 200, 400, 800, 1600]} />
+
+- Can you hear how these pitches seem related to each other?
+
+<PitchSlider logarithmic client:load buttons={[50, 100, 200, 400, 800, 1600]} />
+
+
+## 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."
+
+The oscillation is just a pattern of movement that repeats over and over again.