move tone definitions into utils/notes.ts

src/components/Kulintang.tsx

@@ -1,26 +1,8 @@
 import { useEffect, useRef } from 'react';
+import { TONES } from '../utils/notes';
 import useKeyboardBindings from '../hooks/useKeyboardBindings';
 import './Kulintang.css';
 
-type Note = {
-	name: string;
-	frequency: number;
-};
-
-// Pelog scale for gamelan
-// https://www.youtube.com/watch?si=F7sb2W6o500chwRT&t=114&v=FAi4RSDv4ig&feature=youtu.be
-// frequencies from https://pages.mtu.edu/~suits/notefreqs.html
-const TONES: Note[] = [
-	{ name: 'Bb', frequency: 233.08 },
-	{ name: 'B', frequency: 246.94 },
-	{ name: 'Db', frequency: 277.18 },
-	{ name: 'E', frequency: 329.63 },
-	{ name: 'F', frequency: 349.23 },
-	{ name: 'Gb', frequency: 369.99 },
-	{ name: 'Ab', frequency: 415.3 },
-	{ name: 'Bb', frequency: 466.16 },
-];
-
 export default function Kulintang() {
 	const gongsRef = useRef<(HTMLElement | null)[]>([]);
 	const playSoundRef = useRef<(frequency: number) => void>();

src/utils/notes.ts

@@ -0,0 +1,39 @@
+const NOTE_NAMES = [
+	'A',
+	'Bb',
+	'B',
+	'C',
+	'Db',
+	'D',
+	'Eb',
+	'E',
+	'F',
+	'Gb',
+	'G',
+	'Ab',
+];
+
+function getNoteName(semitonesFromA4: number) {
+	// remainder expression accounts for negative numbers
+	// https://stackoverflow.com/a/4467559
+	const modulus = NOTE_NAMES.length;
+	const remainder = ((semitonesFromA4 % modulus) + modulus) % modulus;
+
+	return NOTE_NAMES[remainder];
+}
+
+function getFrequency(semitonesFromA4: number) {
+	return 2 ** (semitonesFromA4 / 12) * 440;
+}
+
+type Note = {
+	name: string;
+	frequency: number;
+};
+
+// Pelog scale for gamelan
+// https://www.youtube.com/watch?si=F7sb2W6o500chwRT&t=114&v=FAi4RSDv4ig&feature=youtu.be
+export const TONES: Note[] = [-11, -10, -8, -5, -4, -3, -1, 1].map((n) => ({
+	name: getNoteName(n),
+	frequency: getFrequency(n),
+}));