From 4f56d75e3e9592607e64a3443269db5147f1492e Mon Sep 17 00:00:00 2001
From: Melvin Chen <mchen1626@gmail.com>
Date: Fri, 24 Feb 2023 16:49:37 -0800
Subject: [PATCH] Use smaller range in frequency

---
 src/stores.ts                  |  6 +++---
 src/utils/backgroundDrawers.ts | 11 +++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/stores.ts b/src/stores.ts
index 03ec37e..39e3ae3 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -285,19 +285,19 @@ export const backgrounds: Background[] = [
     title: "Thin",
     ariaLabel: "Thin bars",
     category: "Audio",
-    draw: createAudioBarBackground({ N: 2 }),
+    draw: createAudioBarBackground({ N: 1 }),
   },
   {
     title: "Medium",
     ariaLabel: "Medium bars",
     category: "Audio",
-    draw: createAudioBarBackground({ N: 4 }),
+    draw: createAudioBarBackground({ N: 2 }),
   },
   {
     title: "Thick",
     ariaLabel: "Thick bars",
     category: "Audio",
-    draw: createAudioBarBackground({ N: 8 }),
+    draw: createAudioBarBackground({ N: 4 }),
   },
   {
     title: "Wave",
diff --git a/src/utils/backgroundDrawers.ts b/src/utils/backgroundDrawers.ts
index 595b324..6f0ac56 100644
--- a/src/utils/backgroundDrawers.ts
+++ b/src/utils/backgroundDrawers.ts
@@ -144,12 +144,19 @@ export const createAudioBarBackground = ({ N }: { N: number }): DrawFn => {
       // Let's only take every-other frequency?
       let modFreqs = [];
       let acc = 0;
-      for (let i = 0; i < freqs.length; i++) {
+      let accPlusOne = 0;
+
+      // Use the first quarter of frequencies to better capture human voice ranges
+      for (let i = 0; i < freqs.length / 4 - 1; i++) {
         acc += freqs[i];
+        accPlusOne += freqs[i + 1];
 
+        // Insert an averaged value between each modded frequency to smooth out waves
         if ((i + 1) % N === 0) {
           modFreqs.push(acc / N);
+          modFreqs.push((acc + accPlusOne) / (N * 2));
           acc = 0;
+          accPlusOne = 0;
         }
       }
 
@@ -160,7 +167,7 @@ export const createAudioBarBackground = ({ N }: { N: number }): DrawFn => {
 
       ctx.fillStyle = lingrad;
       let x0, y0, w, h;
-      for (let i = 0; i < modFreqs.length - 1; i++) {
+      for (let i = 0; i < modFreqs.length; i++) {
         x0 = gap + (barWidth + gap) * i;
         h = (modFreqs[i] / 255) * height;
         y0 = height - h;