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);