From 3c4e072eab422a86babc3d25348e432cef2f6dd8 Mon Sep 17 00:00:00 2001
From: lovegaoshi <106490582+lovegaoshi@users.noreply.github.com>
Date: Tue, 12 Dec 2023 09:02:42 -0800
Subject: [PATCH] feat: wavy progress bar

---
 src/components/player/controls/WavyAnimation.tsx | 5 ++++-
 src/utils/Gaussian.ts                            | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/Gaussian.ts

diff --git a/src/components/player/controls/WavyAnimation.tsx b/src/components/player/controls/WavyAnimation.tsx
index 66389762..cf5aaa76 100644
--- a/src/components/player/controls/WavyAnimation.tsx
+++ b/src/components/player/controls/WavyAnimation.tsx
@@ -10,6 +10,8 @@ import {
   vec,
 } from '@shopify/react-native-skia';
 import { line, curveBasis } from 'd3';
+import { gaussian } from '@utils/Gaussian';
+
 const dimension = Dimensions.get('window');
 const width = dimension.width;
 const height = 30;
@@ -37,7 +39,8 @@ export default function WaveAnimation({
         const angle = (index / width) * (Math.PI * frequency) + phase;
         return [
           index,
-          amplitude.current * Math.sin(angle) + verticalOffset.current + 10,
+          (amplitude.current * Math.sin(angle) + verticalOffset.current + 10) *
+            gaussian(index / width),
         ];
       }
     );
diff --git a/src/utils/Gaussian.ts b/src/utils/Gaussian.ts
new file mode 100644
index 00000000..b5de4def
--- /dev/null
+++ b/src/utils/Gaussian.ts
@@ -0,0 +1,3 @@
+// e^(-(x - 0.5)² / 2*5²)
+export const gaussian = (x: number, a = 1, b = 0.5, c = 5) =>
+  Math.pow(Math.E, (a * -Math.pow(x - b, 2)) / (2 * Math.pow(c, 2)));