Add particleRadius & lineWidth options.

README.md

@@ -35,6 +35,8 @@ Additionally, a number of options are supported (see below). Simply append any o
 ```js
 var options = {
 	particleColor: '#fff',
+	particleRadius: 1.5,
+	lineWidth: 0.7,
 	background: '#1a252f',
 	interactive: true,
 	speed: 'fast',
@@ -52,6 +54,20 @@ Default: `#ffffff`
 
 Color of the particles. Must be a valid hexadecimal code.
 
+#### options.particleRadius
+
+Type: `Number`  
+Default: `1.5`
+
+Radius of the particles.
+
+#### options.lineWidth
+
+Type: `Number`  
+Default: `0.7`
+
+Width of the lines joining particles.
+
 #### options.background
 
 Type: `String`  
@@ -103,6 +119,7 @@ A heartfelt thanks to the following people for making this project possible:
 * Julian Laval ([@JulianLaval](https://github.com/JulianLaval)) - lead
 * Alex Schwartzberg ([@aeksco](https://github.com/aeksco)) - committer
 * Filip Wieland ([@FLamparski](https://github.com/FLamparski)) - committer
+* Liam Fiddler ([@liamfiddler](https://github.com/liamfiddler)) - committer
 
 If you would like to contribute, please submit a pull request that passes the `grunt eslint` task.
 
@@ -150,4 +167,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

demo.html

@@ -18,6 +18,8 @@
 			var canvasDiv = document.getElementById('particle-canvas');
 			var options = {
 				particleColor: '#888',
+				particleRadius: 3,
+				lineWidth: 1,
 				background: 'img/demo-bg.jpg',
 				interactive: true,
 				speed: 'medium',

mangleExceptions.json

@@ -1,3 +1,3 @@
 {
-  "props": ["ParticleNetwork", "exports", "options", "particleColor", "background", "interactive", "speed", "velocity", "density"]
+  "props": ["ParticleNetwork", "exports", "options", "particleColor", "particleRadius", "lineWidth", "background", "interactive", "speed", "velocity", "density"]
 }

particle-network.js

@@ -30,6 +30,7 @@
     this.canvas = parent.canvas;
     this.ctx = parent.ctx;
     this.particleColor = parent.options.particleColor;
+    this.particleRadius = parent.options.particleRadius;
 
     this.x = Math.random() * this.canvas.width;
     this.y = Math.random() * this.canvas.height;
@@ -53,12 +54,11 @@
     this.y += this.velocity.y;
   };
   Particle.prototype.draw = function () {
-
     // Draw particle
     this.ctx.beginPath();
     this.ctx.fillStyle = this.particleColor;
     this.ctx.globalAlpha = 0.7;
-    this.ctx.arc(this.x, this.y, 1.5, 0, 2 * Math.PI);
+    this.ctx.arc(this.x, this.y, this.particleRadius, 0, 2 * Math.PI);
     this.ctx.fill();
   };
 
@@ -78,7 +78,9 @@
       background: (options.background !== undefined) ? options.background : '#1a252f',
       interactive: (options.interactive !== undefined) ? options.interactive : true,
       velocity: this.setVelocity(options.speed),
-      density: this.setDensity(options.density)
+      density: this.setDensity(options.density),
+      particleRadius: (options.particleRadius !== undefined) ? options.particleRadius : 1.5,
+      lineWidth: (options.lineWidth !== undefined) ? options.lineWidth : 0.7
     };
 
     this.init();
@@ -227,7 +229,7 @@
         this.ctx.beginPath();
         this.ctx.strokeStyle = this.options.particleColor;
         this.ctx.globalAlpha = (120 - distance) / 120;
-        this.ctx.lineWidth = 0.7;
+        this.ctx.lineWidth = this.options.lineWidth;
         this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
         this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
         this.ctx.stroke();