js-confetti - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

dist/es/index.js

@@ -43,4 +43,4 @@ function _classCallCheck(instance, Constructor) {
 
-function generateRandomArrayElement(confettiColors) {
-  return confettiColors[generateRandomNumber(0, confettiColors.length)];
+function generateRandomArrayElement(arr) {
+  return arr[generateRandomNumber(0, arr.length)];
 }
@@ -52,3 +52,3 @@
 var ROTATION_SLOWDOWN_ACCELERATION = 0.00001;
-var INITIAL_SHAPE_RADIUS = 8;
+var INITIAL_SHAPE_RADIUS = 6;
 var MIN_INITIAL_CONFETTI_SPEED = 0.9;
@@ -64,3 +64,3 @@ var MAX_INITIAL_CONFETTI_SPEED = 1.7;
 var SHAPE_VISIBILITY_TRESHOLD = 100;
-var DEFAULT_CONFETTIES_NUMBER = 200;
+var DEFAULT_CONFETTIES_NUMBER = 250;
 var DEFAULT_CONFETTI_COLORS = ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc03c2'];
@@ -78,3 +78,4 @@
         confettiRadius = _ref.confettiRadius,
-        confettiColors = _ref.confettiColors;
+        confettiColors = _ref.confettiColors,
+        emojies = _ref.emojies;
 
@@ -90,3 +91,3 @@ _classCallCheck(this, ConfettiShape);
     this.finalConfettiSpeedX = generateRandomNumber(MIN_FINAL_X_CONFETTI_SPEED, MAX_FINAL_X_CONFETTI_SPEED, 3);
-    this.rotationSpeed = generateRandomNumber(MIN_INITIAL_ROTATION_SPEED, MAX_INITIAL_ROTATION_SPEED, 3) * getWindowWidthCoefficient();
+    this.rotationSpeed = emojies.length ? 0.01 : generateRandomNumber(MIN_INITIAL_ROTATION_SPEED, MAX_INITIAL_ROTATION_SPEED, 3) * getWindowWidthCoefficient();
     this.dragForceCoefficient = generateRandomNumber(MIN_DRAG_FORCE_COEFFICIENT, MAX_DRAG_FORCE_COEFFICIENT, 6);
@@ -99,2 +100,3 @@ this.radius = {
     this.rotationAngle = direction === 'left' ? generateRandomNumber(0, 0.2, 3) : generateRandomNumber(-0.2, 0, 3);
+    this.emojiRotationAngle = generateRandomNumber(0, 2 * Math.PI);
     this.radiusYUpdateDirection = 'down';
@@ -111,3 +113,4 @@ var angle = direction === 'left' ? generateRandomNumber(MAX_CONFETTI_ANGLE, MIN_CONFETTI_ANGLE) * Math.PI / 180 : generateRandomNumber(-MIN_CONFETTI_ANGLE, -MAX_CONFETTI_ANGLE) * Math.PI / 180;
     this.initialPosition = Object.assign({}, shiftedInitialPosition);
-    this.color = generateRandomArrayElement(confettiColors);
+    this.color = emojies.length ? null : generateRandomArrayElement(confettiColors);
+    this.emoji = emojies.length ? generateRandomArrayElement(emojies) : null;
     this.createdAt = new Date().getTime();
@@ -123,12 +126,25 @@ this.direction = direction;
           color = this.color,
-          rotationAngle = this.rotationAngle;
+          emoji = this.emoji,
+          rotationAngle = this.rotationAngle,
+          emojiRotationAngle = this.emojiRotationAngle;
       var dpr = window.devicePixelRatio;
-      canvasContext.fillStyle = color;
-      canvasContext.beginPath();
-      canvasContext.ellipse(currentPosition.x * dpr, currentPosition.y * dpr, radius.x * dpr, radius.y * dpr, rotationAngle, 0, 2 * Math.PI);
-      canvasContext.fill();
+
+      if (color) {
+        canvasContext.fillStyle = color;
+        canvasContext.beginPath();
+        canvasContext.ellipse(currentPosition.x * dpr, currentPosition.y * dpr, radius.x * dpr, radius.y * dpr, rotationAngle, 0, 2 * Math.PI);
+        canvasContext.fill();
+      } else if (emoji) {
+        canvasContext.font = "".concat(radius.x, "px serif");
+        canvasContext.save();
+        canvasContext.translate(dpr * currentPosition.x, dpr * currentPosition.y);
+        canvasContext.rotate(emojiRotationAngle);
+        canvasContext.textAlign = 'center';
+        canvasContext.fillText(emoji, 0, 0);
+        canvasContext.restore();
+      }
     }
   }, {
     key: "updatePosition",
-    value: function updatePosition(iterationTimeDelta, currentTime, canvasWidth) {
+    value: function updatePosition(iterationTimeDelta, currentTime) {
       var confettiSpeed = this.confettiSpeed,
@@ -142,8 +158,13 @@ dragForceCoefficient = this.dragForceCoefficient,
       var timeDeltaSinceCreation = currentTime - createdAt;
-      this.rotationSpeed -= ROTATION_SLOWDOWN_ACCELERATION * iterationTimeDelta;
-      if (this.rotationSpeed < 0) this.rotationSpeed = 0;
       if (confettiSpeed.x > finalConfettiSpeedX) this.confettiSpeed.x -= dragForceCoefficient * iterationTimeDelta;
       this.currentPosition.x += confettiSpeed.x * (direction === 'left' ? -this.absCos : this.absCos) * iterationTimeDelta;
       this.currentPosition.y = this.initialPosition.y - confettiSpeed.y * this.absSin * timeDeltaSinceCreation + FREE_FALLING_OBJECT_ACCELERATION * Math.pow(timeDeltaSinceCreation, 2) / 2;
+      this.rotationSpeed -= this.emoji ? 0.0001 : ROTATION_SLOWDOWN_ACCELERATION * iterationTimeDelta;
+      if (this.rotationSpeed < 0) this.rotationSpeed = 0; // no need to update rotation radius for emoji
 
+      if (this.emoji) {
+        this.emojiRotationAngle += this.rotationSpeed * iterationTimeDelta % (2 * Math.PI);
+        return;
+      }
+
       if (radiusYUpdateDirection === 'down') {
@@ -190,11 +211,14 @@ this.radius.y -= iterationTimeDelta * rotationSpeed;
   var _confettiConfig$confe = confettiConfig.confettiRadius,
-      confettiRadius = _confettiConfig$confe === void 0 ? INITIAL_SHAPE_RADIUS : _confettiConfig$confe,
+      confettiRadius = _confettiConfig$confe === void 0 ? confettiConfig.emojies ? 80 : INITIAL_SHAPE_RADIUS : _confettiConfig$confe,
       _confettiConfig$confe2 = confettiConfig.confettiesNumber,
-      confettiesNumber = _confettiConfig$confe2 === void 0 ? DEFAULT_CONFETTIES_NUMBER : _confettiConfig$confe2,
+      confettiesNumber = _confettiConfig$confe2 === void 0 ? confettiConfig.emojies ? 80 : DEFAULT_CONFETTIES_NUMBER : _confettiConfig$confe2,
       _confettiConfig$confe3 = confettiConfig.confettiColors,
-      confettiColors = _confettiConfig$confe3 === void 0 ? DEFAULT_CONFETTI_COLORS : _confettiConfig$confe3;
+      confettiColors = _confettiConfig$confe3 === void 0 ? DEFAULT_CONFETTI_COLORS : _confettiConfig$confe3,
+      _confettiConfig$emoji = confettiConfig.emojies,
+      emojies = _confettiConfig$emoji === void 0 ? [] : _confettiConfig$emoji;
   return {
     confettiRadius: confettiRadius,
     confettiesNumber: confettiesNumber,
-    confettiColors: confettiColors
+    confettiColors: confettiColors,
+    emojies: emojies
   };
@@ -225,5 +249,4 @@ }
       var canvasHeight = this.canvas.offsetHeight;
-      var canvasWidth = this.canvas.offsetWidth;
       this.shapes.forEach(function (shape) {
-        shape.updatePosition(timeDelta, currentTime, canvasWidth);
+        shape.updatePosition(timeDelta, currentTime);
         shape.draw(_this.canvasContext);
@@ -250,3 +273,4 @@ }); // Do not remove invisible shapes on every iteration
           confettiesNumber = _normalizeConfettiCon.confettiesNumber,
-          confettiColors = _normalizeConfettiCon.confettiColors;
+          confettiColors = _normalizeConfettiCon.confettiColors,
+          emojies = _normalizeConfettiCon.emojies;
 
@@ -268,3 +292,4 @@ var yPosition = window.innerHeight * 5 / 7;
           confettiRadius: confettiRadius,
-          confettiColors: confettiColors
+          confettiColors: confettiColors,
+          emojies: emojies
         }));
@@ -275,3 +300,4 @@ this.shapes.push(new ConfettiShape({
           confettiRadius: confettiRadius,
-          confettiColors: confettiColors
+          confettiColors: confettiColors,
+          emojies: emojies
         }));
@@ -278,0 +304,0 @@ }

dist/js-confetti.browser.js

@@ -1,1 +0,1 @@
-var JSConfetti=function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function s(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}var o=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function a(){return Math.log(window.innerWidth)/Math.log(1920)}var r=function(){function i(e){var n=e.initialPosition,o=e.direction,r=e.confettiRadius,h=e.confettiColors;t(this,i);var c=s(.9,1.7,3)*a();this.confettiSpeed={x:c,y:c},this.finalConfettiSpeedX=s(.2,.6,3),this.rotationSpeed=s(.03,.07,3)*a(),this.dragForceCoefficient=s(5e-4,9e-4,6),this.radius={x:r,y:r},this.initialRadius=r,this.rotationAngle="left"===o?s(0,.2,3):s(-.2,0,3),this.radiusYUpdateDirection="down";var d="left"===o?s(82,15)*Math.PI/180:s(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(d)),this.absSin=Math.abs(Math.sin(d));var u=s(-150,0),f={x:n.x+("left"===o?-u:u)*this.absCos,y:n.y-u*this.absSin};this.currentPosition=Object.assign({},f),this.initialPosition=Object.assign({},f),this.color=function(t){return t[s(0,t.length)]}(h),this.createdAt=(new Date).getTime(),this.direction=o}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,s=this.rotationAngle,o=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*o,i.y*o,e.x*o,e.y*o,s,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.dragForceCoefficient,o=this.finalConfettiSpeedX,a=this.radiusYUpdateDirection,r=this.rotationSpeed,h=this.createdAt,c=this.direction,d=i-h;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),n.x>o&&(this.confettiSpeed.x-=s*t),this.currentPosition.x+=n.x*("left"===c?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*d+.00125*Math.pow(d,2)/2,"down"===a?(this.radius.y-=t*r,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*r,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function h(t){var i=t.confettiRadius,e=void 0===i?8:i,n=t.confettiesNumber,s=void 0===n?200:n,a=t.confettiColors;return{confettiRadius:e,confettiesNumber:s,confettiColors:void 0===a?o:a}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,s,o,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),s=n(e.getPropertyValue("width")),o=n(e.getPropertyValue("height")),t.setAttribute("width",(s*i).toString()),t.setAttribute("height",(o*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,c=this.canvas.offsetHeight,d=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(h,r,d),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(c)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=h(t),e=i.confettiRadius,n=i.confettiesNumber,s=i.confettiColors,o=5*window.innerHeight/7,a={x:0,y:o},c={x:window.innerWidth,y:o},d=0;d<n/2;d++)this.shapes.push(new r({initialPosition:a,direction:"right",confettiRadius:e,confettiColors:s})),this.shapes.push(new r({initialPosition:c,direction:"left",confettiRadius:e,confettiColors:s}))}}]),i}()}();
+var JSConfetti=function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function o(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}function s(t){return t[o(0,t.length)]}var a=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function r(){return Math.log(window.innerWidth)/Math.log(1920)}var h=function(){function i(e){var n=e.initialPosition,a=e.direction,h=e.confettiRadius,c=e.confettiColors,d=e.emojies;t(this,i);var l=o(.9,1.7,3)*r();this.confettiSpeed={x:l,y:l},this.finalConfettiSpeedX=o(.2,.6,3),this.rotationSpeed=d.length?.01:o(.03,.07,3)*r(),this.dragForceCoefficient=o(5e-4,9e-4,6),this.radius={x:h,y:h},this.initialRadius=h,this.rotationAngle="left"===a?o(0,.2,3):o(-.2,0,3),this.emojiRotationAngle=o(0,2*Math.PI),this.radiusYUpdateDirection="down";var u="left"===a?o(82,15)*Math.PI/180:o(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(u)),this.absSin=Math.abs(Math.sin(u));var f=o(-150,0),p={x:n.x+("left"===a?-f:f)*this.absCos,y:n.y-f*this.absSin};this.currentPosition=Object.assign({},p),this.initialPosition=Object.assign({},p),this.color=d.length?null:s(c),this.emoji=d.length?s(d):null,this.createdAt=(new Date).getTime(),this.direction=a}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,o=this.emoji,s=this.rotationAngle,a=this.emojiRotationAngle,r=window.devicePixelRatio;n?(t.fillStyle=n,t.beginPath(),t.ellipse(i.x*r,i.y*r,e.x*r,e.y*r,s,0,2*Math.PI),t.fill()):o&&(t.font="".concat(e.x,"px serif"),t.save(),t.translate(r*i.x,r*i.y),t.rotate(a),t.textAlign="center",t.fillText(o,0,0),t.restore())}},{key:"updatePosition",value:function(t,i){var e=this.confettiSpeed,n=this.dragForceCoefficient,o=this.finalConfettiSpeedX,s=this.radiusYUpdateDirection,a=this.rotationSpeed,r=this.createdAt,h=this.direction,c=i-r;e.x>o&&(this.confettiSpeed.x-=n*t),this.currentPosition.x+=e.x*("left"===h?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-e.y*this.absSin*c+.00125*Math.pow(c,2)/2,this.rotationSpeed-=this.emoji?1e-4:1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),this.emoji?this.emojiRotationAngle+=this.rotationSpeed*t%(2*Math.PI):"down"===s?(this.radius.y-=t*a,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*a,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function c(t){var i=t.confettiRadius,e=void 0===i?t.emojies?80:6:i,n=t.confettiesNumber,o=void 0===n?t.emojies?80:250:n,s=t.confettiColors,r=void 0===s?a:s,h=t.emojies;return{confettiRadius:e,confettiesNumber:o,confettiColors:r,emojies:void 0===h?[]:h}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,o,s,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),o=n(e.getPropertyValue("width")),s=n(e.getPropertyValue("height")),t.setAttribute("width",(o*i).toString()),t.setAttribute("height",(s*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,c=this.canvas.offsetHeight;this.shapes.forEach((function(t){t.updatePosition(h,r),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(c)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=c(t),e=i.confettiRadius,n=i.confettiesNumber,o=i.confettiColors,s=i.emojies,a=5*window.innerHeight/7,r={x:0,y:a},d={x:window.innerWidth,y:a},l=0;l<n/2;l++)this.shapes.push(new h({initialPosition:r,direction:"right",confettiRadius:e,confettiColors:o,emojies:s})),this.shapes.push(new h({initialPosition:d,direction:"left",confettiRadius:e,confettiColors:o,emojies:s}))}}]),i}()}();

dist/js-confetti.min.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function s(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}var o=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function a(){return Math.log(window.innerWidth)/Math.log(1920)}var r=function(){function i(e){var n=e.initialPosition,o=e.direction,r=e.confettiRadius,h=e.confettiColors;t(this,i);var d=s(.9,1.7,3)*a();this.confettiSpeed={x:d,y:d},this.finalConfettiSpeedX=s(.2,.6,3),this.rotationSpeed=s(.03,.07,3)*a(),this.dragForceCoefficient=s(5e-4,9e-4,6),this.radius={x:r,y:r},this.initialRadius=r,this.rotationAngle="left"===o?s(0,.2,3):s(-.2,0,3),this.radiusYUpdateDirection="down";var c="left"===o?s(82,15)*Math.PI/180:s(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(c)),this.absSin=Math.abs(Math.sin(c));var f=s(-150,0),u={x:n.x+("left"===o?-f:f)*this.absCos,y:n.y-f*this.absSin};this.currentPosition=Object.assign({},u),this.initialPosition=Object.assign({},u),this.color=function(t){return t[s(0,t.length)]}(h),this.createdAt=(new Date).getTime(),this.direction=o}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,s=this.rotationAngle,o=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*o,i.y*o,e.x*o,e.y*o,s,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.dragForceCoefficient,o=this.finalConfettiSpeedX,a=this.radiusYUpdateDirection,r=this.rotationSpeed,h=this.createdAt,d=this.direction,c=i-h;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),n.x>o&&(this.confettiSpeed.x-=s*t),this.currentPosition.x+=n.x*("left"===d?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*c+.00125*Math.pow(c,2)/2,"down"===a?(this.radius.y-=t*r,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*r,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function h(t){var i=t.confettiRadius,e=void 0===i?8:i,n=t.confettiesNumber,s=void 0===n?200:n,a=t.confettiColors;return{confettiRadius:e,confettiesNumber:s,confettiColors:void 0===a?o:a}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,s,o,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),s=n(e.getPropertyValue("width")),o=n(e.getPropertyValue("height")),t.setAttribute("width",(s*i).toString()),t.setAttribute("height",(o*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,d=this.canvas.offsetHeight,c=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(h,r,c),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=h(t),e=i.confettiRadius,n=i.confettiesNumber,s=i.confettiColors,o=5*window.innerHeight/7,a={x:0,y:o},d={x:window.innerWidth,y:o},c=0;c<n/2;c++)this.shapes.push(new r({initialPosition:a,direction:"right",confettiRadius:e,confettiColors:s})),this.shapes.push(new r({initialPosition:d,direction:"left",confettiRadius:e,confettiColors:s}))}}]),i}()}));
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function o(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}function s(t){return t[o(0,t.length)]}var a=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function r(){return Math.log(window.innerWidth)/Math.log(1920)}var h=function(){function i(e){var n=e.initialPosition,a=e.direction,h=e.confettiRadius,d=e.confettiColors,l=e.emojies;t(this,i);var c=o(.9,1.7,3)*r();this.confettiSpeed={x:c,y:c},this.finalConfettiSpeedX=o(.2,.6,3),this.rotationSpeed=l.length?.01:o(.03,.07,3)*r(),this.dragForceCoefficient=o(5e-4,9e-4,6),this.radius={x:h,y:h},this.initialRadius=h,this.rotationAngle="left"===a?o(0,.2,3):o(-.2,0,3),this.emojiRotationAngle=o(0,2*Math.PI),this.radiusYUpdateDirection="down";var f="left"===a?o(82,15)*Math.PI/180:o(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(f)),this.absSin=Math.abs(Math.sin(f));var u=o(-150,0),p={x:n.x+("left"===a?-u:u)*this.absCos,y:n.y-u*this.absSin};this.currentPosition=Object.assign({},p),this.initialPosition=Object.assign({},p),this.color=l.length?null:s(d),this.emoji=l.length?s(l):null,this.createdAt=(new Date).getTime(),this.direction=a}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,o=this.emoji,s=this.rotationAngle,a=this.emojiRotationAngle,r=window.devicePixelRatio;n?(t.fillStyle=n,t.beginPath(),t.ellipse(i.x*r,i.y*r,e.x*r,e.y*r,s,0,2*Math.PI),t.fill()):o&&(t.font="".concat(e.x,"px serif"),t.save(),t.translate(r*i.x,r*i.y),t.rotate(a),t.textAlign="center",t.fillText(o,0,0),t.restore())}},{key:"updatePosition",value:function(t,i){var e=this.confettiSpeed,n=this.dragForceCoefficient,o=this.finalConfettiSpeedX,s=this.radiusYUpdateDirection,a=this.rotationSpeed,r=this.createdAt,h=this.direction,d=i-r;e.x>o&&(this.confettiSpeed.x-=n*t),this.currentPosition.x+=e.x*("left"===h?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-e.y*this.absSin*d+.00125*Math.pow(d,2)/2,this.rotationSpeed-=this.emoji?1e-4:1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),this.emoji?this.emojiRotationAngle+=this.rotationSpeed*t%(2*Math.PI):"down"===s?(this.radius.y-=t*a,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*a,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function d(t){var i=t.confettiRadius,e=void 0===i?t.emojies?80:6:i,n=t.confettiesNumber,o=void 0===n?t.emojies?80:250:n,s=t.confettiColors,r=void 0===s?a:s,h=t.emojies;return{confettiRadius:e,confettiesNumber:o,confettiColors:r,emojies:void 0===h?[]:h}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,o,s,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),o=n(e.getPropertyValue("width")),s=n(e.getPropertyValue("height")),t.setAttribute("width",(o*i).toString()),t.setAttribute("height",(s*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,d=this.canvas.offsetHeight;this.shapes.forEach((function(t){t.updatePosition(h,r),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=d(t),e=i.confettiRadius,n=i.confettiesNumber,o=i.confettiColors,s=i.emojies,a=5*window.innerHeight/7,r={x:0,y:a},l={x:window.innerWidth,y:a},c=0;c<n/2;c++)this.shapes.push(new h({initialPosition:r,direction:"right",confettiRadius:e,confettiColors:o,emojies:s})),this.shapes.push(new h({initialPosition:l,direction:"left",confettiRadius:e,confettiColors:o,emojies:s}))}}]),i}()}));

package.json

 {
   "name": "js-confetti",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "JS Confetti library with zero dependencies, works without any config, TS typings included, adapts to user screen",

README.md

 
+<img src="assets/app-demo.gif" width="600px" />
 
-<img src="assets/standard-confetti.gif" width="500px" />
 
-# 🎉 JavaScript Confetti library
-
 [![npm version](https://badge.fury.io/js/js-confetti.svg)](https://badge.fury.io/js/js-confetti)
@@ -12,9 +10,11 @@ ![NPM Downloads](https://img.shields.io/npm/dw/js-confetti)
 
+# 🎉 JavaScript Confetti library
 
-✅ Zero dependencies used<br/>
-✅ Works without any config, yet configurable<br/>
-✅ Has TypeScript typings<br/>
-✅ Confetti speed adapts to user screen width
+💥 Supports emojies as confetties<br/>
+⚡️ Zero dependencies used<br/>
+🦄 Works without any config, yet configurable<br/>
+🛠 Has TypeScript typings<br/>
+🧩 Confetti speed adapts to user screen width
 
-Links: [GitHub](https://github.com/loonywizard/js-confetti) | [NPM](https://www.npmjs.com/package/js-confetti) | [Library Website](https://loonywizard.github.io/js-confetti/) | [CodeSandbox Playground](https://codesandbox.io/s/confetti-vanilla-js-r5kqi)
+Links: [GitHub](https://github.com/loonywizard/js-confetti) | [NPM](https://www.npmjs.com/package/js-confetti) | [Demo](https://loonywizard.github.io/js-confetti/)
 
@@ -53,6 +53,14 @@
 
+Use emojies as confetties:
+
+```js
+jsConfetti.addConfetti({
+  { emojies: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] },
+})
+```
+
+<br/>
+
 Customize confetties colors:
 
-<img src="assets/custom-color.gif" width="500px" />
-
 ```js
@@ -67,6 +75,5 @@ jsConfetti.addConfetti({
 <br/>
+
 Customize confetties radius:
 
-<img src="assets/custom-radius.gif" width="500px" />
-
 ```js
@@ -79,6 +86,5 @@ jsConfetti.addConfetti({
 <br/>
+
 Customize confetties number:
 
-<img src="assets/custom-confetties-number.gif" width="500px" />
-
 ```js
@@ -91,3 +97,15 @@ jsConfetti.addConfetti({
 
+<br/>
+
+Combine different properties:
+
+```js
+jsConfetti.addConfetti({
+  emojies: ['🦄'],
+  confettiRadius: 100,
+  confettiesNumber: 30,
+})
+```
+
 ## License
 MIT

typings/index.d.ts

@@ -10,2 +10,3 @@ // Type definitions for js-confetti
   confettiColors?: string[],
+  emojies?: string[],
 }
@@ -12,0 +13,0 @@

No alert changes

Improved metrics

Total package byte prevSize

26632

increased by8.62%

Lines of code

317

increased by9.69%

Number of lines in readme file

107

increased by20.22%

No dependency changes