feat: add initialVelocityX and initialVelocityY props

Add `initialVelocityX` and `initialVelocityY` knobs to stories.
alampros · Apr 25, 2019 · bfc2ff5 · bfc2ff5
1 parent 65e1560
commit bfc2ff5
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,8 @@ export default () => {
 | `friction`           | `Number`                                                                                                   | 0.99                                                                                                                                                                                                                                                                               |                                                                       |
 | `wind`               | `Number`                                                                                                   | 0                                                                                                                                                                                                                                                                                  |                                                                       |
 | `gravity`            | `Number`                                                                                                   | 0.1                                                                                                                                                                                                                                                                                |                                                                       |
+| `initialVelocityX`   | `Number`                                                                                                   | 4                                                                                                                                                                                                                                                                                  | How fast confetti is emitted horizontally                             |
+| `initialVelocityY`   | `Number`                                                                                                   | 10                                                                                                                                                                                                                                                                                 | How fast confetti is emitted vertically                               |
 | `colors`             | `String[]`                                                                                                 | `['#f44336'`</br>`'#e91e63'`</br>`'#9c27b0'`</br>`'#673ab7'`</br>`'#3f51b5'`</br>`'#2196f3'`</br>`'#03a9f4'`</br>`'#00bcd4'`</br>`'#009688'`</br>`'#4CAF50'`</br>`'#8BC34A'`</br>`'#CDDC39'`</br>`'#FFEB3B'`</br>`'#FFC107'`</br>`'#FF9800'`</br>`'#FF5722'`</br>`'#795548']`</br> | All available Colors for the confetti pieces.                         |
 | `opacity`            | `Number`                                                                                                   | 1.0                                                                                                                                                                                                                                                                                |                                                                       |
 | `recycle`            | `Bool`                                                                                                     | true                                                                                                                                                                                                                                                                               | Keep spawning confetti after `numberOfPieces` pieces have been shown. |

diff --git a/src/Confetti.ts b/src/Confetti.ts
@@ -33,6 +33,16 @@ export interface IConfettiOptions {
    * @default 0.1
    */
   gravity: number
+  /**
+   * How fast the confetti is emitted horizontally
+   * @default 4
+   */
+  initialVelocityX: number
+  /**
+   * How fast the confetti is emitted vertically
+   * @default 10
+   */
+  initialVelocityY: number
   /**
    * Array of colors to choose from.
    */
@@ -94,6 +104,8 @@ export const confettiDefaults: Pick<IConfettiOptions, Exclude<keyof IConfettiOpt
   friction: 0.99,
   wind: 0,
   gravity: 0.1,
+  initialVelocityX: 4,
+  initialVelocityY: 10,
   colors: [
     '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
     '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',

diff --git a/src/Particle.ts b/src/Particle.ts
@@ -15,15 +15,19 @@ enum RotationDirection {
 export default class Particle {
   constructor(context: CanvasRenderingContext2D, getOptions: () => IConfettiOptions, x: number, y: number) {
     this.getOptions = getOptions
-    const { colors } = this.getOptions()
+    const {
+      colors,
+      initialVelocityX,
+      initialVelocityY,
+    } = this.getOptions()
     this.context = context
     this.x = x
     this.y = y
     this.w = randomRange(5, 20)
     this.h = randomRange(5, 20)
     this.radius = randomRange(5, 10)
-    this.vx = randomRange(-4, 4)
-    this.vy = randomRange(-10, -0)
+    this.vx = randomRange(-initialVelocityX, initialVelocityX)
+    this.vy = randomRange(-initialVelocityY, 0)
     this.shape = randomInt(0, 2)
     this.angle = degreesToRads(randomRange(0, 360))
     this.angularSpin = randomRange(-0.2, 0.2)

diff --git a/stories/index.story.jsx b/stories/index.story.jsx
@@ -49,6 +49,18 @@ storiesOf('Props|Demos', module)
         max: 1,
         step: 0.01,
       })}
+      initialVelocityX={number('Initial X', 4, {
+        range: true,
+        min: 0,
+        max: 10,
+        step: 0.1,
+      })}
+      initialVelocityY={number('Initial Y', 10, {
+        range: true,
+        min: 0,
+        max: 20,
+        step: 0.1,
+      })}
       opacity={number('Opacity', 100, {
         range: true,
         min: 0,
@@ -83,6 +95,18 @@ storiesOf('Props|Demos', module)
         max: 1,
         step: 0.01,
       })}
+      initialVelocityX={number('Initial X', 2, {
+        range: true,
+        min: 0,
+        max: 10,
+        step: 0.1,
+      })}
+      initialVelocityY={number('Initial Y', 5, {
+        range: true,
+        min: 0,
+        max: 20,
+        step: 0.1,
+      })}
       opacity={number('Opacity', 100, {
         range: true,
         min: 0,

diff --git a/stories/mouse-rain.story.jsx b/stories/mouse-rain.story.jsx
@@ -22,6 +22,8 @@ const MouseRain = () => {
       <SizedConfetti
         style={{ pointerEvents: 'none' }}
         numberOfPieces={100}
+        initialVelocityX={2}
+        initialVelocityY={5}
         ref={ref}
         gravity={0.5}
         {...activeProps}