canvas-confetti - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/confetti.browser.js

@@ -1,2 +0,2 @@
-// canvas-confetti v0.3.0 built on 2019-06-23T13:46:05.478Z
+// canvas-confetti v0.4.0 built on 2019-08-05T22:54:55.707Z
 !(function (window, module) {
@@ -45,2 +45,3 @@ // source content
     y: 0.5,
+    shapes: ['square', 'circle'],
     zIndex: 100,
@@ -87,2 +88,7 @@ colors: [
 
+  function randomInt(min, max) {
+    // [min, max)
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
   function toDecimal(str) {
@@ -151,2 +157,3 @@ return parseInt(str, 16);
       color: hexToRgb(opts.color),
+      shape: opts.shape,
       tick: 0,
@@ -185,6 +192,10 @@ totalTicks: opts.ticks,
 
-    context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
-    context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));
-    context.lineTo(Math.floor(x2), Math.floor(y2));
-    context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));
+    if (fetti.shape === 'circle') {
+      context.ellipse(fetti.x, fetti.y, Math.abs(x2 - x1) * 0.6, Math.abs(y2 - y1) * 0.6, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI);
+    } else {
+      context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
+      context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));
+      context.lineTo(Math.floor(x2), Math.floor(y2));
+      context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));
+    }
 
@@ -289,2 +300,3 @@ context.closePath();
       var zIndex = prop(options, 'zIndex', Number);
+      var shapes = prop(options, 'shapes');
       var origin = getOrigin(options);
@@ -315,2 +327,3 @@
             color: colors[temp % colors.length],
+            shape: shapes[randomInt(0, shapes.length)],
             ticks: ticks,
@@ -317,0 +330,0 @@ decay: decay

package.json

 {
   "name": "canvas-confetti",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "performant confetti animation in the browser",
@@ -5,0 +5,0 @@ "main": "src/confetti.js",

README.md

@@ -33,3 +33,3 @@ # 🎊 canvas confetti 🎊
 ```html
-<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@0.3.0/dist/confetti.browser.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@0.4.0/dist/confetti.browser.min.js"></script>
 ```
@@ -69,2 +69,3 @@
 - `colors` _Array&lt;String&gt;_: An array of color strings, in the HEX format... you know, like `#bada55`.
+- `shapes` _Array&lt;String&gt;_: 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.
 - `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.
@@ -71,0 +72,0 @@

src/confetti.js

@@ -42,2 +42,3 @@ (function () {
     y: 0.5,
+    shapes: ['square', 'circle'],
     zIndex: 100,
@@ -84,2 +85,7 @@ colors: [
 
+  function randomInt(min, max) {
+    // [min, max)
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
   function toDecimal(str) {
@@ -148,2 +154,3 @@ return parseInt(str, 16);
       color: hexToRgb(opts.color),
+      shape: opts.shape,
       tick: 0,
@@ -182,6 +189,10 @@ totalTicks: opts.ticks,
 
-    context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
-    context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));
-    context.lineTo(Math.floor(x2), Math.floor(y2));
-    context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));
+    if (fetti.shape === 'circle') {
+      context.ellipse(fetti.x, fetti.y, Math.abs(x2 - x1) * 0.6, Math.abs(y2 - y1) * 0.6, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI);
+    } else {
+      context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
+      context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));
+      context.lineTo(Math.floor(x2), Math.floor(y2));
+      context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));
+    }
 
@@ -286,2 +297,3 @@ context.closePath();
       var zIndex = prop(options, 'zIndex', Number);
+      var shapes = prop(options, 'shapes');
       var origin = getOrigin(options);
@@ -312,2 +324,3 @@
             color: colors[temp % colors.length],
+            shape: shapes[randomInt(0, shapes.length)],
             ticks: ticks,
@@ -314,0 +327,0 @@ decay: decay

No alert changes

Improved metrics

Total package byte prevSize

37874

4.76%

Lines of code

903

4.15%

Number of lines in readme file

186

0.54%

No dependency changes