From e8d9b388ad4c73692fca0c4d646f9a4e30fc251d Mon Sep 17 00:00:00 2001 From: James Paterson Date: Sun, 14 Aug 2016 22:37:02 +0100 Subject: [PATCH 1/8] Add random colours Adds a feature where you can enable the `randomStrokeColor: true` option in the options array. This will assign each particle a random stroke colour that it will draw connections with. Demo [here](http://thejamespaterson.com/scripts/particlegroundrandom/) --- jquery.particleground.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/jquery.particleground.js b/jquery.particleground.js index 3146625..77e483f 100644 --- a/jquery.particleground.js +++ b/jquery.particleground.js @@ -95,6 +95,15 @@ hook('onInit'); } + /** + Get a random color from #000 - #EEE (0-15) + **/ + function getRandColor(min,max) { + var t = ['#000','#111','#222','#333','#444','#555','#666','#777','#888','#999','#AAA','#BBB','#CCC','#DDD','#EEE']; + var c = Math.floor((Math.random() * max) + min); + return t[c]; + } + /** * Style the canvas */ @@ -186,6 +195,11 @@ * Particle */ function Particle() { + if (options.randomStrokeColor) { + this.strokeColor = getRandColor(options.strokeColorMin,options.strokeColorMax); + } else { + this.strokeColor = options.strokeColor; + } this.stackPos; this.active = true; this.layer = Math.ceil(Math.random() * 3); @@ -255,6 +269,7 @@ } } } + ctx.strokeStyle = this.strokeColor; ctx.stroke(); ctx.closePath(); } @@ -388,6 +403,9 @@ proximity: 100, // How close two dots need to be before they join parallax: true, parallaxMultiplier: 5, // The lower the number, the more extreme the parallax effect + randomStrokeColor: false, // True to enable random greyscale colors for strokes + strokeColorMin: 0, + strokeColorMax: 15, onInit: function() {}, onDestroy: function() {} }; From 0d58fa2801970f79eae454879309baf12ecc5c49 Mon Sep 17 00:00:00 2001 From: James Paterson Date: Sun, 14 Aug 2016 22:42:18 +0100 Subject: [PATCH 2/8] Update readme.md to include random stroke colour Adds the docs for the random stroke color feature. --- README.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ac0448b..e99a11e 100644 --- a/README.md +++ b/README.md @@ -103,8 +103,25 @@ How close two dots need to be, in pixels, before they join. 5 -The lower the number, the more extreme the parallax effect wil be. +The lower the number, the more extreme the parallax effect will be. +### randomStrokeColor + + false + +Overwrites `strokeColor` - Randomises the stroke colours of the particles, picking a random greyscale color between `strokeColorMin` and `strokeColorMax`, where `0 = #000` and `15 = #EEE`. + +## strokeColorMin + + 0 + +Defines the minimum color selectable by the random color picker. Range 0-15. + +## strokeColorMax + + 15 + +Defines the maximum color selectable by the random color picker. Range 0-15. ### onInit function() {} From a76ecce2ea1b19a2f6311f462d6d3e25eb571fd1 Mon Sep 17 00:00:00 2001 From: James Paterson Date: Sun, 14 Aug 2016 22:44:18 +0100 Subject: [PATCH 3/8] Update jquery.particleground.min.js Change to include new code --- jquery.particleground.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.particleground.min.js b/jquery.particleground.min.js index dca1f0b..4806767 100644 --- a/jquery.particleground.min.js +++ b/jquery.particleground.min.js @@ -13,4 +13,4 @@ * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating * @license: MIT license */ -function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;co;o++){var s=new x;s.setStackPos(o),O.push(s)}t.addEventListener("resize",function(){d()},!1),e.addEventListener("mousemove",function(t){C=t.pageX,F=t.pageY},!1),A&&!b&&t.addEventListener("deviceorientation",function(){E=Math.min(Math.max(-event.beta,-30),30),P=Math.min(Math.max(-event.gamma,-30),30)},!0),p(),y("onInit")}}function h(t,e){var i=["#000","#111","#222","#333","#444","#555","#666","#777","#888","#999","#AAA","#BBB","#CCC","#DDD","#EEE"],a=Math.floor(Math.random()*e+t);return i[a]}function l(){g.width=a.offsetWidth,g.height=a.offsetHeight,v.fillStyle=n.dotColor,v.strokeStyle=n.lineColor,v.lineWidth=n.lineWidth}function p(){if(Y){M=t.innerWidth,k=t.innerHeight,v.clearRect(0,0,g.width,g.height);for(var e=0;e=0;i--)(O[i].position.x>t||O[i].position.y>e)&&O.splice(i,1);var o=Math.round(g.width*g.height/n.density);if(o>O.length)for(;o>O.length;){var s=new x;O.push(s)}else o=0;i--)O[i].setStackPos(i)}function f(){T=!0}function c(){T=!1,p()}function x(){switch(n.randomStrokeColor?this.strokeColor=h(n.strokeColorMin,n.strokeColorMax):this.strokeColor=n.strokeColor,this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*g.width),y:Math.ceil(Math.random()*g.height)},this.speed={},n.directionX){case"left":this.speed.x=+(-n.maxSpeedX+Math.random()*n.maxSpeedX-n.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*n.maxSpeedX+n.minSpeedX).toFixed(2);break;default:this.speed.x=+(-n.maxSpeedX/2+Math.random()*n.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?n.minSpeedX:-n.minSpeedX}switch(n.directionY){case"up":this.speed.y=+(-n.maxSpeedY+Math.random()*n.maxSpeedY-n.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*n.maxSpeedY+n.minSpeedY).toFixed(2);break;default:this.speed.y=+(-n.maxSpeedY/2+Math.random()*n.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?n.minSpeedY:-n.minSpeedY}}function u(t,e){return e?void(n[t]=e):n[t]}function m(){console.log("destroy"),g.parentNode.removeChild(g),y("onDestroy"),s&&s(a).removeData("plugin_"+o)}function y(t){void 0!==n[t]&&n[t].call(a)}var g,v,w,M,k,S,X,Y=!!e.createElement("canvas").getContext,O=[],C=0,F=0,b=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),A=!!t.DeviceOrientationEvent,P=0,E=0,T=!1;return n=i({},t[o].defaults,n),x.prototype.draw=function(){v.beginPath(),v.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,n.particleRadius/2,0,2*Math.PI,!0),v.closePath(),v.fill(),v.beginPath();for(var t=O.length-1;t>this.stackPos;t--){var e=O[t],i=this.position.x-e.position.x,a=this.position.y-e.position.y,o=Math.sqrt(i*i+a*a).toFixed(2);oi&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>i||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(n.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=o-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>o&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>o||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},x.prototype.setStackPos=function(t){this.stackPos=t},r(),{option:u,destroy:m,start:c,pause:f}}var o="particleground",s=t.jQuery;t[o]=function(t,e){return new a(t,e)},t[o].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,randomStrokeColor:!1,strokeColorMin:0,strokeColorMax:15,onInit:function(){},onDestroy:function(){}},s&&(s.fn[o]=function(t){if("string"==typeof arguments[0]){var e,i=arguments[0],n=Array.prototype.slice.call(arguments,1);return this.each(function(){s.data(this,"plugin_"+o)&&"function"==typeof s.data(this,"plugin_"+o)[i]&&(e=s.data(this,"plugin_"+o)[i].apply(this,n))}),void 0!==e?e:this}return"object"!=typeof t&&t?void 0:this.each(function(){s.data(this,"plugin_"+o)||s.data(this,"plugin_"+o,new a(this,t))})})}(window,document),function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i Date: Sun, 14 Aug 2016 22:45:04 +0100 Subject: [PATCH 4/8] Update jquery.particleground.min.js --- jquery.particleground.min.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/jquery.particleground.min.js b/jquery.particleground.min.js index 4806767..1320305 100644 --- a/jquery.particleground.min.js +++ b/jquery.particleground.min.js @@ -7,10 +7,4 @@ * * Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/ */ -!function(a,b){"use strict";function c(a){a=a||{};for(var b=1;be;e++){var f=new n;f.setStackPos(e),z.push(f)}a.addEventListener("resize",function(){k()},!1),b.addEventListener("mousemove",function(a){A=a.pageX,B=a.pageY},!1),D&&!C&&a.addEventListener("deviceorientation",function(){F=Math.min(Math.max(-event.beta,-30),30),E=Math.min(Math.max(-event.gamma,-30),30)},!0),j(),q("onInit")}}function i(){r.width=d.offsetWidth,r.height=d.offsetHeight,s.fillStyle=g.dotColor,s.strokeStyle=g.lineColor,s.lineWidth=g.lineWidth}function j(){if(y){u=a.innerWidth,v=a.innerHeight,s.clearRect(0,0,r.width,r.height);for(var b=0;b=0;c--)(z[c].position.x>a||z[c].position.y>b)&&z.splice(c,1);var e=Math.round(r.width*r.height/g.density);if(e>z.length)for(;e>z.length;){var f=new n;z.push(f)}else e=0;c--)z[c].setStackPos(c)}function l(){G=!0}function m(){G=!1,j()}function n(){switch(this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*r.width),y:Math.ceil(Math.random()*r.height)},this.speed={},g.directionX){case"left":this.speed.x=+(-g.maxSpeedX+Math.random()*g.maxSpeedX-g.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*g.maxSpeedX+g.minSpeedX).toFixed(2);break;default:this.speed.x=+(-g.maxSpeedX/2+Math.random()*g.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?g.minSpeedX:-g.minSpeedX}switch(g.directionY){case"up":this.speed.y=+(-g.maxSpeedY+Math.random()*g.maxSpeedY-g.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*g.maxSpeedY+g.minSpeedY).toFixed(2);break;default:this.speed.y=+(-g.maxSpeedY/2+Math.random()*g.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?g.minSpeedY:-g.minSpeedY}}function o(a,b){return b?void(g[a]=b):g[a]}function p(){console.log("destroy"),r.parentNode.removeChild(r),q("onDestroy"),f&&f(d).removeData("plugin_"+e)}function q(a){void 0!==g[a]&&g[a].call(d)}var r,s,t,u,v,w,x,y=!!b.createElement("canvas").getContext,z=[],A=0,B=0,C=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),D=!!a.DeviceOrientationEvent,E=0,F=0,G=!1;return g=c({},a[e].defaults,g),n.prototype.draw=function(){s.beginPath(),s.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,g.particleRadius/2,0,2*Math.PI,!0),s.closePath(),s.fill(),s.beginPath();for(var a=z.length-1;a>this.stackPos;a--){var b=z[a],c=this.position.x-b.position.x,d=this.position.y-b.position.y,e=Math.sqrt(c*c+d*d).toFixed(2);ec&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>c||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(g.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=e-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>e&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>e||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},n.prototype.setStackPos=function(a){this.stackPos=a},h(),{option:o,destroy:p,start:m,pause:l}}var e="particleground",f=a.jQuery;a[e]=function(a,b){return new d(a,b)},a[e].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,onInit:function(){},onDestroy:function(){}},f&&(f.fn[e]=function(a){if("string"==typeof arguments[0]){var b,c=arguments[0],g=Array.prototype.slice.call(arguments,1);return this.each(function(){f.data(this,"plugin_"+e)&&"function"==typeof f.data(this,"plugin_"+e)[c]&&(b=f.data(this,"plugin_"+e)[c].apply(this,g))}),void 0!==b?b:this}return"object"!=typeof a&&a?void 0:this.each(function(){f.data(this,"plugin_"+e)||f.data(this,"plugin_"+e,new d(this,a))})})}(window,document),/** - * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel - * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ - * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating - * @license: MIT license - */ !function(t,e){"use strict";function i(t){t=t||{};for(var e=1;eo;o++){var s=new x;s.setStackPos(o),O.push(s)}t.addEventListener("resize",function(){d()},!1),e.addEventListener("mousemove",function(t){C=t.pageX,F=t.pageY},!1),A&&!b&&t.addEventListener("deviceorientation",function(){E=Math.min(Math.max(-event.beta,-30),30),P=Math.min(Math.max(-event.gamma,-30),30)},!0),p(),y("onInit")}}function h(t,e){var i=["#000","#111","#222","#333","#444","#555","#666","#777","#888","#999","#AAA","#BBB","#CCC","#DDD","#EEE"],a=Math.floor(Math.random()*e+t);return i[a]}function l(){g.width=a.offsetWidth,g.height=a.offsetHeight,v.fillStyle=n.dotColor,v.strokeStyle=n.lineColor,v.lineWidth=n.lineWidth}function p(){if(Y){M=t.innerWidth,k=t.innerHeight,v.clearRect(0,0,g.width,g.height);for(var e=0;e=0;i--)(O[i].position.x>t||O[i].position.y>e)&&O.splice(i,1);var o=Math.round(g.width*g.height/n.density);if(o>O.length)for(;o>O.length;){var s=new x;O.push(s)}else o=0;i--)O[i].setStackPos(i)}function f(){T=!0}function c(){T=!1,p()}function x(){switch(n.randomStrokeColor?this.strokeColor=h(n.strokeColorMin,n.strokeColorMax):this.strokeColor=n.strokeColor,this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*g.width),y:Math.ceil(Math.random()*g.height)},this.speed={},n.directionX){case"left":this.speed.x=+(-n.maxSpeedX+Math.random()*n.maxSpeedX-n.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*n.maxSpeedX+n.minSpeedX).toFixed(2);break;default:this.speed.x=+(-n.maxSpeedX/2+Math.random()*n.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?n.minSpeedX:-n.minSpeedX}switch(n.directionY){case"up":this.speed.y=+(-n.maxSpeedY+Math.random()*n.maxSpeedY-n.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*n.maxSpeedY+n.minSpeedY).toFixed(2);break;default:this.speed.y=+(-n.maxSpeedY/2+Math.random()*n.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?n.minSpeedY:-n.minSpeedY}}function u(t,e){return e?void(n[t]=e):n[t]}function m(){console.log("destroy"),g.parentNode.removeChild(g),y("onDestroy"),s&&s(a).removeData("plugin_"+o)}function y(t){void 0!==n[t]&&n[t].call(a)}var g,v,w,M,k,S,X,Y=!!e.createElement("canvas").getContext,O=[],C=0,F=0,b=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),A=!!t.DeviceOrientationEvent,P=0,E=0,T=!1;return n=i({},t[o].defaults,n),x.prototype.draw=function(){v.beginPath(),v.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,n.particleRadius/2,0,2*Math.PI,!0),v.closePath(),v.fill(),v.beginPath();for(var t=O.length-1;t>this.stackPos;t--){var e=O[t],i=this.position.x-e.position.x,a=this.position.y-e.position.y,o=Math.sqrt(i*i+a*a).toFixed(2);oi&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>i||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(n.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=o-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>o&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>o||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},x.prototype.setStackPos=function(t){this.stackPos=t},r(),{option:u,destroy:m,start:c,pause:f}}var o="particleground",s=t.jQuery;t[o]=function(t,e){return new a(t,e)},t[o].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,randomStrokeColor:!1,strokeColorMin:0,strokeColorMax:15,onInit:function(){},onDestroy:function(){}},s&&(s.fn[o]=function(t){if("string"==typeof arguments[0]){var e,i=arguments[0],n=Array.prototype.slice.call(arguments,1);return this.each(function(){s.data(this,"plugin_"+o)&&"function"==typeof s.data(this,"plugin_"+o)[i]&&(e=s.data(this,"plugin_"+o)[i].apply(this,n))}),void 0!==e?e:this}return"object"!=typeof t&&t?void 0:this.each(function(){s.data(this,"plugin_"+o)||s.data(this,"plugin_"+o,new a(this,t))})})}(window,document),function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i Date: Sun, 14 Aug 2016 22:47:42 +0100 Subject: [PATCH 5/8] Revert --- jquery.particleground.min.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/jquery.particleground.min.js b/jquery.particleground.min.js index 1320305..cd7d8b2 100644 --- a/jquery.particleground.min.js +++ b/jquery.particleground.min.js @@ -7,4 +7,10 @@ * * Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/ */ -!function(t,e){"use strict";function i(t){t=t||{};for(var e=1;eo;o++){var s=new x;s.setStackPos(o),O.push(s)}t.addEventListener("resize",function(){d()},!1),e.addEventListener("mousemove",function(t){C=t.pageX,F=t.pageY},!1),A&&!b&&t.addEventListener("deviceorientation",function(){E=Math.min(Math.max(-event.beta,-30),30),P=Math.min(Math.max(-event.gamma,-30),30)},!0),p(),y("onInit")}}function h(t,e){var i=["#000","#111","#222","#333","#444","#555","#666","#777","#888","#999","#AAA","#BBB","#CCC","#DDD","#EEE"],a=Math.floor(Math.random()*e+t);return i[a]}function l(){g.width=a.offsetWidth,g.height=a.offsetHeight,v.fillStyle=n.dotColor,v.strokeStyle=n.lineColor,v.lineWidth=n.lineWidth}function p(){if(Y){M=t.innerWidth,k=t.innerHeight,v.clearRect(0,0,g.width,g.height);for(var e=0;e=0;i--)(O[i].position.x>t||O[i].position.y>e)&&O.splice(i,1);var o=Math.round(g.width*g.height/n.density);if(o>O.length)for(;o>O.length;){var s=new x;O.push(s)}else o=0;i--)O[i].setStackPos(i)}function f(){T=!0}function c(){T=!1,p()}function x(){switch(n.randomStrokeColor?this.strokeColor=h(n.strokeColorMin,n.strokeColorMax):this.strokeColor=n.strokeColor,this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*g.width),y:Math.ceil(Math.random()*g.height)},this.speed={},n.directionX){case"left":this.speed.x=+(-n.maxSpeedX+Math.random()*n.maxSpeedX-n.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*n.maxSpeedX+n.minSpeedX).toFixed(2);break;default:this.speed.x=+(-n.maxSpeedX/2+Math.random()*n.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?n.minSpeedX:-n.minSpeedX}switch(n.directionY){case"up":this.speed.y=+(-n.maxSpeedY+Math.random()*n.maxSpeedY-n.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*n.maxSpeedY+n.minSpeedY).toFixed(2);break;default:this.speed.y=+(-n.maxSpeedY/2+Math.random()*n.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?n.minSpeedY:-n.minSpeedY}}function u(t,e){return e?void(n[t]=e):n[t]}function m(){console.log("destroy"),g.parentNode.removeChild(g),y("onDestroy"),s&&s(a).removeData("plugin_"+o)}function y(t){void 0!==n[t]&&n[t].call(a)}var g,v,w,M,k,S,X,Y=!!e.createElement("canvas").getContext,O=[],C=0,F=0,b=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),A=!!t.DeviceOrientationEvent,P=0,E=0,T=!1;return n=i({},t[o].defaults,n),x.prototype.draw=function(){v.beginPath(),v.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,n.particleRadius/2,0,2*Math.PI,!0),v.closePath(),v.fill(),v.beginPath();for(var t=O.length-1;t>this.stackPos;t--){var e=O[t],i=this.position.x-e.position.x,a=this.position.y-e.position.y,o=Math.sqrt(i*i+a*a).toFixed(2);oi&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>i||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(n.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=o-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>o&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>o||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},x.prototype.setStackPos=function(t){this.stackPos=t},r(),{option:u,destroy:m,start:c,pause:f}}var o="particleground",s=t.jQuery;t[o]=function(t,e){return new a(t,e)},t[o].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,randomStrokeColor:!1,strokeColorMin:0,strokeColorMax:15,onInit:function(){},onDestroy:function(){}},s&&(s.fn[o]=function(t){if("string"==typeof arguments[0]){var e,i=arguments[0],n=Array.prototype.slice.call(arguments,1);return this.each(function(){s.data(this,"plugin_"+o)&&"function"==typeof s.data(this,"plugin_"+o)[i]&&(e=s.data(this,"plugin_"+o)[i].apply(this,n))}),void 0!==e?e:this}return"object"!=typeof t&&t?void 0:this.each(function(){s.data(this,"plugin_"+o)||s.data(this,"plugin_"+o,new a(this,t))})})}(window,document),function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;ie;e++){var f=new n;f.setStackPos(e),z.push(f)}a.addEventListener("resize",function(){k()},!1),b.addEventListener("mousemove",function(a){A=a.pageX,B=a.pageY},!1),D&&!C&&a.addEventListener("deviceorientation",function(){F=Math.min(Math.max(-event.beta,-30),30),E=Math.min(Math.max(-event.gamma,-30),30)},!0),j(),q("onInit")}}function i(){r.width=d.offsetWidth,r.height=d.offsetHeight,s.fillStyle=g.dotColor,s.strokeStyle=g.lineColor,s.lineWidth=g.lineWidth}function j(){if(y){u=a.innerWidth,v=a.innerHeight,s.clearRect(0,0,r.width,r.height);for(var b=0;b=0;c--)(z[c].position.x>a||z[c].position.y>b)&&z.splice(c,1);var e=Math.round(r.width*r.height/g.density);if(e>z.length)for(;e>z.length;){var f=new n;z.push(f)}else e=0;c--)z[c].setStackPos(c)}function l(){G=!0}function m(){G=!1,j()}function n(){switch(this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*r.width),y:Math.ceil(Math.random()*r.height)},this.speed={},g.directionX){case"left":this.speed.x=+(-g.maxSpeedX+Math.random()*g.maxSpeedX-g.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*g.maxSpeedX+g.minSpeedX).toFixed(2);break;default:this.speed.x=+(-g.maxSpeedX/2+Math.random()*g.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?g.minSpeedX:-g.minSpeedX}switch(g.directionY){case"up":this.speed.y=+(-g.maxSpeedY+Math.random()*g.maxSpeedY-g.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*g.maxSpeedY+g.minSpeedY).toFixed(2);break;default:this.speed.y=+(-g.maxSpeedY/2+Math.random()*g.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?g.minSpeedY:-g.minSpeedY}}function o(a,b){return b?void(g[a]=b):g[a]}function p(){console.log("destroy"),r.parentNode.removeChild(r),q("onDestroy"),f&&f(d).removeData("plugin_"+e)}function q(a){void 0!==g[a]&&g[a].call(d)}var r,s,t,u,v,w,x,y=!!b.createElement("canvas").getContext,z=[],A=0,B=0,C=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),D=!!a.DeviceOrientationEvent,E=0,F=0,G=!1;return g=c({},a[e].defaults,g),n.prototype.draw=function(){s.beginPath(),s.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,g.particleRadius/2,0,2*Math.PI,!0),s.closePath(),s.fill(),s.beginPath();for(var a=z.length-1;a>this.stackPos;a--){var b=z[a],c=this.position.x-b.position.x,d=this.position.y-b.position.y,e=Math.sqrt(c*c+d*d).toFixed(2);ec&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>c||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(g.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=e-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>e&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>e||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},n.prototype.setStackPos=function(a){this.stackPos=a},h(),{option:o,destroy:p,start:m,pause:l}}var e="particleground",f=a.jQuery;a[e]=function(a,b){return new d(a,b)},a[e].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,onInit:function(){},onDestroy:function(){}},f&&(f.fn[e]=function(a){if("string"==typeof arguments[0]){var b,c=arguments[0],g=Array.prototype.slice.call(arguments,1);return this.each(function(){f.data(this,"plugin_"+e)&&"function"==typeof f.data(this,"plugin_"+e)[c]&&(b=f.data(this,"plugin_"+e)[c].apply(this,g))}),void 0!==b?b:this}return"object"!=typeof a&&a?void 0:this.each(function(){f.data(this,"plugin_"+e)||f.data(this,"plugin_"+e,new d(this,a))})})}(window,document),/** + * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel + * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + * @license: MIT license + */ +function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c Date: Sun, 14 Aug 2016 22:53:40 +0100 Subject: [PATCH 6/8] Change from 14 to 15 --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e99a11e..a606d06 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ The lower the number, the more extreme the parallax effect will be. false -Overwrites `strokeColor` - Randomises the stroke colours of the particles, picking a random greyscale color between `strokeColorMin` and `strokeColorMax`, where `0 = #000` and `15 = #EEE`. +Overwrites `strokeColor` - Randomises the stroke colours of the particles, picking a random greyscale color between `strokeColorMin` and `strokeColorMax`, where `0 = #000` and `15 = #FFF`. ## strokeColorMin @@ -119,7 +119,7 @@ Defines the minimum color selectable by the random color picker. Range 0-15. ## strokeColorMax - 15 + 14 Defines the maximum color selectable by the random color picker. Range 0-15. ### onInit From abd241c2e87e5a5fc02f0c7360675b7c03275b22 Mon Sep 17 00:00:00 2001 From: James Paterson Date: Sun, 14 Aug 2016 22:54:44 +0100 Subject: [PATCH 7/8] Added #FFF --- jquery.particleground.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.particleground.js b/jquery.particleground.js index 77e483f..dee2884 100644 --- a/jquery.particleground.js +++ b/jquery.particleground.js @@ -96,10 +96,10 @@ } /** - Get a random color from #000 - #EEE (0-15) + Get a random color from #000 - #FFF (0-15) **/ function getRandColor(min,max) { - var t = ['#000','#111','#222','#333','#444','#555','#666','#777','#888','#999','#AAA','#BBB','#CCC','#DDD','#EEE']; + var t = ['#000','#111','#222','#333','#444','#555','#666','#777','#888','#999','#AAA','#BBB','#CCC','#DDD','#EEE','#FFF']; var c = Math.floor((Math.random() * max) + min); return t[c]; } From 4b5ebf8f049edadbf772639ad17a0033007877c2 Mon Sep 17 00:00:00 2001 From: James Paterson Date: Sun, 14 Aug 2016 22:55:06 +0100 Subject: [PATCH 8/8] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a606d06..0652b6c 100644 --- a/README.md +++ b/README.md @@ -119,9 +119,10 @@ Defines the minimum color selectable by the random color picker. Range 0-15. ## strokeColorMax - 14 + 15 Defines the maximum color selectable by the random color picker. Range 0-15. + ### onInit function() {}