diff --git a/README.md b/README.md
index a0434b4..7badd68 100644
--- a/README.md
+++ b/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.
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 shoot me 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 shoot me a link to it.
+For any problems or questions don't hesitate to open an issue.
+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.
\ No newline at end of file
+under the [MIT license](https://github.com/marcbruederlin/particles.js/blob/master/LICENSE).
\ No newline at end of file
diff --git a/dist/particles.js b/dist/particles.js
index 82662b8..416e419 100644
--- a/dist/particles.js
+++ b/dist/particles.js
@@ -3,10 +3,12 @@
* for particle backgrounds.
*
* @author Marc Brüderlin
- * @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);
diff --git a/dist/particles.min.js b/dist/particles.min.js
index 9cf8706..d15d6db 100644
--- a/dist/particles.min.js
+++ b/dist/particles.min.js
@@ -3,8 +3,8 @@
* for particle backgrounds.
*
* @author Marc Brüderlin
- * @version 1.0.0
+ * @version 1.0.2
* @license MIT
- * @see https://marcbruederlin.github.io/particles.js/
+ * @see https://github.com/marcbruederlin/particles.js
*/
var Particles=function(t,i){"use strict";function e(t,i){return Object.keys(i).forEach(function(e){t[e]=i[e]}),t}function r(t){var i=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return i?{r:parseInt(i[1],16),g:parseInt(i[2],16),b:parseInt(i[3],16)}:null}var s,a,n,o,h;return s=function(){this.storage=[],this.defaults={maxParticles:100,sizeVariations:3,speed:.5,color:"#000000",minDistance:120,connectParticles:!1},this.init=function(s){if(t.addEventListener("resize",this.resize.bind(this),!1),void 0===s||!s.selector)return console.warn("particles.js: No selector is specified! Check https://github.com/marcbruederlin/particles.js#options"),!1;h=e(this.defaults,s),h.color=r(h.color),n=i.querySelector(h.selector),o=n.getContext("2d"),n.width=t.innerWidth,n.height=t.innerHeight;for(var c=h.maxParticles;c--;)this.storage.push(new a);this.animate()},this.animate=function(){this.draw(),t.requestAnimFrame(this.animate.bind(this))},this.draw=function(){o.clearRect(0,0,n.width,n.height);for(var t=this.storage.length;t--;){var i=this.storage[t];i.draw()}this.update()},this.update=function(){for(var t=this.storage.length;t--;){var i=this.storage[t];if(i.x+=i.vx,i.y+=i.vy,i.x+i.radius>n.width?i.x=i.radius:i.x-i.radius<0&&(i.x=n.width-i.radius),i.y+i.radius>n.height?i.y=i.radius:i.y-i.radius<0&&(i.y=n.height-i.radius),h.connectParticles)for(var e=t+1;e
- * @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);