feat(fireworks): extending fireworks config, num of partic. and firew…

…orks
mateoguzmana · Nov 28, 2022 · 447d8f1 · 447d8f1
1 parent afa6879
commit 447d8f1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/example/src/components/Examples.tsx b/example/src/components/Examples.tsx
@@ -1,5 +1,6 @@
 import React, { ReactChild, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Canvas, useFont } from '@shopify/react-native-skia';
 import {
   Fireworks,
   FiestaThemes,
@@ -14,7 +15,6 @@ import {
   FiestaAnimations,
 } from 'react-native-fiesta';
 import Content from './Content';
-import { Canvas, useFont } from '@shopify/react-native-skia';
 
 export function Examples() {
   const { runFiestaAnimation } = useFiesta();
@@ -78,7 +78,16 @@ export function Examples() {
         </TouchableOpacity>
 
         <TouchableOpacity
-          onPress={() => setComponentToRender(<Fireworks />)}
+          onPress={() =>
+            setComponentToRender(
+              <Fireworks
+                numberOfFireworks={7}
+                // uncomment these two lines to some crazy fireworks
+                numberOfParticles={80}
+                fireworkRadius={2000}
+              />
+            )
+          }
           style={styles.pressable}
         >
           {/*@ts-ignore */}

diff --git a/src/components/Firework.tsx b/src/components/Firework.tsx
@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { Group } from '@shopify/react-native-skia';
 import { FireworkParticle } from './FireworkParticle';
 import { fromRadians } from '../utils/fireworks';
+
 interface FireworkPosition {
   x: number;
   y: number;
@@ -13,6 +14,11 @@ export interface FireworkProps {
   autoHide?: boolean;
   particleRadius?: number;
   fireworkRadius?: number;
+  /**
+   * Performance gets affected with more than 180 particles
+   * @default 50
+   */
+  numberOfParticles?: number;
 }
 
 export const Firework = memo(
@@ -22,22 +28,22 @@ export const Firework = memo(
     autoHide,
     particleRadius,
     fireworkRadius = 400,
+    numberOfParticles = 50,
   }: FireworkProps) => {
     const cx = useMemo(() => initialPosition?.x ?? 0, [initialPosition?.x]);
     const cy = useMemo(() => initialPosition?.y ?? 0, [initialPosition?.y]);
 
     const particlesToDraw = useMemo(
       () => () => {
-        const particles = 180; // performance gets affected with more than 180 particles
         const golden_ratio = (Math.sqrt(4) + 2) / 2 - 1;
         const golden_angle = golden_ratio * (2 * Math.PI);
         const circle_rad = fireworkRadius * 0.4 - 20; // defines the radious of the final circle
 
         const particlesToDrawArray = [];
 
-        for (let i = 1; i <= particles; ++i) {
-          const dot_rad = 0.001 * i;
-          const ratio = i / particles;
+        for (let i = 1; i <= numberOfParticles; ++i) {
+          const dot_rad = (numberOfParticles / 10) * 0.001 * i;
+          const ratio = i / numberOfParticles;
           const angle = i * golden_angle;
           const spiral_rad = ratio * circle_rad;
 
@@ -63,7 +69,7 @@ export const Firework = memo(
 
         return particlesToDrawArray;
       },
-      [cx, cy, fireworkRadius]
+      [cx, cy, fireworkRadius, numberOfParticles]
     );
 
     return (

diff --git a/src/components/Fireworks.tsx b/src/components/Fireworks.tsx
@@ -4,7 +4,7 @@ import { Canvas, Group } from '@shopify/react-native-skia';
 import { FiestaThemes } from '../constants/theming';
 import { screenHeight } from '../constants/dimensions';
 import { screenWidth } from '../constants/dimensions';
-import { Firework } from './Firework';
+import { Firework, FireworkProps } from './Firework';
 import { colorsFromTheme } from '../utils/colors';
 
 const optimalNumberOfFireworks = 3;
@@ -17,16 +17,22 @@ const initialPositions = [
   { x: 250, y: -800 },
   { x: 200, y: -900 },
 ];
-const fireworksToRenderArray = [...Array(optimalNumberOfFireworks)];
+
 const fireworksGroupTransform = [
   { translateY: screenHeight * 1.2, translateX: screenWidth / 2 },
 ];
 
-export interface FireworksProps {
+export interface FireworksProps
+  extends Pick<FireworkProps, 'numberOfParticles'> {
   autoHide?: boolean;
   particleRadius?: number;
   theme?: string[];
   fireworkRadius?: number;
+  /**
+   * For performance reasons, limiting the maximum number to 7
+   * @default 3 - most performant number of fireworks
+   */
+  numberOfFireworks?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
 }
 
 export const Fireworks = memo(
@@ -35,10 +41,16 @@ export const Fireworks = memo(
     particleRadius,
     theme = FiestaThemes.Default,
     fireworkRadius = 400,
+    numberOfFireworks = optimalNumberOfFireworks,
+    ...rest
   }: FireworksProps) => {
+    const fireworksToRenderArray = useMemo(
+      () => [...Array(numberOfFireworks)],
+      [numberOfFireworks]
+    );
     const colors = useMemo(
-      () => colorsFromTheme(theme, optimalNumberOfFireworks),
-      [theme]
+      () => colorsFromTheme(theme, numberOfFireworks),
+      [numberOfFireworks, theme]
     );
 
     return (
@@ -53,6 +65,7 @@ export const Fireworks = memo(
               autoHide={autoHide}
               particleRadius={particleRadius}
               fireworkRadius={fireworkRadius}
+              {...rest}
             />
           ))}
         </Group>