diff --git a/README.md b/README.md index fa1d8df..e643ac9 100644 --- a/README.md +++ b/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. - diff --git a/demo.html b/demo.html index c44ca9c..435975f 100644 --- a/demo.html +++ b/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', diff --git a/mangleExceptions.json b/mangleExceptions.json index 91c43f4..004a98e 100644 --- a/mangleExceptions.json +++ b/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"] } diff --git a/particle-network.js b/particle-network.js index 0448f8d..219f1a2 100644 --- a/particle-network.js +++ b/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(); diff --git a/particle-network.min.js b/particle-network.min.js index db4acc1..eed6a0f 100644 --- a/particle-network.min.js +++ b/particle-network.min.js @@ -1 +1 @@ -!function(a){var b="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(c){b.ParticleNetwork=a(b,c)}):"object"==typeof module&&module.exports?module.exports=a(b,{}):b.ParticleNetwork=a(b,{})}(function(a,b){var c=function(a){this.canvas=a.canvas,this.g=a.g,this.particleColor=a.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*a.options.velocity,y:(Math.random()-.5)*a.options.velocity}};return c.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},c.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.7,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},b=function(a,b){this.i=a,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},b=void 0!==b?b:{},this.options={particleColor:void 0!==b.particleColor?b.particleColor:"#fff",background:void 0!==b.background?b.background:"#1a252f",interactive:void 0!==b.interactive?b.interactive:!0,velocity:this.setVelocity(b.speed),density:this.j(b.density)},this.init()},b.prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative"}),window.addEventListener("resize",function(){return this.i.offsetWidth===this.i.size.width&&this.i.offsetHeight===this.i.size.height?!1:(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var a=0;aa;b--){var c=Math.sqrt(Math.pow(this.o[a].x-this.o[b].x,2)+Math.pow(this.o[a].y-this.o[b].y,2));c>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-c)/120,this.g.lineWidth=.7,this.g.moveTo(this.o[a].x,this.o[a].y),this.g.lineTo(this.o[b].x,this.o[b].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},b.prototype.setVelocity=function(a){return"fast"===a?1:"slow"===a?.33:"none"===a?0:.66},b.prototype.j=function(a){return"high"===a?5e3:"low"===a?2e4:isNaN(parseInt(a,10))?1e4:a},b.prototype.l=function(a,b){for(var c in b)a.style[c]=b[c]},b}); \ No newline at end of file +!function(a){var b="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(c){b.ParticleNetwork=a(b,c)}):"object"==typeof module&&module.exports?module.exports=a(b,{}):b.ParticleNetwork=a(b,{})}(function(a,b){var c=function(a){this.canvas=a.canvas,this.g=a.g,this.particleColor=a.options.particleColor,this.particleRadius=a.options.particleRadius,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*a.options.velocity,y:(Math.random()-.5)*a.options.velocity}};return c.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},c.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.7,this.g.arc(this.x,this.y,this.particleRadius,0,2*Math.PI),this.g.fill()},b=function(a,b){this.i=a,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},b=void 0!==b?b:{},this.options={particleColor:void 0!==b.particleColor?b.particleColor:"#fff",background:void 0!==b.background?b.background:"#1a252f",interactive:void 0!==b.interactive?b.interactive:!0,velocity:this.setVelocity(b.speed),density:this.j(b.density),particleRadius:void 0!==b.particleRadius?b.particleRadius:1.5,lineWidth:void 0!==b.lineWidth?b.lineWidth:.7},this.init()},b.prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative"}),window.addEventListener("resize",function(){return this.i.offsetWidth===this.i.size.width&&this.i.offsetHeight===this.i.size.height?!1:(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var a=0;aa;b--){var c=Math.sqrt(Math.pow(this.o[a].x-this.o[b].x,2)+Math.pow(this.o[a].y-this.o[b].y,2));c>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-c)/120,this.g.lineWidth=this.options.lineWidth,this.g.moveTo(this.o[a].x,this.o[a].y),this.g.lineTo(this.o[b].x,this.o[b].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},b.prototype.setVelocity=function(a){return"fast"===a?1:"slow"===a?.33:"none"===a?0:.66},b.prototype.j=function(a){return"high"===a?5e3:"low"===a?2e4:isNaN(parseInt(a,10))?1e4:a},b.prototype.l=function(a,b){for(var c in b)a.style[c]=b[c]},b}); \ No newline at end of file