feat: some changes to the audio visualizer example

Author: michalsek

apps/common-app/src/components/Container.tsx

@@ -8,17 +8,18 @@ import { colors } from '../styles';
 type ContainerProps = PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
+  disablePadding?: boolean;
 }>;
 
 const headerPadding = 120; // eyeballed
 
 const Container: React.FC<ContainerProps> = (props) => {
-  const { children, style, centered } = props;
+  const { children, style, centered, disablePadding } = props;
 
   return (
     <SafeAreaView
       edges={['bottom', 'left', 'right']}
-      style={[styles.basic, centered && styles.centered, style]}>
+      style={[styles.basic, centered && styles.centered, !disablePadding && styles.padding, style]}>
       <BGGradient />
       {children}
     </SafeAreaView>
@@ -30,10 +31,12 @@ export default Container;
 const styles = StyleSheet.create({
   basic: {
     flex: 1,
-    padding: 24,
     paddingTop: headerPadding,
     backgroundColor: colors.background,
   },
+  padding: {
+    padding: 24,
+  },
   centered: {
     alignItems: 'center',
     justifyContent: 'center',

apps/common-app/src/examples/AudioVisualizer/AudioVisualizer.tsx

@@ -12,7 +12,7 @@ import FreqTimeChart from './FreqTimeChart';
 import { Container, Button } from '../../components';
 import { layout } from '../../styles';
 
-const FFT_SIZE = 256;
+const FFT_SIZE = 512;
 
 const URL =
   'https://software-mansion-labs.github.io/react-native-audio-api/audio/music/example-music-02.mp3';
@@ -21,8 +21,11 @@ const AudioVisualizer: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const [times, setTimes] = useState<number[]>([]);
-  const [freqs, setFreqs] = useState<number[]>([]);
+  const [times, setTimes] = useState<number[]>(
+    new Array(FFT_SIZE / 2).fill(127)
+  );
+
+  const [freqs, setFreqs] = useState<number[]>(new Array(FFT_SIZE / 2).fill(0));
 
   const audioContextRef = useRef<AudioContext | null>(null);
   const analyserRef = useRef<AnalyserNode | null>(null);
@@ -75,6 +78,7 @@ const AudioVisualizer: React.FC = () => {
     if (!analyserRef.current) {
       analyserRef.current = audioContextRef.current.createAnalyser();
       analyserRef.current.fftSize = FFT_SIZE;
+      analyserRef.current.smoothingTimeConstant = 0.8;
 
       analyserRef.current.connect(audioContextRef.current.destination);
     }
@@ -102,7 +106,7 @@ const AudioVisualizer: React.FC = () => {
   }, []);
 
   return (
-    <Container>
+    <Container disablePadding>
       <View style={{ flex: 0.2 }} />
       <FreqTimeChart
         timeData={times}
@@ -127,6 +131,11 @@ const AudioVisualizer: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   button: {
     justifyContent: 'center',
     flexDirection: 'row',

apps/common-app/src/examples/AudioVisualizer/Charts.tsx

@@ -9,16 +9,35 @@ import {
 } from '@shopify/react-native-skia';
 
 import { useCanvas } from './Canvas';
-import { colors } from '../../styles';
 import { getPointCX, getPointCY } from '../DrumMachine/utils';
 
 const INNER_RADIUS = 90;
 const OUTER_RADIUS = 150;
 
+interface Point {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  color: string;
+}
+
 export function getAngle(stepIdx: number, maxSteps: number) {
   return (stepIdx / maxSteps) * Math.PI * 2 - Math.PI / 2;
 }
 
+function sampleExp(value: number) {
+  return Math.exp(2.5 * value) / 4 - 0.2;
+}
+
+function weightWithIndex(value: number, index: number, indexMax: number) {
+  if (index < indexMax / 2) {
+    return value * Math.max(index / (indexMax / 2), 0.5);
+  }
+
+  return value;
+}
+
 interface ChartLineProps {
   data: number[];
   frequencyBinCount: number;
@@ -31,9 +50,9 @@ const TimeChartLine: React.FC<ChartLineProps> = (props) => {
   const circlePaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setAntiAlias(true);
-    paint.setColor(Skia.Color(colors.main));
+    paint.setColor(Skia.Color('#FFD61E'));
     paint.setStyle(PaintStyle.Stroke);
-    paint.setStrokeWidth(3);
+    paint.setStrokeWidth(6);
     return paint;
   }, []);
 
@@ -57,15 +76,10 @@ const TimeChartLine: React.FC<ChartLineProps> = (props) => {
       <Circle
         cx={size.width / 2}
         cy={size.height / 2}
-        r={INNER_RADIUS * 1.33}
+        r={140}
         paint={circlePaint}
       />
-      <Points
-        points={points}
-        mode="polygon"
-        color={colors.main}
-        strokeWidth={2}
-      />
+      <Points points={points} mode="polygon" color="#B5E1F1" strokeWidth={2} />
     </>
   );
 };
@@ -74,43 +88,71 @@ const FrequencyChartLine: React.FC<ChartLineProps> = (props) => {
   const { size } = useCanvas();
   const { data, frequencyBinCount } = props;
 
-  const points = useMemo(() => {
+  const { points, barWidth } = useMemo(() => {
     const maxHeight = size.height;
     const maxWidth = size.width;
-    const barWidth = maxWidth / frequencyBinCount;
+    const bw = (Math.PI * 150) / (frequencyBinCount - 64);
 
-    return data.map((value, index) => {
-      const angle = getAngle(index, frequencyBinCount);
-      const x = getPointCX(angle, OUTER_RADIUS, maxWidth / 2);
-      const y = getPointCY(angle, OUTER_RADIUS, maxHeight / 2);
+    const p: Point[] = [];
+
+    function getPoint(
+      index: number,
+      value: number,
+      color: string,
+      ogIndex: number
+    ) {
+      const angle = getAngle(index - 32, 2 * (frequencyBinCount - 64));
+      const x1 = getPointCX(angle, OUTER_RADIUS, maxWidth / 2);
+      const y1 = getPointCY(angle, OUTER_RADIUS, maxHeight / 2);
 
       const x2 = getPointCX(
         angle,
-        OUTER_RADIUS + (Math.max(value, 10) / 256.0) * 30,
+        OUTER_RADIUS +
+          sampleExp(
+            weightWithIndex(value / 255.0, ogIndex, frequencyBinCount)
+          ) *
+            40,
         maxWidth / 2
       );
+
       const y2 = getPointCY(
         angle,
-        OUTER_RADIUS + (Math.max(value, 10) / 256.0) * 30,
+        OUTER_RADIUS +
+          sampleExp(
+            weightWithIndex(value / 255.0, ogIndex, frequencyBinCount)
+          ) *
+            40,
         maxHeight / 2
       );
 
-      const hue = 180 + (index / frequencyBinCount) * 60;
-      const color = `hsla(${hue}, 100%, 50%, 40%)`;
-      return { color, x, y, x2, y2, barWidth };
+      return { color, x1, y1, x2, y2 };
+    }
+
+    data.forEach((value, index) => {
+      if (index < 32 || index >= frequencyBinCount - 32) {
+        return;
+      }
+
+      const hue = 180 + 20 * (index / frequencyBinCount);
+      const color = `hsla(${hue}, 100%, 50%, 80%)`; // '#E1F3FA';
+
+      p.push(getPoint(index, value, color, index));
+      p.push(getPoint(2 * frequencyBinCount - 65 - index, value, color, index));
     });
+
+    return { points: p, barWidth: bw };
   }, [size, data, frequencyBinCount]);
 
   return (
     <>
       {points.map((point, index) => (
         <Line
           key={index}
-          p1={vec(point.x, point.y)}
+          p1={vec(point.x1, point.y1)}
           p2={vec(point.x2, point.y2)}
           style="stroke"
-          strokeWidth={point.barWidth}
           color={point.color}
+          strokeWidth={barWidth}
         />
       ))}
     </>

apps/common-app/src/examples/DrumMachine/Grid.tsx

@@ -49,8 +49,7 @@ const Grid: React.FC = () => {
         cx={cPoint.x}
         cy={cPoint.y}
         color="transparent"
-        r={instrument.radius}
-      >
+        r={instrument.radius}>
         <Paint
           style="stroke"
           color={colors.border}