finish pitch page

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);
+  let exponent, activeNote, activeNoteLabel;
-  const semitones = parseFloat((exponent * 12).toFixed(2));
+  if (showPitchSlider) {
-  if (semitones % 12 === 0) {
+    const expOffset = baseFrequency ? Math.log2(baseFrequency / min) : 0;
-    exponent = semitones / 12;
+    exponent = freq2pitchSlider(hz) * Math.log2(max / min) - expOffset;
-  } else if (semitones % 1 === 0) {
+    let semitones = parseFloat((exponent * 12).toFixed(2));
-    exponent = `${semitones}/12`;
+    if (zeroOffset) {
-  } else {
+      semitones = semitones + zeroOffset;
-    exponent = exponent.toFixed(2);
+      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
+            {baseFrequency || min}Hz * 2<sup>{exponent}</sup>
-            <sup>
-              <span className="text-yellow-500">{exponent}</span>
-            </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 } : {},
+          }}
+        />
+      )}
     </>
   );
 }

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).
+<Box>
-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:
+</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>