enjalot/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Playing around with easing and interpolating to change the effect of the original demo.
forked from mbostock's block: Connected Particles
forked from enjalot's block: Connected Particles: Lasers

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    margin: 0;
    padding: 0;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
  }
</style>
<canvas></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<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,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.timer={})}(this,function(e){"use strict";function t(){l=s=0,c=1/0,n(a())}function n(e){if(!l){var n=e-Date.now();n>24?c>e&&(s&&clearTimeout(s),s=setTimeout(t,n),c=e):(s&&(s=clearTimeout(s),c=1/0),l=requestAnimationFrame(t))}}function i(e,t){this.callback=e,this.time=t,this.flush=!1,this.next=null}function o(e,t,o){o=null==o?Date.now():+o,null!=t&&(o+=+t);var u=new i(e,o);r?r.next=u:m=u,r=u,n(o)}function u(e,t,n){n=null==n?Date.now():+n,null!=t&&(n+=+t),f.callback=e,f.time=n}function a(e){e=null==e?Date.now():+e;var t=f;for(f=m;f;)e>=f.time&&(f.flush=f.callback(e-f.time,e)),f=f.next;f=t,e=1/0;for(var n,i=m;i;)i.flush?i=n?n.next=i.next:m=i.next:(i.time<e&&(e=i.time),i=(n=i).next);return r=n,e}var m,r,f,l,s,c=1/0;e.timer=o,e.timerReplace=u,e.timerFlush=a});

var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    radius = 5.5,
    minDistance = 100,
    maxDistance = 150,
    minDistance2 = minDistance * minDistance,
    maxDistance2 = maxDistance * maxDistance;


var tau = 2 * Math.PI,
    n = 100,
    particles = new Array(n);

for (var i = 0; i < n; ++i) {
  particles[i] = {
    x: width * Math.random(),
    y0: height * Math.random(),
    v: .1 * (Math.random() - .5)
  };
}


//
//var int = d3.interpolate(minDistance, maxDistance)

context.strokeStyle = "#ff8989";
context.lineWidth = 10;
context.lineCap = "round";
//context.globalCompositeOperation = "lighter";

var randomHue = 200 * Math.random();
var randomSaturation = 50 * Math.random();
var randomLightness = 50 * Math.random();

timer.timer(function(elapsed) {
  context.clearRect(0, 0, width, height);
  context.fillStyle="#111";
  context.fillRect(0, 0, width, height);

  var hue = elapsed * 0.01;
  var hue1 = (hue + randomHue) % 360;
  var hue2 = (hue + randomHue + 260) % 360;


  var interpolate = d3.interpolateHcl(d3.hcl(hue1, 50, 95), d3.hcl(hue2, 20 + randomSaturation, 20+ randomLightness));

  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) {
        var ratio = d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 0.9;

        var rease = d3.ease("cubic")(ratio);
        context.globalAlpha = rease;
        context.strokeStyle = interpolate(pi.y / height);

        context.beginPath();
        rease = d3.ease("linear")(ratio);
        var intx = d3.interpolate(pi.x, pj.x)(rease)
        var inty = d3.interpolate(pi.y, pj.y)(rease)
        context.moveTo(pi.x, pi.y);
        context.lineTo(intx, inty);
        context.stroke();
      }
    }
  }
  context.globalAlpha = 0.9;

  context.fillStyle = "#ffffff"
  for (var i = 0; i < n; ++i) {
    var p = particles[i];
    p.y = p.y0 + elapsed * p.v;
    //context.fillStyle = interpolate(1-p.y/height);

    if (p.y > height + maxDistance) p.x = width * Math.random(), p.y0 -= height + 2 * maxDistance;
    else if (p.y < -maxDistance) p.x = width * Math.random(), p.y0 += height + 2 * maxDistance;
    context.beginPath();
    context.arc(p.x, p.y, radius, 0, tau);
    context.fill();
  }
});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	margin: 0;
	padding: 0;
	position:fixed;
	top:0;left:0;right:0;bottom:0;
	}
	</style>
	<canvas></canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<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,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.timer={})}(this,function(e){"use strict";function t(){l=s=0,c=1/0,n(a())}function n(e){if(!l){var n=e-Date.now();n>24?c>e&&(s&&clearTimeout(s),s=setTimeout(t,n),c=e):(s&&(s=clearTimeout(s),c=1/0),l=requestAnimationFrame(t))}}function i(e,t){this.callback=e,this.time=t,this.flush=!1,this.next=null}function o(e,t,o){o=null==o?Date.now():+o,null!=t&&(o+=+t);var u=new i(e,o);r?r.next=u:m=u,r=u,n(o)}function u(e,t,n){n=null==n?Date.now():+n,null!=t&&(n+=+t),f.callback=e,f.time=n}function a(e){e=null==e?Date.now():+e;var t=f;for(f=m;f;)e>=f.time&&(f.flush=f.callback(e-f.time,e)),f=f.next;f=t,e=1/0;for(var n,i=m;i;)i.flush?i=n?n.next=i.next:m=i.next:(i.time<e&&(e=i.time),i=(n=i).next);return r=n,e}var m,r,f,l,s,c=1/0;e.timer=o,e.timerReplace=u,e.timerFlush=a});

	var canvas = document.querySelector("canvas");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var context = canvas.getContext("2d"),
	width = canvas.width,
	height = canvas.height,
	radius = 5.5,
	minDistance = 100,
	maxDistance = 150,
	minDistance2 = minDistance * minDistance,
	maxDistance2 = maxDistance * maxDistance;


	var tau = 2 * Math.PI,
	n = 100,
	particles = new Array(n);

	for (var i = 0; i < n; ++i) {
	particles[i] = {
	x: width * Math.random(),
	y0: height * Math.random(),
	v: .1 * (Math.random() - .5)
	};
	}



	//
	//var int = d3.interpolate(minDistance, maxDistance)

	context.strokeStyle = "#ff8989";
	context.lineWidth = 10;
	context.lineCap = "round";
	//context.globalCompositeOperation = "lighter";

	var randomHue = 200 * Math.random();
	var randomSaturation = 50 * Math.random();
	var randomLightness = 50 * Math.random();

	timer.timer(function(elapsed) {
	context.clearRect(0, 0, width, height);
	context.fillStyle="#111";
	context.fillRect(0, 0, width, height);

	var hue = elapsed * 0.01;
	var hue1 = (hue + randomHue) % 360;
	var hue2 = (hue + randomHue + 260) % 360;


	var interpolate = d3.interpolateHcl(d3.hcl(hue1, 50, 95), d3.hcl(hue2, 20 + randomSaturation, 20+ randomLightness));

	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) {
	var ratio = d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 0.9;

	var rease = d3.ease("cubic")(ratio);
	context.globalAlpha = rease;
	context.strokeStyle = interpolate(pi.y / height);

	context.beginPath();
	rease = d3.ease("linear")(ratio);
	var intx = d3.interpolate(pi.x, pj.x)(rease)
	var inty = d3.interpolate(pi.y, pj.y)(rease)
	context.moveTo(pi.x, pi.y);
	context.lineTo(intx, inty);
	context.stroke();
	}
	}
	}
	context.globalAlpha = 0.9;

	context.fillStyle = "#ffffff"
	for (var i = 0; i < n; ++i) {
	var p = particles[i];
	p.y = p.y0 + elapsed * p.v;
	//context.fillStyle = interpolate(1-p.y/height);

	if (p.y > height + maxDistance) p.x = width * Math.random(), p.y0 -= height + 2 * maxDistance;
	else if (p.y < -maxDistance) p.x = width * Math.random(), p.y0 += height + 2 * maxDistance;
	context.beginPath();
	context.arc(p.x, p.y, radius, 0, tau);
	context.fill();
	}
	});

	</script>