From 06fbcbe24bc5977d30bcd083291441c2fb113776 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 7 Jul 2023 21:48:03 +0200
Subject: [PATCH 1/8] docs: add slice effect

---
 website/src/pages/learn/samples.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/website/src/pages/learn/samples.mdx b/website/src/pages/learn/samples.mdx
index f0d12eb8..9f79e54a 100644
--- a/website/src/pages/learn/samples.mdx
+++ b/website/src/pages/learn/samples.mdx
@@ -319,6 +319,10 @@ Sampler effects are functions that can be used to change the behaviour of sample
 
 <JsDoc client:idle name="Pattern.chop" h={0} />
 
+### slice
+
+<JsDoc client:idle name="Pattern.slice" h={0} />
+
 ### speed
 
 <JsDoc client:idle name="speed" h={0} />

From 8589d72aeea7d8e0036fa2d4037e5de7633234f7 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 21 Jul 2023 14:40:40 +0200
Subject: [PATCH 2/8] fix: console error

---
 .../src/components/LeftSidebar/LeftSidebar.astro    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/website/src/components/LeftSidebar/LeftSidebar.astro b/website/src/components/LeftSidebar/LeftSidebar.astro
index ce4dbb80..b3f69a7e 100644
--- a/website/src/components/LeftSidebar/LeftSidebar.astro
+++ b/website/src/components/LeftSidebar/LeftSidebar.astro
@@ -47,10 +47,11 @@ const sidebar = SIDEBAR[langCode];
 </nav>
 
 <script is:inline>
-  window.addEventListener('DOMContentLoaded', () => {
-    var target = document.querySelector('[aria-current="page"]');
-    if (target && target.offsetTop > window.innerHeight - 100) {
-      document.querySelector('.nav-groups').scrollTop = target.offsetTop;
-    }
-  });
+window.addEventListener('DOMContentLoaded', () => {
+  var target = document.querySelector('[aria-current="page"]');
+  const nav = document.querySelector('.nav-groups');
+  if (nav && target && target.offsetTop > window.innerHeight - 100) {
+    nav.scrollTop = target.offsetTop;
+  }
+});
 </script>

From 2d8176f2139fa18c0a549fd70163993ce4e2d0a1 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 21 Jul 2023 14:40:47 +0200
Subject: [PATCH 3/8] begin pitch page

---
 website/src/pages/understand/pitch.mdx | 74 ++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 website/src/pages/understand/pitch.mdx

diff --git a/website/src/pages/understand/pitch.mdx b/website/src/pages/understand/pitch.mdx
new file mode 100644
index 00000000..ef4294dd
--- /dev/null
+++ b/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.

From 7373138e3da6b5581788a85da6bb03b1dce2c322 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 21 Jul 2023 17:46:45 +0200
Subject: [PATCH 4/8] improve pitch page

---
 website/src/components/PitchSlider.jsx | 216 +++++++++++++++++++++++++
 website/src/config.ts                  |   3 +
 website/src/pages/understand/pitch.mdx |  59 ++++---
 3 files changed, 248 insertions(+), 30 deletions(-)
 create mode 100644 website/src/components/PitchSlider.jsx

diff --git a/website/src/components/PitchSlider.jsx b/website/src/components/PitchSlider.jsx
new file mode 100644
index 00000000..4ab961d4
--- /dev/null
+++ b/website/src/components/PitchSlider.jsx
@@ -0,0 +1,216 @@
+import useEvent from '@strudel.cycles/react/src/hooks/useEvent.mjs';
+import useFrame from '@strudel.cycles/react/src/hooks/useFrame.mjs';
+import { getAudioContext } from '@strudel.cycles/webaudio';
+import { useState, useRef, useEffect } from 'react';
+
+let Button = (props) => <button {...props} className="bg-lineHighlight p-2 rounded-md color-foreground" />;
+
+function plotValues(ctx, values, min, max, color) {
+  let { width, height } = ctx.canvas;
+  ctx.strokeStyle = color;
+  const thickness = 8;
+  ctx.lineWidth = thickness;
+  ctx.beginPath();
+
+  let x = (f) => ((f - min) / (max - min)) * width;
+  let y = (i) => (1 - i / values.length) * height;
+  values.forEach((f, i, a) => {
+    ctx.lineTo(x(f), y(i));
+  });
+  ctx.stroke();
+}
+
+function getColor(cssVariable) {
+  if (typeof document === 'undefined') {
+    return 'white';
+  }
+  const dummyElement = document.createElement('div');
+  dummyElement.style.color = cssVariable;
+  // Append the dummy element to the document body
+  document.body.appendChild(dummyElement);
+  // Get the computed style of the dummy element
+  const styles = getComputedStyle(dummyElement);
+  // Get the value of the CSS variable
+  const color = styles.getPropertyValue(cssVariable);
+  document.body.removeChild(dummyElement);
+  return color;
+}
+
+let pitchColor = '#eab308';
+let frequencyColor = '#3b82f6';
+
+export function PitchSlider({
+  buttons = [],
+  animatable = false,
+  plot = false,
+  showPitchSlider = false,
+  showFrequencySlider = true,
+  pitchStep = '0.001',
+  min = 55,
+  max = 7040,
+}) {
+  const oscRef = useRef();
+  const activeRef = useRef();
+  const freqRef = useRef(220);
+  const historyRef = useRef([freqRef.current]);
+  const frameRef = useRef();
+  const canvasRef = useRef();
+  const [hz, setHz] = useState(freqRef.current);
+
+  useEffect(() => {
+    freqRef.current = hz;
+  }, [hz]);
+
+  useEvent('mouseup', () => {
+    oscRef.current?.stop();
+    activeRef.current = false;
+  });
+
+  let freqSlider2freq = (progress) => min + progress * (max - min);
+  let pitchSlider2freq = (progress) => min * 2 ** (progress * Math.log2(max / min));
+  let freq2freqSlider = (freq) => (freq - min) / (max - min);
+  let freq2pitchSlider = (freq) => {
+    const [minOct, maxOct] = [Math.log2(min), Math.log2(max)];
+    return (Math.log2(freq) - minOct) / (maxOct - minOct);
+  };
+
+  const freqSlider = freq2freqSlider(hz);
+  const pitchSlider = freq2pitchSlider(hz);
+
+  let startOsc = (hz) => {
+    if (oscRef.current) {
+      oscRef.current.stop();
+    }
+    oscRef.current = getAudioContext().createOscillator();
+    oscRef.current.frequency.value = hz;
+    oscRef.current.connect(getAudioContext().destination);
+    oscRef.current.start();
+    activeRef.current = true;
+    setHz(hz);
+  };
+
+  let startSweep = (exp = false) => {
+    let f = min;
+    startOsc(f);
+    const frame = () => {
+      console.log('sweep');
+      if (f < max) {
+        if (!exp) {
+          f += 10;
+        } else {
+          f *= 1.01;
+        }
+        oscRef.current.frequency.value = f;
+        frameRef.current = requestAnimationFrame(frame);
+      } else {
+        oscRef.current.stop();
+        cancelAnimationFrame(frameRef.current);
+      }
+      setHz(f);
+    };
+    requestAnimationFrame(frame);
+  };
+
+  useFrame(() => {
+    historyRef.current.push(freqRef.current);
+    historyRef.current = historyRef.current.slice(-1000);
+    if (canvasRef.current) {
+      let ctx = canvasRef.current.getContext('2d');
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+      if (showFrequencySlider) {
+        plotValues(ctx, historyRef.current, min, max, frequencyColor);
+      }
+      if (showPitchSlider) {
+        const [minOct, maxOct] = [Math.log2(min), Math.log2(max)];
+        let perceptual = historyRef.current.map((v) => Math.log2(v));
+        plotValues(ctx, perceptual, minOct, maxOct, pitchColor);
+      }
+    }
+  }, plot);
+
+  let handleChangeFrequency = (f) => {
+    setHz(f);
+    if (oscRef.current) {
+      oscRef.current.frequency.value = f;
+    }
+  };
+  let handleMouseDown = () => {
+    cancelAnimationFrame(frameRef.current);
+    startOsc(hz);
+  };
+
+  return (
+    <>
+      <span className="font-mono">
+        {showFrequencySlider && <span className="text-blue-500">{hz.toFixed(0)}Hz</span>}
+        {showFrequencySlider && showPitchSlider && <> = </>}
+        {showPitchSlider && (
+          <>
+            {min}Hz * 2
+            <sup>
+              <span className="text-yellow-500">{(freq2pitchSlider(hz) * Math.log2(max / min)).toFixed(2)}</span>
+            </sup>
+          </>
+        )}
+      </span>
+      <span></span>
+      <div>
+        {showFrequencySlider && (
+          <div className="flex space-x-1 items-center">
+            <input
+              type="range"
+              value={freqSlider}
+              min={0}
+              max={1}
+              step={0.001}
+              onMouseDown={handleMouseDown}
+              className={`block w-full max-w-[600px] accent-blue-500 `}
+              onChange={(e) => {
+                const f = freqSlider2freq(parseFloat(e.target.value));
+                handleChangeFrequency(f);
+              }}
+            />
+          </div>
+        )}
+        {showPitchSlider && (
+          <div>
+            <input
+              type="range"
+              value={pitchSlider}
+              min={0}
+              max={1}
+              //step=".001"
+              step={pitchStep}
+              onMouseDown={handleMouseDown}
+              className={`block w-full max-w-[600px] accent-yellow-500`}
+              onChange={(e) => {
+                const f = pitchSlider2freq(parseFloat(e.target.value));
+                handleChangeFrequency(f);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <div className="px-2">
+        {plot && <canvas ref={canvasRef} className="w-full max-w-[584px] h-[300px]" height="600" width={800} />}
+      </div>
+      <div className="space-x-2">
+        {animatable && (
+          <Button onClick={() => startSweep()}>
+            <span style={{ color: '#3b82f6' }}>Frequency Sweep</span>
+          </Button>
+        )}
+        {animatable && (
+          <Button onClick={() => startSweep(true)}>
+            <span style={{ color: '#eab308' }}>Pitch Sweep</span>
+          </Button>
+        )}
+        {buttons.map((f, i) => (
+          <Button key={(f, i)} onMouseDown={() => startOsc(f)}>
+            {f}Hz
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/website/src/config.ts b/website/src/config.ts
index d65c54fc..64971466 100644
--- a/website/src/config.ts
+++ b/website/src/config.ts
@@ -89,6 +89,9 @@ export const SIDEBAR: Sidebar = {
       { text: 'Accumulation', link: 'learn/accumulation' },
       { text: 'Tonal Functions', link: 'learn/tonal' },
     ],
+    Understand: [
+      { text: 'Pitch', link: 'understand/pitch' },
+    ],
     Development: [
       { text: 'REPL', link: 'technical-manual/repl' },
       { text: 'Sounds', link: 'technical-manual/sounds' },
diff --git a/website/src/pages/understand/pitch.mdx b/website/src/pages/understand/pitch.mdx
index ef4294dd..7f49a2ab 100644
--- a/website/src/pages/understand/pitch.mdx
+++ b/website/src/pages/understand/pitch.mdx
@@ -8,64 +8,63 @@ import { PitchSlider } from '../../components/PitchSlider';
 
 # Understanding Pitch
 
-Let's learn how pitch works! But first, let's experience pitch in its rawest form:
+Let's learn how pitch works! The slider below controls the <span style="color:#3b82f6;">frequency</span> of an oscillator, producing a pitch:
 
-<PitchSlider client:load />
+{/* <PitchSlider client:load showFrequencySlider plot /> */}
+
+<PitchSlider client:load showFrequencySlider />
 
 - Drag the slider to hear a pitch
 - Move the slider to change the pitch
-- Observe how the number on the right changes
+- Observe how the Hz number changes
 
-The number on the right is the **frequency** of the pitch you're hearing.
+The Hz number 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
+## Frequency vs 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:
+Maybe you have already noticed that the <span style="color:#3b82f6;">frequency slider</span> is "lopsided",
+meaning the pitch changes more in the left region and less in the right region.
+To make that more obvious, let's add a <span style="color:#eab308">pitch slider</span>
+that controls the frequency on a different scale:
 
-<PitchSlider animatable plot client:load />
+<PitchSlider animatable plot showFrequencySlider showPitchSlider client:load />
 
-There are 2 different colored lines:
+Try out the buttons above to sweep through the frequency range in 2 different ways:
 
-- <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>
+- 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>
 
 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,
+which is what the <span style="color:#eab308">pitch slider</span> does.
 
-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):
+## From Hz to Semitones
 
-<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.
+Because Hz does not match our perception, let's try to find a unit for pitch that matches.
 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]} />
+<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 7} />
 
+- Use the now stepped pitch slider above
 - Can you hear how these pitches seem related to each other?
 
-<PitchSlider logarithmic client:load buttons={[50, 100, 200, 400, 800, 1600]} />
+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.
 
+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:
+
+<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} />
 
 ## Definition
 

From aa3cb35f09ea6bf1f1cb9922bf08ebb207495777 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 21 Jul 2023 18:42:47 +0200
Subject: [PATCH 5/8] better exponent display

---
 website/src/components/PitchSlider.jsx | 14 ++++++++++++--
 website/src/pages/understand/pitch.mdx |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/website/src/components/PitchSlider.jsx b/website/src/components/PitchSlider.jsx
index 4ab961d4..e823c090 100644
--- a/website/src/components/PitchSlider.jsx
+++ b/website/src/components/PitchSlider.jsx
@@ -48,10 +48,11 @@ export function PitchSlider({
   pitchStep = '0.001',
   min = 55,
   max = 7040,
+  initial = 220,
 }) {
   const oscRef = useRef();
   const activeRef = useRef();
-  const freqRef = useRef(220);
+  const freqRef = useRef(initial);
   const historyRef = useRef([freqRef.current]);
   const frameRef = useRef();
   const canvasRef = useRef();
@@ -139,6 +140,15 @@ export function PitchSlider({
     startOsc(hz);
   };
 
+  let exponent = freq2pitchSlider(hz) * Math.log2(max / min);
+  const semitones = parseFloat((exponent * 12).toFixed(2));
+  if (semitones % 12 === 0) {
+    exponent = semitones / 12;
+  } else if (semitones % 1 === 0) {
+    exponent = `${semitones}/12`;
+  } else {
+    exponent = exponent.toFixed(2);
+  }
   return (
     <>
       <span className="font-mono">
@@ -148,7 +158,7 @@ export function PitchSlider({
           <>
             {min}Hz * 2
             <sup>
-              <span className="text-yellow-500">{(freq2pitchSlider(hz) * Math.log2(max / min)).toFixed(2)}</span>
+              <span className="text-yellow-500">{exponent}</span>
             </sup>
           </>
         )}
diff --git a/website/src/pages/understand/pitch.mdx b/website/src/pages/understand/pitch.mdx
index 7f49a2ab..041f45e5 100644
--- a/website/src/pages/understand/pitch.mdx
+++ b/website/src/pages/understand/pitch.mdx
@@ -64,7 +64,7 @@ In musical terms, a pitch with double the frequency of another is an `octave` hi
 
 Because octaves are pretty far apart, octaves are typically divided into 12 equal parts:
 
-<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} />
+<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} initial={440} />
 
 ## Definition
 

From cec7b90631a40d13494087158075a3c344ea1c8d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 22 Jul 2023 09:19:13 +0200
Subject: [PATCH 6/8] finish pitch page

---
 website/src/components/PitchSlider.jsx |  72 ++++++++++++----
 website/src/pages/understand/pitch.mdx | 110 +++++++++++++++++++++++--
 2 files changed, 160 insertions(+), 22 deletions(-)

diff --git a/website/src/components/PitchSlider.jsx b/website/src/components/PitchSlider.jsx
index e823c090..a802432a 100644
--- a/website/src/components/PitchSlider.jsx
+++ b/website/src/components/PitchSlider.jsx
@@ -1,7 +1,9 @@
 import useEvent from '@strudel.cycles/react/src/hooks/useEvent.mjs';
 import useFrame from '@strudel.cycles/react/src/hooks/useFrame.mjs';
 import { getAudioContext } from '@strudel.cycles/webaudio';
+import { midi2note } from '@strudel.cycles/core';
 import { useState, useRef, useEffect } from 'react';
+import Claviature from '@components/Claviature';
 
 let Button = (props) => <button {...props} className="bg-lineHighlight p-2 rounded-md color-foreground" />;
 
@@ -44,11 +46,14 @@ export function PitchSlider({
   animatable = false,
   plot = false,
   showPitchSlider = false,
-  showFrequencySlider = true,
+  showFrequencySlider = false,
   pitchStep = '0.001',
   min = 55,
   max = 7040,
   initial = 220,
+  baseFrequency = min,
+  zeroOffset = 0,
+  claviature,
 }) {
   const oscRef = useRef();
   const activeRef = useRef();
@@ -94,7 +99,6 @@ export function PitchSlider({
     let f = min;
     startOsc(f);
     const frame = () => {
-      console.log('sweep');
       if (f < max) {
         if (!exp) {
           f += 10;
@@ -140,14 +144,33 @@ export function PitchSlider({
     startOsc(hz);
   };
 
-  let exponent = freq2pitchSlider(hz) * Math.log2(max / min);
-  const semitones = parseFloat((exponent * 12).toFixed(2));
-  if (semitones % 12 === 0) {
-    exponent = semitones / 12;
-  } else if (semitones % 1 === 0) {
-    exponent = `${semitones}/12`;
-  } else {
-    exponent = exponent.toFixed(2);
+  let exponent, activeNote, activeNoteLabel;
+  if (showPitchSlider) {
+    const expOffset = baseFrequency ? Math.log2(baseFrequency / min) : 0;
+    exponent = freq2pitchSlider(hz) * Math.log2(max / min) - expOffset;
+    let semitones = parseFloat((exponent * 12).toFixed(2));
+    if (zeroOffset) {
+      semitones = semitones + zeroOffset;
+      const isWhole = Math.round(semitones) === semitones;
+      activeNote = midi2note(Math.round(semitones));
+      activeNoteLabel = (!isWhole ? '~' : '') + activeNote;
+      semitones = !isWhole ? semitones.toFixed(2) : semitones;
+      exponent = (
+        <>
+          ({zeroOffset} - <span className="text-yellow-500">{semitones}</span>)/12
+        </>
+      );
+    } else if (semitones % 12 === 0) {
+      exponent = <span className="text-yellow-500">{semitones / 12}</span>;
+    } else if (semitones % 1 === 0) {
+      exponent = (
+        <>
+          <span className="text-yellow-500">{semitones}</span>/12
+        </>
+      );
+    } else {
+      exponent = <span className="text-yellow-500">{exponent.toFixed(2)}</span>;
+    }
   }
   return (
     <>
@@ -156,14 +179,16 @@ export function PitchSlider({
         {showFrequencySlider && showPitchSlider && <> = </>}
         {showPitchSlider && (
           <>
-            {min}Hz * 2
-            <sup>
-              <span className="text-yellow-500">{exponent}</span>
-            </sup>
+            {baseFrequency || min}Hz * 2<sup>{exponent}</sup>
           </>
         )}
       </span>
-      <span></span>
+      {claviature && (
+        <>
+          {' '}
+          = <span className="text-yellow-500">{activeNoteLabel}</span>
+        </>
+      )}
       <div>
         {showFrequencySlider && (
           <div className="flex space-x-1 items-center">
@@ -221,6 +246,23 @@ export function PitchSlider({
           </Button>
         ))}
       </div>
+      {claviature && (
+        <Claviature
+          onMouseDown={(note) => {
+            const f = 440 * 2 ** ((note - 69) / 12);
+            handleChangeFrequency(f);
+            cancelAnimationFrame(frameRef.current);
+            startOsc(f);
+          }}
+          options={{
+            range: ['A1', 'A5'],
+            scaleY: 0.75,
+            scaleX: 0.86,
+            colorize: activeNote ? [{ keys: [activeNote], color: '#eab308' }] : [],
+            labels: activeNote ? { [activeNote]: activeNote } : {},
+          }}
+        />
+      )}
     </>
   );
 }
diff --git a/website/src/pages/understand/pitch.mdx b/website/src/pages/understand/pitch.mdx
index 041f45e5..aa812750 100644
--- a/website/src/pages/understand/pitch.mdx
+++ b/website/src/pages/understand/pitch.mdx
@@ -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>

From 92d574605e1bcaabfd85690ab7350c1358396c0b Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 22 Jul 2023 09:26:34 +0200
Subject: [PATCH 7/8] small fixes

---
 website/src/pages/understand/pitch.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/src/pages/understand/pitch.mdx b/website/src/pages/understand/pitch.mdx
index aa812750..5ddfe2b5 100644
--- a/website/src/pages/understand/pitch.mdx
+++ b/website/src/pages/understand/pitch.mdx
@@ -24,7 +24,7 @@ The Hz number 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).
+Our 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>.
 
 <Box>
 
@@ -40,7 +40,7 @@ In Strudel, we can play frequencies directly with the `freq` control:
 ## Frequency vs Pitch Perception
 
 Maybe you have already noticed that the <span style="color:#3b82f6;">frequency slider</span> is "lopsided",
-meaning the pitch changes more in the left region and less in the right region.
+meaning the pitch changes more in the left region and less in the right region.<br/>
 To make that more obvious, let's add a <span style="color:#eab308">pitch slider</span>
 that controls the frequency on a different scale:
 
@@ -93,7 +93,7 @@ In Strudel, we could do that with `freq` like this:
   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.
@@ -119,7 +119,7 @@ Typically, 440Hz is standardized to the number 69, which leads to this calculati
 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()`} />
+<MiniRepl client:visible tune={`note("69 73 76 81")`} />
 
 ## From MIDI numbers to notes
 

From 45c32933857fe50f133b624e03cfda55e3ca5fb0 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 22 Jul 2023 09:28:51 +0200
Subject: [PATCH 8/8] format

---
 website/src/config.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/website/src/config.ts b/website/src/config.ts
index 64971466..ba9b0666 100644
--- a/website/src/config.ts
+++ b/website/src/config.ts
@@ -89,9 +89,7 @@ export const SIDEBAR: Sidebar = {
       { text: 'Accumulation', link: 'learn/accumulation' },
       { text: 'Tonal Functions', link: 'learn/tonal' },
     ],
-    Understand: [
-      { text: 'Pitch', link: 'understand/pitch' },
-    ],
+    Understand: [{ text: 'Pitch', link: 'understand/pitch' }],
     Development: [
       { text: 'REPL', link: 'technical-manual/repl' },
       { text: 'Sounds', link: 'technical-manual/sounds' },