Added star as a possible shape

README.md

@@ -71,7 +71,7 @@ The `confetti` parameter is a single optional `options` object, which has the fo
   - `origin.x` _Number (default: 0.5)_: The `x` position on the page, with `0` being the left edge and `1` being the right edge.
   - `origin.y` _Number (default: 0.5)_: The `y` position on the page, with `0` being the top edge and `1` being the bottom edge.
 - `colors` _Array<String>_: An array of color strings, in the HEX format... you know, like `#bada55`.
-- `shapes` _Array<String>_: An array of shapes for the confetti. The possible values are `square` and `circle`. The default is to use both shapes in an even mix. You can even change the mix by providing a value such as `['circle', 'circle', 'square']` to use two third circles and one third squares.
+- `shapes` _Array<String>_: An array of shapes for the confetti. The possible values are `square`, `circle`, and `star`. The default is to use both squares and circles in an even mix. To use a single shape, you can provide just one shape in the array, such as `['star']`. You can also change the mix by providing a value such as `['circle', 'circle', 'square']` to use two third circles and one third squares.
 - `scalar` _Number (default: 1)_: Scale factor for each confetti particle. Use decimals to make the confetti smaller. Go on, try teeny tiny confetti, they are adorable!
 - `zIndex` _Integer (default: 100)_: The confetti should be on top, after all. But if you have a crazy high page, you can set it even higher.
 - `disableForReducedMotion` _Boolean (default: false)_: Disables confetti entirely for users that [prefer reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). The `confetti()` promise will resolve immediately in this case.

index.html

@@ -462,6 +462,28 @@ <h2><a href="#snow" id="snow" class="anchor">Snow</a></h2>
     </div>
   </div>
 
+  <div class="container">
+    <div class="group" data-name="stars">
+      <div class="flex-rows">
+        <div class="left">
+          <h2><a href="#stars" id="stars" class="anchor">Stars</a></h2>
+          <button class="run">
+            Run
+            <span class="icon">
+              <svg class="icon"><use xlink:href="#run"></use></svg>
+            </span>
+          </button>
+        </div>
+        <div class="description">
+          <p>
+            Or celebrate with a burst of stars!
+          </p>
+        </div>
+      </div>
+      <div class="editor"></div>
+    </div>
+  </div>
+
   <div class="container">
     <div class="group" data-name="continuous">
       <div class="flex-rows">
@@ -692,6 +714,18 @@ <h2><a href="#custom-canvas" id="custom-canvas" class="anchor">Custom Canvas</a>
           }
         }());
       },
+      stars: function stars() {
+        confetti({
+          particleCount: 100,
+          spread: 360,
+          ticks: 50,
+          gravity: 0,
+          decay: 0.94,
+          startVelocity: 30,
+          shapes: ['star'],
+          colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8'],
+        });
+      },
       continuous: function continuous() {
         var end = Date.now() + (15 * 1000);
 

src/confetti.js

@@ -308,6 +308,25 @@
     };
   }
 
+  function drawStar(context, cx, cy, spikes, outerRadius, innerRadius){
+    var rot = Math.PI / 2 * 3;
+    var x = cx;
+    var y = cy;
+    var step = Math.PI / spikes;
+
+    while (spikes--) {
+      x = cx + Math.cos(rot) * outerRadius;
+      y = cy + Math.sin(rot) * outerRadius;
+      context.lineTo(x, y);
+      rot += step;
+
+      x = cx + Math.cos(rot) * innerRadius;
+      y = cy + Math.sin(rot) * innerRadius;
+      context.lineTo(x, y);
+      rot += step;
+    }
+  }
+
   function updateFetti(context, fetti) {
     fetti.x += Math.cos(fetti.angle2D) * fetti.velocity + fetti.drift;
     fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity;
@@ -334,6 +353,8 @@
       context.ellipse ?
         context.ellipse(fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI) :
         ellipse(context, fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI);
+    } else if (fetti.shape === 'star') {
+      drawStar(context, fetti.x, fetti.y, 5, 4 * fetti.scalar, 8 * fetti.scalar);
     } else {
       context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
       context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));

test/index.test.js

@@ -326,6 +326,20 @@ test('shoots circle confetti', async t => {
   t.deepEqual(pixels, ['#0000ff', '#ffffff']);
 });
 
+test('shoots star confetti', async t => {
+  const page = t.context.page = await fixturePage();
+
+  t.context.buffer = await confettiImage(page, {
+    colors: ['#0000ff'],
+    shapes: ['star']
+  });
+  t.context.image = await reduceImg(t.context.buffer);
+
+  const pixels = await uniqueColors(t.context.image);
+
+  t.deepEqual(pixels, ['#0000ff', '#ffffff']);
+});
+
 test('shoots default scaled confetti', async t => {
   const page = t.context.page = await fixturePage();
 
@@ -980,4 +994,3 @@ test('exposed confetti method has a `reset` property', async t => {
 
   t.is(await page.evaluate(`typeof confettiAlias.reset`), 'function');
 });
-