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;