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)));