Styling tweaks

Author: benfoxall

src/Audiovis.tsx

@@ -72,49 +72,46 @@ const Sonogram: FC<{ audio: AudioBuffer }> = ({ audio }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
 
   const fttData = useMemo(() => {
-    const fftSize = 1024; // Ensure this is a power of two
+    const fftSize = 512; // Ensure this is a power of two
     const fft = new FFT(fftSize);
     const data = audio.getChannelData(0);
 
     const chunks = Math.floor(audio.length / fftSize);
     const target = new Float32Array(fftSize * chunks);
 
-    const truncatedData = new Array(fftSize);
+    const sample = new Array(fftSize);
     const out = fft.createComplexArray();
 
-    let min = Infinity;
     let max = -Infinity;
 
     for (let i = 0; i < chunks; i++) {
       const offset = i * fftSize;
-      for (let i = 0; i < truncatedData.length; i++)
-        truncatedData[i] = data[i + offset];
-      fft.realTransform(out, truncatedData);
+      for (let i = 0; i < sample.length; i++) sample[i] = data[i + offset];
+      fft.realTransform(out, sample);
 
       for (let j = 0; j < fftSize; j++) {
-        target[i * fftSize + j] = out[j];
+        target[i * fftSize + j] = Math.abs(out[j]);
         max = Math.max(max, target[i * fftSize + j]);
-        min = Math.min(min, target[i * fftSize + j]);
       }
     }
 
+    max = max / 4;
+
     const image = new ImageData(chunks, fftSize);
 
     for (let i = 0; i < chunks; i++) {
       for (let j = 0; j < fftSize; j++) {
         const idx = j * chunks + i;
-        const value = Math.abs(target[i * fftSize + j]);
-
-        const scaledValue = value * 0.1;
+        const value = target[i * fftSize + j];
 
-        const clamped = Math.max(Math.min(scaledValue, 1), 0);
+        const scaledValue = Math.pow(value / max, 0.3); // Apply a power scale
 
-        const col = hslToRgb(clamped / 2, 0.9, 0.5);
+        const [r, g, b, a] = valueToColor(scaledValue);
 
-        image.data[idx * 4] = col[0];
-        image.data[idx * 4 + 1] = col[1];
-        image.data[idx * 4 + 2] = col[2];
-        image.data[idx * 4 + 3] = clamped * 255;
+        image.data[idx * 4] = r;
+        image.data[idx * 4 + 1] = g;
+        image.data[idx * 4 + 2] = b;
+        image.data[idx * 4 + 3] = a;
       }
     }
 
@@ -134,28 +131,10 @@ const Sonogram: FC<{ audio: AudioBuffer }> = ({ audio }) => {
   return <canvas ref={canvas} className={styles.waveform} />;
 };
 
-function hslToRgb(h: number, s: number, l: number) {
-  let r: number, g: number, b: number;
-
-  if (s == 0) {
-    r = g = b = l; // achromatic
-  } else {
-    function hue2rgb(p: number, q: number, t: number) {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    }
-
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
-  }
-
-  return [r * 255, g * 255, b * 255];
+function valueToColor(value: number) {
+  const r = value < 0.5 ? 0 : 255 * (value - 0.5) * 2;
+  const g = value < 0.5 ? 255 * value * 2 : 255 * (1 - value) * 2;
+  const b = value < 0.5 ? 255 * (1 - value * 2) : 0;
+  const a = value > 0.2 ? 255 : value * 5 * 255;
+  return [r, g, b, a];
 }