Change count logic to density logic

README.md

@@ -53,7 +53,7 @@ running this code in your javascript;
 <script>
   window.onload = function() {
     let myElement = document.getElementById("myDiv");
-    let mySparticles = new Sparticles(myElement, { count: 100 }, 400);
+    let mySparticles = new Sparticles(myElement, { density: 100 }, 400);
   }
 </script>
 ```
@@ -66,7 +66,7 @@ the third step with something like below;
 ```html
 <script>
   let $el = $("#myDiv");
-  let mySparticles = new Sparticles($el[0], { count: 100 }, 400);
+  let mySparticles = new Sparticles($el[0], { density: 100 }, 400);
 </script>
 ```
 
@@ -91,7 +91,7 @@ import Sparticles from "sparticles";
 3. Finally initialise with vanillaJS
 
 ```js
-new Sparticles(node, { count: 100 }, 400);
+new Sparticles(node, { density: 100 }, 400);
 ```
 
 4. If you're using SvelteJS specifically, then your single-file component
@@ -165,7 +165,7 @@ A brief look at all the options, with more details below.
 option                                     | type              | default         | description
 -------------------------------------------|-------------------|-----------------|-----------------------------------------------------
 **[composition](#composition)**            | `String`          | `source-over`   | canvas globalCompositeOperation value for particles
-**[count](#count)**                        | `Number`          | `50`            | number of particles on the canvas simultaneously
+**[density](#density)**                        | `Number`          | `50`            | density of particles on the canvas simultaneously (50 =~ 50 on a 1440 / 600 container)
 **[speed](#speed)**                        | `Number`          | `10`            | default velocity of every particle
 **[parallax](#parallax)**                  | `Number`          | `1`             | speed multiplier effect for larger particles (0 = none)
 **[direction](#direction)**                | `Number`          | `180`           | default direction of particles in degrees (0 = ↑, 180 = ↓)
@@ -203,12 +203,13 @@ other than the default value (`source-over`), and will ultimately degrade perfor
 
 Will accept [any of the values that are provided as part of the Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)
 
-## `count`
+## `density`
 - Type: `Number`
 - Default: `50`
 - Range: `1 - 10000`
 
-Simply the number of particles drawn to the screen.  
+Density of particles drawn to the screen. Automatically recalculates particles count.
+50 is equivalent to 50 on a 1440 x 660 container.
 Values over `500` may begin to degrade performance.
 
 ## `speed`
@@ -531,8 +532,8 @@ of particles based on their device;
 ```js
   let myElement = document.getElementById("myDiv");
   // PLEASE DON'T PUSH A TON OF ANIMATION ON MOBILES!
-  let count = (/Mobi|Android/i.test(navigator.userAgent)) ? 100 : 500;
-  let mySparticles = new Sparticles(myElement, { count: count }, 400);
+  let density = (/Mobi|Android/i.test(navigator.userAgent)) ? 100 : 500;
+  let mySparticles = new Sparticles(myElement, { density: density }, 400);
 ```
 
 # why "Sparticles" ?

dist/sparticles.esm.js

@@ -699,13 +699,14 @@ Sparticle.prototype.renderRotate = function () {
   }
 };
 
+var BASE_RESOLUTION = 1400 * 660;
 /**
  * Sparticles Constructor;
  * Create a <canvas>, append to the given node, and start the particle effect
  * @param {HTMLElement} [node=document.body] - element to which canvas is appended to
  * @param {Object} [options={}] - settings to use for the particle effect
  * @param {String} [options.composition=source-over] - canvas globalCompositeOperation value for particles
- * @param {Number} [options.count=50] - number of particles on the canvas simultaneously
+ * @param {Number} [options.density=50] - density of particles on the canvas simultaneously. 50 =~ 50 on a 1400 x 660 container
  * @param {Number} [options.speed=10] - default velocity of every particle
  * @param {Number} [options.parallax=1] - speed multiplier effect for larger particles (0 = none)
  * @param {Number} [options.direction=180] - default direction of particles in degrees (0 = ↑, 180 = ↓)
@@ -754,7 +755,7 @@ var Sparticles = function Sparticles(node, options, width, height) {
     randomColor: randomHsl,
     randomColorCount: 3,
     composition: "source-over",
-    count: 50,
+    density: 50,
     direction: 180,
     drift: 1,
     glow: 0,
@@ -890,6 +891,8 @@ var Sparticles = function Sparticles(node, options, width, height) {
 
     this.width = width || this.width;
     this.height = height || this.height;
+    this.resolution = this.width * this.height;
+    this.count = Math.ceil(this.resolution / BASE_RESOLUTION * this.settings.density);
     this.canvas.width = this.width;
     this.canvas.height = this.height;
     return this;
@@ -904,7 +907,7 @@ var Sparticles = function Sparticles(node, options, width, height) {
     this.sparticles = [];
     this.ctx.globalCompositeOperation = this.settings.composition;
 
-    for (var i = 0; i < this.settings.count; i++) {
+    for (var i = 0; i < this.count; i++) {
       this.sparticles.push(new Sparticle(this, i));
     }
 

dist/sparticles.js

@@ -702,13 +702,14 @@ var Sparticles = (function () {
     }
   };
 
+  var BASE_RESOLUTION = 1400 * 660;
   /**
    * Sparticles Constructor;
    * Create a <canvas>, append to the given node, and start the particle effect
    * @param {HTMLElement} [node=document.body] - element to which canvas is appended to
    * @param {Object} [options={}] - settings to use for the particle effect
    * @param {String} [options.composition=source-over] - canvas globalCompositeOperation value for particles
-   * @param {Number} [options.count=50] - number of particles on the canvas simultaneously
+   * @param {Number} [options.density=50] - density of particles on the canvas simultaneously. 50 =~ 50 on a 1400 x 660 container
    * @param {Number} [options.speed=10] - default velocity of every particle
    * @param {Number} [options.parallax=1] - speed multiplier effect for larger particles (0 = none)
    * @param {Number} [options.direction=180] - default direction of particles in degrees (0 = ↑, 180 = ↓)
@@ -757,7 +758,7 @@ var Sparticles = (function () {
       randomColor: randomHsl,
       randomColorCount: 3,
       composition: "source-over",
-      count: 50,
+      density: 50,
       direction: 180,
       drift: 1,
       glow: 0,
@@ -893,6 +894,8 @@ var Sparticles = (function () {
 
       this.width = width || this.width;
       this.height = height || this.height;
+      this.resolution = this.width * this.height;
+      this.count = Math.ceil(this.resolution / BASE_RESOLUTION * this.settings.density);
       this.canvas.width = this.width;
       this.canvas.height = this.height;
       return this;
@@ -907,7 +910,7 @@ var Sparticles = (function () {
       this.sparticles = [];
       this.ctx.globalCompositeOperation = this.settings.composition;
 
-      for (var i = 0; i < this.settings.count; i++) {
+      for (var i = 0; i < this.count; i++) {
         this.sparticles.push(new Sparticle(this, i));
       }