js-confetti - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

dist/es/index.js

@@ -48,3 +48,4 @@ function _classCallCheck(instance, Constructor) {
 var FREE_FALLING_OBJECT_ACCELERATION = 0.00125;
-var DRAG_FORCE_COEFFICIENT = 0.0008;
+var MIN_DRAG_FORCE_COEFFICIENT = 0.0005;
+var MAX_DRAG_FORCE_COEFFICIENT = 0.0009;
 var ROTATION_SLOWDOWN_ACCELERATION = 0.00001;
@@ -54,2 +55,4 @@ var INITIAL_SHAPE_RADIUS = 8;
 var MAX_INITIAL_CONFETTI_SPEED = 1.7;
+var MIN_FINAL_X_CONFETTI_SPEED = 0.2;
+var MAX_FINAL_X_CONFETTI_SPEED = 0.6;
 var MIN_INITIAL_ROTATION_SPEED = 0.03;
@@ -62,3 +65,3 @@ var MAX_INITIAL_ROTATION_SPEED = 0.10;
 var DEFAULT_CONFETTIES_NUMBER = 200;
-var DEFAULT_CONFETTI_COLORS = ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc9003'];
+var DEFAULT_CONFETTI_COLORS = ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc03c2'];
 
@@ -85,3 +88,5 @@ function getWindowWidthCoefficient() {
     };
+    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);
+    this.dragForceCoefficient = generateRandomNumber(MIN_DRAG_FORCE_COEFFICIENT, MAX_DRAG_FORCE_COEFFICIENT, 6);
     this.radius = {
@@ -92,2 +97,3 @@ x: confettiRadius,
     this.initialRadius = confettiRadius;
+    this.rotationAngle = direction === 'left' ? generateRandomNumber(0, 0.2, 3) : generateRandomNumber(-0.2, 0, 3);
     this.radiusYUpdateDirection = 'down';
@@ -114,7 +120,8 @@ var angle = direction === 'left' ? generateRandomNumber(MAX_CONFETTI_ANGLE, MIN_CONFETTI_ANGLE) * Math.PI / 180 : generateRandomNumber(-MIN_CONFETTI_ANGLE, -MAX_CONFETTI_ANGLE) * Math.PI / 180;
           radius = this.radius,
-          color = this.color;
+          color = this.color,
+          rotationAngle = this.rotationAngle;
       var dpr = window.devicePixelRatio;
       canvasContext.fillStyle = color;
       canvasContext.beginPath();
-      canvasContext.ellipse(currentPosition.x * dpr, currentPosition.y * dpr, radius.x * dpr, radius.y * dpr, 0, 0, 2 * Math.PI);
+      canvasContext.ellipse(currentPosition.x * dpr, currentPosition.y * dpr, radius.x * dpr, radius.y * dpr, rotationAngle, 0, 2 * Math.PI);
       canvasContext.fill();
@@ -126,2 +133,4 @@ }
       var confettiSpeed = this.confettiSpeed,
+          dragForceCoefficient = this.dragForceCoefficient,
+          finalConfettiSpeedX = this.finalConfettiSpeedX,
           radiusYUpdateDirection = this.radiusYUpdateDirection,
@@ -136,3 +145,3 @@ rotationSpeed = this.rotationSpeed,
       var needUpdateSpeed = direction === 'left' ? this.currentPosition.x >= 0 : this.currentPosition.x <= canvasWidth;
-      if (needUpdateSpeed && confettiSpeed.x > 0.0001) this.confettiSpeed.x -= DRAG_FORCE_COEFFICIENT * iterationTimeDelta;
+      if (needUpdateSpeed && confettiSpeed.x > finalConfettiSpeedX) this.confettiSpeed.x -= dragForceCoefficient * iterationTimeDelta;
       this.currentPosition.x += confettiSpeed.x * (direction === 'left' ? -this.absCos : this.absCos) * iterationTimeDelta;
@@ -139,0 +148,0 @@ this.currentPosition.y = this.initialPosition.y - confettiSpeed.y * this.absSin * timeDeltaSinceCreation + (needUpdateSpeed ? FREE_FALLING_OBJECT_ACCELERATION * Math.pow(timeDeltaSinceCreation, 2) / 2 : 0);

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","#fc9003"];var a=function(){function i(e){var n=e.initialPosition,o=e.direction,a=e.confettiRadius,r=e.confettiColors;t(this,i);var h=s(.9,1.7,3)*(Math.log(window.innerWidth)/Math.log(1920));this.confettiSpeed={x:h,y:h},this.rotationSpeed=s(.03,.1,3),this.radius={x:a,y:a},this.initialRadius=a,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 d=s(-150,0),u={x:n.x+("left"===o?-d:d)*this.absCos,y:n.y-d*this.absSin};this.currentPosition=Object.assign({},u),this.initialPosition=Object.assign({},u),this.color=function(t){return t[s(0,t.length)]}(r),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=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*s,i.y*s,e.x*s,e.y*s,0,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.radiusYUpdateDirection,o=this.rotationSpeed,a=this.createdAt,r=this.direction,h=i-a;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0);var c="left"===r?this.currentPosition.x>=0:this.currentPosition.x<=e;c&&n.x>1e-4&&(this.confettiSpeed.x-=8e-4*t),this.currentPosition.x+=n.x*("left"===r?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*h+(c?.00125*Math.pow(h,2)/2:0),"down"===s?(this.radius.y-=t*o,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*o,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 r(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,n=this;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(),setTimeout((function(){return n.loop.call(n,0)}),0)}return e(i,[{key:"loop",value:function(t){var i,e,s,o,a,r=this;i=this.canvas,e=window.devicePixelRatio,s=getComputedStyle(i),o=n(s.getPropertyValue("width")),a=n(s.getPropertyValue("height")),i.setAttribute("width",(o*e).toString()),i.setAttribute("height",(a*e).toString());var h=(new Date).getTime(),c=h-this.lastUpdated,d=this.canvas.offsetHeight,u=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(c,h,u),t.draw(r.canvasContext)})),t%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=h,setTimeout((function(){return r.loop.call(r,++t)}),0)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=r(t),e=i.confettiRadius,n=i.confettiesNumber,s=i.confettiColors,o=5*window.innerHeight/7,h={x:0,y:o},c={x:window.innerWidth,y:o},d=0;d<n/2;d++)this.shapes.push(new a({initialPosition:h,direction:"right",confettiRadius:e,confettiColors:s})),this.shapes.push(new a({initialPosition:c,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)}var s=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];var a=function(){function i(e){var n=e.initialPosition,s=e.direction,a=e.confettiRadius,r=e.confettiColors;t(this,i);var h=o(.9,1.7,3)*(Math.log(window.innerWidth)/Math.log(1920));this.confettiSpeed={x:h,y:h},this.finalConfettiSpeedX=o(.2,.6,3),this.rotationSpeed=o(.03,.1,3),this.dragForceCoefficient=o(5e-4,9e-4,6),this.radius={x:a,y:a},this.initialRadius=a,this.rotationAngle="left"===s?o(0,.2,3):o(-.2,0,3),this.radiusYUpdateDirection="down";var c="left"===s?o(82,15)*Math.PI/180:o(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(c)),this.absSin=Math.abs(Math.sin(c));var d=o(-150,0),f={x:n.x+("left"===s?-d:d)*this.absCos,y:n.y-d*this.absSin};this.currentPosition=Object.assign({},f),this.initialPosition=Object.assign({},f),this.color=function(t){return t[o(0,t.length)]}(r),this.createdAt=(new Date).getTime(),this.direction=s}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,o=this.rotationAngle,s=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*s,i.y*s,e.x*s,e.y*s,o,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,o=this.dragForceCoefficient,s=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);var f="left"===c?this.currentPosition.x>=0:this.currentPosition.x<=e;f&&n.x>s&&(this.confettiSpeed.x-=o*t),this.currentPosition.x+=n.x*("left"===c?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*d+(f?.00125*Math.pow(d,2)/2:0),"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 r(t){var i=t.confettiRadius,e=void 0===i?8:i,n=t.confettiesNumber,o=void 0===n?200:n,a=t.confettiColors;return{confettiRadius:e,confettiesNumber:o,confettiColors:void 0===a?s:a}}return function(){function i(){var e,n=this;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(),setTimeout((function(){return n.loop.call(n,0)}),0)}return e(i,[{key:"loop",value:function(t){var i,e,o,s,a,r=this;i=this.canvas,e=window.devicePixelRatio,o=getComputedStyle(i),s=n(o.getPropertyValue("width")),a=n(o.getPropertyValue("height")),i.setAttribute("width",(s*e).toString()),i.setAttribute("height",(a*e).toString());var h=(new Date).getTime(),c=h-this.lastUpdated,d=this.canvas.offsetHeight,f=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(c,h,f),t.draw(r.canvasContext)})),t%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=h,setTimeout((function(){return r.loop.call(r,++t)}),0)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=r(t),e=i.confettiRadius,n=i.confettiesNumber,o=i.confettiColors,s=5*window.innerHeight/7,h={x:0,y:s},c={x:window.innerWidth,y:s},d=0;d<n/2;d++)this.shapes.push(new a({initialPosition:h,direction:"right",confettiRadius:e,confettiColors:o})),this.shapes.push(new a({initialPosition:c,direction:"left",confettiRadius:e,confettiColors:o}))}}]),i}()}));

package.json

 {
   "name": "js-confetti",
-  "version": "0.3.3",
+  "version": "0.4.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

@@ -51,4 +51,4 @@ # 🎉 JavaScript Confetti library
   confettiesNumber: 200,
-  confettiColors: ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc9003']
+  confettiColors: ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc03c2']
 })
 ```

No alert changes

Improved metrics

Total package byte prevSize

19918

increased by4.44%

Lines of code

275

increased by3.77%

No dependency changes