Merge pull request #145 from catdad/#99-drift

adding a drift option to allow confetti to move left/right

README.md

@@ -65,6 +65,7 @@ The `confetti` parameter is a single optional `options` object, which has the fo
 - `startVelocity` _Number (default: 45)_: How fast the confetti will start going, in pixels.
 - `decay` _Number (default: 0.9)_: How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.
 - `gravity` _Number (default: 1)_: How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like.
+- `drift` _Number (default: 0)_: How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right.
 - `ticks` _Number (default: 200)_: How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you.
 - `origin` _Object_: Where to start firing confetti from. Feel free to launch off-screen if you'd like.
   - `origin.x` _Number (default: 0.5)_: The `x` position on the page, with `0` being the left edge and `1` being the right edge.

index.html

@@ -675,15 +675,16 @@ <h2><a href="#custom-canvas" id="custom-canvas" class="anchor">Custom Canvas</a>
             particleCount: 1,
             startVelocity: 0,
             ticks: ticks,
-            gravity: 0.5,
             origin: {
               x: Math.random(),
               // since particles fall down, skew start toward the top
               y: (Math.random() * skew) - 0.2
             },
             colors: ['#ffffff'],
             shapes: ['circle'],
-            scalar: randomInRange(0.4, 1)
+            gravity: randomInRange(0.4, 0.6),
+            scalar: randomInRange(0.4, 1),
+            drift: randomInRange(-0.4, 0.4)
           });
 
           if (timeLeft > 0) {

src/confetti.js

@@ -173,6 +173,7 @@
     startVelocity: 45,
     decay: 0.9,
     gravity: 1,
+    drift: 0,
     ticks: 200,
     x: 0.5,
     y: 0.5,
@@ -294,6 +295,7 @@
       tick: 0,
       totalTicks: opts.ticks,
       decay: opts.decay,
+      drift: opts.drift,
       random: Math.random() + 5,
       tiltSin: 0,
       tiltCos: 0,
@@ -306,7 +308,7 @@
   }
 
   function updateFetti(context, fetti) {
-    fetti.x += Math.cos(fetti.angle2D) * fetti.velocity;
+    fetti.x += Math.cos(fetti.angle2D) * fetti.velocity + fetti.drift;
     fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity;
     fetti.wobble += 0.1;
     fetti.velocity *= fetti.decay;
@@ -427,6 +429,7 @@
       var startVelocity = prop(options, 'startVelocity', Number);
       var decay = prop(options, 'decay', Number);
       var gravity = prop(options, 'gravity', Number);
+      var drift = prop(options, 'drift', Number);
       var colors = prop(options, 'colors', colorsToRgb);
       var ticks = prop(options, 'ticks', Number);
       var shapes = prop(options, 'shapes');
@@ -452,6 +455,7 @@
             ticks: ticks,
             decay: decay,
             gravity: gravity,
+            drift: drift,
             scalar: scalar
           })
         );