Connected Particles III

forked from mbostock's block: Connected Particles III

forked from benduffin's block: Connected Particles III

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="945" height="485"></canvas>
<script>

/* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
"undefined"==typeof requestAnimationFrame&&(requestAnimationFrame="undefined"!=typeof window&&(window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(e){return setTimeout(e,17)}),function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.timer={})}(this,function(e){"use strict";function n(){r=m=0,c=1/0,t(u())}function t(e){if(!r){var t=e-Date.now();t>24?c>e&&(m&&clearTimeout(m),m=setTimeout(n,t),c=e):(m&&(m=clearTimeout(m),c=1/0),r=requestAnimationFrame(n))}}function i(e,n,i){i=null==i?Date.now():+i,null!=n&&(i+=+n);var o={callback:e,time:i,flush:!1,next:null};a?a.next=o:f=o,a=o,t(i)}function o(e,n,t){t=null==t?Date.now():+t,null!=n&&(t+=+n),l.callback=e,l.time=t}function u(e){e=null==e?Date.now():+e;var n=l;for(l=f;l;)e>=l.time&&(l.flush=l.callback(e-l.time,e)),l=l.next;l=n,e=1/0;for(var t,i=f;i;)i.flush?i=t?t.next=i.next:f=i.next:(i.time<e&&(e=i.time),i=(t=i).next);return a=t,e}var a,m,r,f,l,c=1/0;e.timer=i,e.timerReplace=o,e.timerFlush=u});

/* https://github.com/d3/d3-color Copyright 2015 Mike Bostock */
"undefined"==typeof Map?(Map=function(){this.clear()},Map.prototype={set:function(t,e){return this._[t]=e,this},get:function(t){return this._[t]},has:function(t){return t in this._},"delete":function(t){return t in this._&&delete this._[t]},clear:function(){this._=Object.create(null)},get size(){var t=0;for(var e in this._)++t;return t},forEach:function(t){for(var e in this._)t(this._[e],e,this)}}):function(){var t=new Map;t.set(0,0)!==t&&(t=t.set,Map.prototype.set=function(){return t.apply(this,arguments),this})}(),function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.color={})}(this,function(t){"use strict";function e(){}function s(t,e,s){this.r=Math.max(0,Math.min(255,Math.round(t))),this.g=Math.max(0,Math.min(255,Math.round(e))),this.b=Math.max(0,Math.min(255,Math.round(s)))}function n(t,e,s){return isNaN(t)&&(t=0),isNaN(e)&&(e=0),isNaN(s)&&(s=0),"#"+(16>t?"0"+t.toString(16):t.toString(16))+(16>e?"0"+e.toString(16):e.toString(16))+(16>s?"0"+s.toString(16):s.toString(16))}function r(t,n,r){return 1===arguments.length&&(t instanceof e||(t=l(t)),t?(t=t.rgb(),r=t.b,n=t.g,t=t.r):t=n=r=NaN),new s(t,n,r)}function i(t){return r(t>>16&255,t>>8&255,255&t)}function a(t,e,s){this.h=+t,this.s=Math.max(0,Math.min(1,+e)),this.l=Math.max(0,Math.min(1,+s))}function o(t,e,s){return 255*(60>t?e+(s-e)*t/60:180>t?s:240>t?e+(s-e)*(240-t)/60:e)}function h(t,s,n){if(1===arguments.length)if(t instanceof a)n=t.l,s=t.s,t=t.h;else if(t instanceof e||(t=l(t)),t){if(t instanceof a)return t;t=t.rgb();var r=t.r/255,i=t.g/255,o=t.b/255,h=Math.min(r,i,o),u=Math.max(r,i,o),c=u-h;n=(u+h)/2,c?(s=.5>n?c/(u+h):c/(2-u-h),t=r===u?(i-o)/c+6*(o>i):i===u?(o-r)/c+2:(r-i)/c+4,t*=60):(t=NaN,s=n>0&&1>n?0:t)}else t=s=n=NaN;return new a(t,s,n)}function l(t){var e;return t=(t+"").trim().toLowerCase(),(e=R.exec(t))?(e=parseInt(e[1],16),r(e>>8&15|e>>4&240,e>>4&15|240&e,(15&e)<<4|15&e)):(e=E.exec(t))?i(parseInt(e[1],16)):(e=z.exec(t))?r(e[1],e[2],e[3]):(e=P.exec(t))?r(2.55*e[1],2.55*e[2],2.55*e[3]):(e=O.exec(t))?h(e[1],.01*e[2],.01*e[3]):L.has(t)?i(L.get(t)):null}function u(t,e,s){this.l=+t,this.a=+e,this.b=+s}function c(t){return 255*(.0031308>=t?12.92*t:1.055*Math.pow(t,1/2.4)-.055)}function g(t){return t>F?t*t*t:G*(t-D)}function f(t){return t>T?Math.pow(t,1/3):t/G+D}function d(t){return(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function p(t,e,s){this.h=+t,this.c=+e,this.l=+s}function b(t,e,n){if(1===arguments.length)if(t instanceof u)n=t.b,e=t.a,t=t.l;else if(t instanceof p){var i=t.h*U;n=Math.sin(i)*t.c,e=Math.cos(i)*t.c,t=t.l}else{t instanceof s||(t=r(t));var a=d(t.r),o=d(t.g),n=d(t.b),h=f((.4124564*a+.3575761*o+.1804375*n)/K),l=f((.2126729*a+.7151522*o+.072175*n)/Q),c=f((.0193339*a+.119192*o+.9503041*n)/J);n=200*(l-c),e=500*(h-l),t=116*l-16}return new u(t,e,n)}function N(t,e,s){return 1===arguments.length&&(t instanceof p?(s=t.l,e=t.c,t=t.h):(t instanceof u||(t=b(t)),s=t.l,e=Math.sqrt(t.a*t.a+t.b*t.b),t=Math.atan2(t.b,t.a)*W,0>t&&(t+=360))),new p(t,e,s)}function m(t,e,s){this.h=+t,this.s=+e,this.l=+s}function w(t,e,n){if(1===arguments.length)if(t instanceof m)n=t.l,e=t.s,t=t.h;else{t instanceof s||(t=r(t));var i=t.r/255,a=t.g/255,o=t.b/255;n=(at*o+it*i-rt*a)/(at+it-rt);var h=o-n,l=(Y*(a-n)-tt*h)/Z,u=Math.pow(n,nt);e=Math.sqrt(l*l+h*h)/(Y*u*(1-u)),t=e?Math.atan2(l,h)*W-120:NaN,0>t&&(t+=360)}return new m(t,e,n)}function y(t,e){t=w(t),e=w(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function v(t,e){var s=(t-e)%360;return s+(s>180?-360:-180>s?360:0)}function M(t,e){t=w(t),e=w(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:v(e.h,s),a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function k(t,e){t=N(t),e=N(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.c)?e.c:t.c,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.c)?0:e.c-n,o=e.l-r;return function(e){return t.h=s+i*e,t.c=n+a*e,t.l=r+o*e,t+""}}function x(t,e){t=N(t),e=N(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.c)?e.c:t.c,r=t.l,i=isNaN(e.h)?0:v(e.h,s),a=isNaN(e.c)?0:e.c-n,o=e.l-r;return function(e){return t.h=s+i*e,t.c=n+a*e,t.l=r+o*e,t+""}}function q(t,e){t=b(t),e=b(e);var s=t.l,n=t.a,r=t.b,i=e.l-s,a=e.a-n,o=e.b-r;return function(e){return t.l=s+i*e,t.a=n+a*e,t.b=r+o*e,t+""}}function _(t,e){t=h(t),e=h(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function S(t,e){t=h(t),e=h(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:v(e.h,s),a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function j(t,e){t=r(t),e=r(e);var s=t.r,i=t.g,a=t.b,o=e.r-s,h=e.g-i,l=e.b-a;return function(t){return n(Math.round(s+o*t),Math.round(i+h*t),Math.round(a+l*t))}}e.prototype={toString:function(){return this.rgb()+""}};var L=(new Map).set("aliceblue",15792383).set("antiquewhite",16444375).set("aqua",65535).set("aquamarine",8388564).set("azure",15794175).set("beige",16119260).set("bisque",16770244).set("black",0).set("blanchedalmond",16772045).set("blue",255).set("blueviolet",9055202).set("brown",10824234).set("burlywood",14596231).set("cadetblue",6266528).set("chartreuse",8388352).set("chocolate",13789470).set("coral",16744272).set("cornflowerblue",6591981).set("cornsilk",16775388).set("crimson",14423100).set("cyan",65535).set("darkblue",139).set("darkcyan",35723).set("darkgoldenrod",12092939).set("darkgray",11119017).set("darkgreen",25600).set("darkgrey",11119017).set("darkkhaki",12433259).set("darkmagenta",9109643).set("darkolivegreen",5597999).set("darkorange",16747520).set("darkorchid",10040012).set("darkred",9109504).set("darksalmon",15308410).set("darkseagreen",9419919).set("darkslateblue",4734347).set("darkslategray",3100495).set("darkslategrey",3100495).set("darkturquoise",52945).set("darkviolet",9699539).set("deeppink",16716947).set("deepskyblue",49151).set("dimgray",6908265).set("dimgrey",6908265).set("dodgerblue",2003199).set("firebrick",11674146).set("floralwhite",16775920).set("forestgreen",2263842).set("fuchsia",16711935).set("gainsboro",14474460).set("ghostwhite",16316671).set("gold",16766720).set("goldenrod",14329120).set("gray",8421504).set("green",32768).set("greenyellow",11403055).set("grey",8421504).set("honeydew",15794160).set("hotpink",16738740).set("indianred",13458524).set("indigo",4915330).set("ivory",16777200).set("khaki",15787660).set("lavender",15132410).set("lavenderblush",16773365).set("lawngreen",8190976).set("lemonchiffon",16775885).set("lightblue",11393254).set("lightcoral",15761536).set("lightcyan",14745599).set("lightgoldenrodyellow",16448210).set("lightgray",13882323).set("lightgreen",9498256).set("lightgrey",13882323).set("lightpink",16758465).set("lightsalmon",16752762).set("lightseagreen",2142890).set("lightskyblue",8900346).set("lightslategray",7833753).set("lightslategrey",7833753).set("lightsteelblue",11584734).set("lightyellow",16777184).set("lime",65280).set("limegreen",3329330).set("linen",16445670).set("magenta",16711935).set("maroon",8388608).set("mediumaquamarine",6737322).set("mediumblue",205).set("mediumorchid",12211667).set("mediumpurple",9662683).set("mediumseagreen",3978097).set("mediumslateblue",8087790).set("mediumspringgreen",64154).set("mediumturquoise",4772300).set("mediumvioletred",13047173).set("midnightblue",1644912).set("mintcream",16121850).set("mistyrose",16770273).set("moccasin",16770229).set("navajowhite",16768685).set("navy",128).set("oldlace",16643558).set("olive",8421376).set("olivedrab",7048739).set("orange",16753920).set("orangered",16729344).set("orchid",14315734).set("palegoldenrod",15657130).set("palegreen",10025880).set("paleturquoise",11529966).set("palevioletred",14381203).set("papayawhip",16773077).set("peachpuff",16767673).set("peru",13468991).set("pink",16761035).set("plum",14524637).set("powderblue",11591910).set("purple",8388736).set("rebeccapurple",6697881).set("red",16711680).set("rosybrown",12357519).set("royalblue",4286945).set("saddlebrown",9127187).set("salmon",16416882).set("sandybrown",16032864).set("seagreen",3050327).set("seashell",16774638).set("sienna",10506797).set("silver",12632256).set("skyblue",8900331).set("slateblue",6970061).set("slategray",7372944).set("slategrey",7372944).set("snow",16775930).set("springgreen",65407).set("steelblue",4620980).set("tan",13808780).set("teal",32896).set("thistle",14204888).set("tomato",16737095).set("turquoise",4251856).set("violet",15631086).set("wheat",16113331).set("white",16777215).set("whitesmoke",16119285).set("yellow",16776960).set("yellowgreen",10145074),$=s.prototype=new e,H=.7;$.darker=function(t){return t=null==t?H:Math.pow(H,t),new s(this.r*t,this.g*t,this.b*t)};var I=1/H;$.brighter=function(t){return t=null==t?I:Math.pow(I,t),new s(this.r*t,this.g*t,this.b*t)},$.rgb=function(){return this},$.toString=function(){return n(this.r,this.g,this.b)};var C=a.prototype=new e;C.brighter=function(t){return t=null==t?I:Math.pow(I,t),new a(this.h,this.s,this.l*t)},C.darker=function(t){return t=null==t?H:Math.pow(H,t),new a(this.h,this.s,this.l*t)},C.rgb=function(){var t=this.h%360+360*(this.h<0),e=isNaN(t)||isNaN(this.s)?0:this.s,n=this.l,r=.5>=n?n*(1+e):n+e-n*e,i=2*n-r;return new s(o(t>=240?t-240:t+120,i,r),o(t,i,r),o(120>t?t+240:t-120,i,r))};var O=/^hsl$\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*$$/,P=/^rgb$\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*$$/,z=/^rgb$\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*$$/,E=/^#([0-9a-f]{6})$/,R=/^#([0-9a-f]{3})$/;l.prototype=e.prototype,r.prototype=s.prototype,h.prototype=a.prototype;var A=u.prototype=new e,B=18;A.brighter=function(t){return new u(this.l+B*(null==t?1:t),this.a,this.b)},A.darker=function(t){return new u(this.l-B*(null==t?1:t),this.a,this.b)};var D=4/29,F=6/29,G=3*F*F,J=1.08883,K=.95047,Q=1;A.rgb=function(){var t=(this.l+16)/116,e=isNaN(this.a)?t:t+this.a/500,n=isNaN(this.b)?t:t-this.b/200;return t=Q*g(t),e=K*g(e),n=J*g(n),new s(c(3.2404542*e-1.5371385*t-.4985314*n),c(-.969266*e+1.8760108*t+.041556*n),c(.0556434*e-.2040259*t+1.0572252*n))};var T=F*F*F,U=Math.PI/180,V=p.prototype=new e;V.brighter=function(t){return new p(this.h,this.c,this.l+B*(null==t?1:t))},V.darker=function(t){return new p(this.h,this.c,this.l-B*(null==t?1:t))},V.rgb=function(){return b(this).rgb()},b.prototype=u.prototype;var W=180/Math.PI;N.prototype=p.prototype;var X=m.prototype=new e;X.brighter=function(t){return t=null==t?I:Math.pow(I,t),new m(this.h,this.s,this.l*t)},X.darker=function(t){return t=null==t?H:Math.pow(H,t),new m(this.h,this.s,this.l*t)};var Y=1.97294,Z=-.90649,tt=-.29227,et=1.78277,st=-.14861,nt=1,rt=Y*et,it=Y*Z,at=et*tt-Z*st;X.rgb=function(){var t=isNaN(this.h)?0:(this.h+120)*U,e=Math.pow(this.l,nt),n=isNaN(this.s)?0:this.s*e*(1-e),r=Math.cos(t),i=Math.sin(t);return new s(255*(e+n*(st*r+et*i)),255*(e+n*(tt*r+Z*i)),255*(e+n*Y*r))},w.prototype=m.prototype,t.color=l,t.rgb=r,t.hsl=h,t.lab=b,t.hcl=N,t.cubehelix=w,t.interpolateRgb=j,t.interpolateHsl=S,t.interpolateHslLong=_,t.interpolateLab=q,t.interpolateHcl=x,t.interpolateHclLong=k,t.interpolateCubehelix=M,t.interpolateCubehelixLong=y});  
  
var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    radius = 1.0,
    minDistance = 0,
    maxDistance = 70,
    minDistance2 = minDistance * minDistance,
    maxDistance2 = maxDistance * maxDistance;

var tau = 2 * Math.PI,
    n = 150,
    particles = new Array(n),
    fill = color.interpolateCubehelix(color.cubehelix(240, 1.50, 0.6), color.cubehelix(160, 1.5, 0.8)),
    gradient = context.createRadialGradient(0,0,0,0,0,900);
    gradient.addColorStop(0,"#1e3851");
    gradient.addColorStop(0.5,"#152137");
    gradient.addColorStop(1,"#0c1821");

for (var i = 0; i < n; ++i) {
  particles[i] = {
    x: Math.random() * width,
    y: Math.random() * height,
    vx: 0,
    vy: 0
  };
}

timer.timer(function(elapsed) {
  context.save();
  context.globalAlpha = 0.5;
  context.fillStyle = gradient;
  context.fillRect(0,0,width,height);
  //context.clearRect(0, 0, width, height);

for (var i = 0; i < n; ++i) {
    var p = particles[i];
    p.x += p.vx; if (p.x < -maxDistance) p.x += width + maxDistance * 2; else if (p.x > width + maxDistance) p.x -= width + maxDistance * 2;
    p.y += p.vy; if (p.y < -maxDistance) p.y += height + maxDistance * 2; else if (p.y > height + maxDistance) p.y -= height + maxDistance * 2;
    p.vx += 0.1 * (Math.random() - .5) - 0.01 * p.vx;
    p.vy += 0.1 * (Math.random() - .5) - 0.01 * p.vy;
    context.beginPath();
    context.arc(p.x, p.y, radius, 0, tau);
    context.fillStyle = "#fff";
    context.fill();
  }

for (var i = 0; i < n; ++i) {
    for (var j = i + 1; j < n; ++j) {
      var pi = particles[i],
          pj = particles[j],
          dx = pi.x - pj.x,
          dy = pi.y - pj.y,
          d2 = dx * dx + dy * dy;
      if (d2 < maxDistance2) {
        context.globalAlpha = (d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 1);
        context.beginPath();
        context.moveTo(pi.x, pi.y);
        context.lineTo(pj.x, pj.y);
        context.strokeStyle = fill(d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 1);
        context.stroke();
      }
    }
  }

context.restore();
});

</script>