rflow/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Fork of mbostock's block http://bl.ocks.org/mbostock/280d83080497c8c13152.
forked from dowstreet's block: Connected Particles III

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500" style="background-color: #fff"></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});

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

  var width = canvas.width,
      height = canvas.height,
      tau = 2 * Math.PI,
      minDistance = 40,
      maxDistance = 60;


  var fills = ["#d7d7d7", "#e2e2e2", "#eee"],
      currentFill = 0;

  var n = Math.min(width, height) >> 1,
      particles = new Array(n),
      mouse = { x:0, y:0 };

  document.addEventListener("mousemove", function(e){
    mouse.x = Math.min(width, Math.max(0, e.x));
    mouse.y = Math.min(height, Math.max(0, e.y));
  })

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

  function distance (a, b) {
    return Math.sqrt(Math.pow(Math.abs(a.x - b.x),2) + Math.pow(Math.abs(a.y - b.y),2));
  }

  function render (elapsed) {
    context.save();
    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.2 * (Math.random() - .5) - 0.01 * p.vx;
      p.vy += 0.05 * (Math.random()) - 0.01 * p.vy;

      var distanceFromMouse = distance(p, mouse),
          proximityFactor = 0.5 + (1 - (Math.min(distanceFromMouse, maxDistance) / maxDistance));

      context.beginPath();
      context.fillStyle = p.fill;
      context.arc(p.x, p.y, p.r * proximityFactor, 0, tau);
      context.fill();
    }

    context.restore();
  }

  timer.timer(render);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<canvas width="960" height="500" style="background-color: #fff"></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});

	var canvas = document.querySelector("canvas"),
	context = canvas.getContext("2d");

	var width = canvas.width,
	height = canvas.height,
	tau = 2 * Math.PI,
	minDistance = 40,
	maxDistance = 60;


	var fills = ["#d7d7d7", "#e2e2e2", "#eee"],
	currentFill = 0;

	var n = Math.min(width, height) >> 1,
	particles = new Array(n),
	mouse = { x:0, y:0 };

	document.addEventListener("mousemove", function(e){
	mouse.x = Math.min(width, Math.max(0, e.x));
	mouse.y = Math.min(height, Math.max(0, e.y));
	})

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

	function distance (a, b) {
	return Math.sqrt(Math.pow(Math.abs(a.x - b.x),2) + Math.pow(Math.abs(a.y - b.y),2));
	}

	function render (elapsed) {
	context.save();
	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.2 * (Math.random() - .5) - 0.01 * p.vx;
	p.vy += 0.05 * (Math.random()) - 0.01 * p.vy;

	var distanceFromMouse = distance(p, mouse),
	proximityFactor = 0.5 + (1 - (Math.min(distanceFromMouse, maxDistance) / maxDistance));

	context.beginPath();
	context.fillStyle = p.fill;
	context.arc(p.x, p.y, p.r * proximityFactor, 0, tau);
	context.fill();
	}

	context.restore();
	}

	timer.timer(render);

	</script>