diff --git a/jquery.particleground.js b/jquery.particleground.js index 3146625..9079418 100644 --- a/jquery.particleground.js +++ b/jquery.particleground.js @@ -51,6 +51,7 @@ var paused = false; options = extend({}, window[pluginName].defaults, options); + var proximityS2 = options.proximity * options.proximity; /** * Init @@ -243,10 +244,10 @@ // Pythagorus theorum to get distance between two points var a = this.position.x - p2.position.x var b = this.position.y - p2.position.y - var dist = Math.sqrt((a * a) + (b * b)).toFixed(2); + var distS2 = (a * a) + (b * b); // If the two particles are in proximity, join them - if (dist < options.proximity) { + if (distS2 < proximityS2) { ctx.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY); if (options.curvedLines) { ctx.quadraticCurveTo(Math.max(p2.position.x, p2.position.x), Math.min(p2.position.y, p2.position.y), p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY); diff --git a/jquery.particleground.min.js b/jquery.particleground.min.js index dca1f0b..ae52716 100644 --- a/jquery.particleground.min.js +++ b/jquery.particleground.min.js @@ -7,10 +7,10 @@ * * 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),/** +!function(t,e){"use strict";function i(t){t=t||{};for(var e=1;es;s++){var n=new c;n.setStackPos(s),M.push(n)}t.addEventListener("resize",function(){l()},!1),e.addEventListener("mousemove",function(t){k=t.pageX,b=t.pageY},!1),P&&!F&&t.addEventListener("deviceorientation",function(){C=Math.min(Math.max(-event.beta,-30),30),A=Math.min(Math.max(-event.gamma,-30),30)},!0),p(),m("onInit")}}function h(){y.width=a.offsetWidth,y.height=a.offsetHeight,g.fillStyle=o.dotColor,g.strokeStyle=o.lineColor,g.lineWidth=o.lineWidth}function p(){if(S){w=t.innerWidth,X=t.innerHeight,g.clearRect(0,0,y.width,y.height);for(var e=0;e=0;i--)(M[i].position.x>t||M[i].position.y>e)&&M.splice(i,1);var s=Math.round(y.width*y.height/o.density);if(s>M.length)for(;s>M.length;){var n=new c;M.push(n)}else s=0;i--)M[i].setStackPos(i)}function d(){T=!0}function f(){T=!1,p()}function c(){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()*y.width),y:Math.ceil(Math.random()*y.height)},this.speed={},o.directionX){case"left":this.speed.x=+(-o.maxSpeedX+Math.random()*o.maxSpeedX-o.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*o.maxSpeedX+o.minSpeedX).toFixed(2);break;default:this.speed.x=+(-o.maxSpeedX/2+Math.random()*o.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?o.minSpeedX:-o.minSpeedX}switch(o.directionY){case"up":this.speed.y=+(-o.maxSpeedY+Math.random()*o.maxSpeedY-o.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*o.maxSpeedY+o.minSpeedY).toFixed(2);break;default:this.speed.y=+(-o.maxSpeedY/2+Math.random()*o.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?o.minSpeedY:-o.minSpeedY}}function x(t,e){return e?void(o[t]=e):o[t]}function u(){console.log("destroy"),y.parentNode.removeChild(y),m("onDestroy"),n&&n(a).removeData("plugin_"+s)}function m(t){void 0!==o[t]&&o[t].call(a)}var y,g,v,w,X,Y,O,S=!!e.createElement("canvas").getContext,M=[],k=0,b=0,F=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),P=!!t.DeviceOrientationEvent,A=0,C=0,T=!1;o=i({},t[s].defaults,o);var q=o.proximity*o.proximity;return c.prototype.draw=function(){g.beginPath(),g.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,o.particleRadius/2,0,2*Math.PI,!0),g.closePath(),g.fill(),g.beginPath();for(var t=M.length-1;t>this.stackPos;t--){var e=M[t],i=this.position.x-e.position.x,a=this.position.y-e.position.y,s=i*i+a*a;q>s&&(g.moveTo(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY),o.curvedLines?g.quadraticCurveTo(Math.max(e.position.x,e.position.x),Math.min(e.position.y,e.position.y),e.position.x+e.parallaxOffsetX,e.position.y+e.parallaxOffsetY):g.lineTo(e.position.x+e.parallaxOffsetX,e.position.y+e.parallaxOffsetY))}g.stroke(),g.closePath()},c.prototype.updatePosition=function(){if(o.parallax){if(P&&!F){var t=(w-0)/60;Y=(A- -30)*t+0;var e=(X-0)/60;O=(C- -30)*e+0}else Y=k,O=b;this.parallaxTargX=(Y-w/2)/(o.parallaxMultiplier*this.layer),this.parallaxOffsetX+=(this.parallaxTargX-this.parallaxOffsetX)/10,this.parallaxTargY=(O-X/2)/(o.parallaxMultiplier*this.layer),this.parallaxOffsetY+=(this.parallaxTargY-this.parallaxOffsetY)/10}var i=a.offsetWidth,s=a.offsetHeight;switch(o.directionX){case"left":this.position.x+this.speed.x+this.parallaxOffsetX<0&&(this.position.x=i-this.parallaxOffsetX);break;case"right":this.position.x+this.speed.x+this.parallaxOffsetX>i&&(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(o.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=s-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>s&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>s||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},c.prototype.setStackPos=function(t){this.stackPos=t},r(),{option:x,destroy:u,start:f,pause:d}}var s="particleground",n=t.jQuery;t[s]=function(t,e){return new a(t,e)},t[s].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(){}},n&&(n.fn[s]=function(t){if("string"==typeof arguments[0]){var e,i=arguments[0],o=Array.prototype.slice.call(arguments,1);return this.each(function(){n.data(this,"plugin_"+s)&&"function"==typeof n.data(this,"plugin_"+s)[i]&&(e=n.data(this,"plugin_"+s)[i].apply(this,o))}),void 0!==e?e:this}return"object"!=typeof t&&t?void 0:this.each(function(){n.data(this,"plugin_"+s)||n.data(this,"plugin_"+s,new a(this,t))})})}(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