Merge branch 'release-1.0.2'

README.md

@@ -10,7 +10,7 @@ particles.js is a lightweight (~2kb) and dependency-free javascript plugin for p
 There are several ways to install particles.js:
 - [Download the latest version](https://github.com/marcbruederlin/particles.js/archive/master.zip)
 - Install with npm: `npm install particlesjs --save`
-- Use the CDN: `https://unpkg.com/particlesjs@1.0.1/dist/particles.min.js`
+- Use the CDN: `https://npmcdn.com/particlesjs@1.0.2/dist/particles.min.js`
 
 ## Usage
 Include the minified JS in your HTML file.
@@ -44,6 +44,14 @@ Initialize the plugin on the `window.onload` event.
 window.onload = function() {
   Particles.init({ options });
 };
+
+// e.g.
+window.onload = function() {
+  Particles.init({
+    selector: '#myCanvas',
+    color: '#0f9976'
+  });
+};
 ```
 
 ## Options
@@ -59,20 +67,20 @@ Option | Default | Description
 
 
 ## Browser Support
-IE10+ and all modern browsers.
+IE9+ and all modern browsers.
 
 ## Build
 To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:
 - Clone the repository: `https://github.com/marcbruederlin/particles.js.git`
 - Change in the project directory: `cd particles.js`
 - Install the dependencies: `npm install`
-- Run the gulp build task `gulp build` to regenerate the `dist` folder. You can also run `gulp build --watch` to watch for file changes and automatically rebuild the files.
+- Run the gulp build task `gulp build` to regenerate the `dist` folder. <br/> You can also run `gulp build --watch` to watch for file changes and automatically rebuild the files.
 
 ## Using particles.js?
-If you’re using particles.js in some interesting way or on a cool site, I’d be very grateful if you <a href="mailto:hello@marcbruederlin.com?subject=Hey, I'm using particles.js">shoot me</a> a link to it.
-If you want, you can [buy me a coffee](https://www.paypal.me/marcbruederlin) to keep this project running.
+If you’re using particles.js in some interesting way or on a cool site, I’d be very grateful if you <a href="mailto:hello@marcbruederlin.com?subject=Hey, I'm using particles.js">shoot me</a> a link to it.<br />
+For any problems or questions don't hesitate to open an issue.<br />
+Do you like particles.js? If you want, you can [buy me a coffee](https://www.paypal.me/marcbruederlin).
 
 ## License
 particles.js is created by [Marc Brüderlin](https://marcbruederlin.com) and released 
-under the [MIT license](https://github.com/marcbruederlin/particles.js/blob/master/LICENSE).
-For any problem or question do not hesitate to open an issue.
+under the [MIT license](https://github.com/marcbruederlin/particles.js/blob/master/LICENSE).

dist/particles.js

@@ -3,10 +3,12 @@
  * for particle backgrounds.
  * 
  * @author Marc Brüderlin <hello@marcbruederlin.com>
- * @version 1.0.0
+ * @version 1.0.2
  * @license MIT
- * @see https://marcbruederlin.github.io/particles.js/
+ * @see https://github.com/marcbruederlin/particles.js
  */
+
+/* exported Particles */
 var Particles = (function(window, document) {
   'use strict';
 
@@ -38,7 +40,7 @@ var Particles = (function(window, document) {
       window.addEventListener('resize', this.resize.bind(this), false);
 
       // Check if options and a selector are specified
-      if(options === undefined || !options.selector) {
+      if (options === undefined || !options.selector) {
         console.warn('particles.js: No selector is specified! Check https://github.com/marcbruederlin/particles.js#options');
         return false;
       }
@@ -56,7 +58,7 @@ var Particles = (function(window, document) {
       canvas.height = window.innerHeight;
 
       // Fill the storage with the given amount of particle instances
-      for(var i = config.maxParticles; i--;) {
+      for (var i = config.maxParticles; i--;) {
         this.storage.push(new Particle());
       }
 
@@ -78,7 +80,7 @@ var Particles = (function(window, document) {
     this.draw = function() {
       context.clearRect(0, 0, canvas.width, canvas.height);
 
-      for(var i = this.storage.length; i--;) {
+      for (var i = this.storage.length; i--;) {
         var particle = this.storage[i];
         particle.draw();
       }
@@ -90,26 +92,26 @@ var Particles = (function(window, document) {
      * Calculates the position and movement for each particle.
      */
     this.update = function() {
-      for(var i = this.storage.length; i--;) {
+      for (var i = this.storage.length; i--;) {
         var particle = this.storage[i];
 
         particle.x += particle.vx;
         particle.y += particle.vy;
 
-        if(particle.x + particle.radius > canvas.width) {
+        if (particle.x + particle.radius > canvas.width) {
           particle.x = particle.radius;
-        } else if(particle.x - particle.radius < 0) {
+        } else if (particle.x - particle.radius < 0) {
           particle.x = canvas.width - particle.radius;
         }
 
-        if(particle.y + particle.radius > canvas.height) {
+        if (particle.y + particle.radius > canvas.height) {
           particle.y = particle.radius;
-        } else if(particle.y - particle.radius < 0) {
+        } else if (particle.y - particle.radius < 0) {
           particle.y = canvas.height - particle.radius;
         }
 
-        if(config.connectParticles) {
-          for(var j = i + 1; j < this.storage.length; j++) {
+        if (config.connectParticles) {
+          for (var j = i + 1; j < this.storage.length; j++) {
             var particle2 = this.storage[j];
 
             this.distance(particle, particle2);
@@ -128,7 +130,7 @@ var Particles = (function(window, document) {
       n = Math.sqrt(r * r + dy * dy);
 
       // Draw a connective line between this two points if the distance is lesser or equal the minimum distance
-      if(n <= config.minDistance) {
+      if (n <= config.minDistance) {
         context.beginPath();
         context.strokeStyle = 'rgba(' + config.color.r + ', ' + config.color.g + ', ' + config.color.b + ', ' + (1.2 - n / config.minDistance) + ')';
         context.moveTo(p1.x, p1.y);

package.json

@@ -1,8 +1,8 @@
 {
   "name": "particlesjs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A lightweight and dependency-free javascript plugin for particle backgrounds.",
-  "main": "dist/particles.js",
+  "main": "dist/particles.min.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/marcbruederlin/particles.js"
@@ -25,9 +25,9 @@
     "gulp-jshint": "^2.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^2.0.0",
-    "gulp-watch": "^4.3.8",
-    "jshint": "^2.9.2",
-    "jshint-stylish": "^2.2.0",
-    "yargs": "^4.8.1"
+    "gulp-watch": "^4.3.10",
+    "jshint": "^2.9.3",
+    "jshint-stylish": "^2.2.1",
+    "yargs": "^6.0.0"
   }
 }

src/particles.js

@@ -3,10 +3,12 @@
  * for particle backgrounds.
  * 
  * @author Marc Brüderlin <hello@marcbruederlin.com>
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
- * @see https://marcbruederlin.github.io/particles.js/
+ * @see https://github.com/marcbruederlin/particles.js
  */
+
+/* exported Particles */
 var Particles = (function(window, document) {
   'use strict';
 
@@ -38,7 +40,7 @@ var Particles = (function(window, document) {
       window.addEventListener('resize', this.resize.bind(this), false);
 
       // Check if options and a selector are specified
-      if(options === undefined || !options.selector) {
+      if (options === undefined || !options.selector) {
         console.warn('particles.js: No selector is specified! Check https://github.com/marcbruederlin/particles.js#options');
         return false;
       }
@@ -56,7 +58,7 @@ var Particles = (function(window, document) {
       canvas.height = window.innerHeight;
 
       // Fill the storage with the given amount of particle instances
-      for(var i = config.maxParticles; i--;) {
+      for (var i = config.maxParticles; i--;) {
         this.storage.push(new Particle());
       }
 
@@ -78,7 +80,7 @@ var Particles = (function(window, document) {
     this.draw = function() {
       context.clearRect(0, 0, canvas.width, canvas.height);
 
-      for(var i = this.storage.length; i--;) {
+      for (var i = this.storage.length; i--;) {
         var particle = this.storage[i];
         particle.draw();
       }
@@ -90,26 +92,26 @@ var Particles = (function(window, document) {
      * Calculates the position and movement for each particle.
      */
     this.update = function() {
-      for(var i = this.storage.length; i--;) {
+      for (var i = this.storage.length; i--;) {
         var particle = this.storage[i];
 
         particle.x += particle.vx;
         particle.y += particle.vy;
 
-        if(particle.x + particle.radius > canvas.width) {
+        if (particle.x + particle.radius > canvas.width) {
           particle.x = particle.radius;
-        } else if(particle.x - particle.radius < 0) {
+        } else if (particle.x - particle.radius < 0) {
           particle.x = canvas.width - particle.radius;
         }
 
-        if(particle.y + particle.radius > canvas.height) {
+        if (particle.y + particle.radius > canvas.height) {
           particle.y = particle.radius;
-        } else if(particle.y - particle.radius < 0) {
+        } else if (particle.y - particle.radius < 0) {
           particle.y = canvas.height - particle.radius;
         }
 
-        if(config.connectParticles) {
-          for(var j = i + 1; j < this.storage.length; j++) {
+        if (config.connectParticles) {
+          for (var j = i + 1; j < this.storage.length; j++) {
             var particle2 = this.storage[j];
 
             this.distance(particle, particle2);
@@ -128,7 +130,7 @@ var Particles = (function(window, document) {
       n = Math.sqrt(r * r + dy * dy);
 
       // Draw a connective line between this two points if the distance is lesser or equal the minimum distance
-      if(n <= config.minDistance) {
+      if (n <= config.minDistance) {
         context.beginPath();
         context.strokeStyle = 'rgba(' + config.color.r + ', ' + config.color.g + ', ' + config.color.b + ', ' + (1.2 - n / config.minDistance) + ')';
         context.moveTo(p1.x, p1.y);