ivtpz/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: fresh block

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3-timer.v1.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <canvas width="960" height="800"></canvas>
  <script>
    var length = 100;
    var color = d3.scaleLinear().domain([1,length])
        .interpolate(d3.interpolateHcl)
        .range([d3.rgb("#00f946"), d3.rgb('#9500d1')]);

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    minRadius = 2.5,
    maxRadius = 5,
    minDistance = 80,
    maxDistance = 100,
    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: 0.1 * (Math.random() - 0.5),
    r: minRadius + Math.random() * (maxRadius),
    c: color(Math.floor(Math.random()*100))
  };
}
d3.timer(function(elapsed) {
  context.clearRect(0, 0, width, height);
  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.stroke();
      }
    }
  }
  context.globalAlpha = 1;
  for (var i = 0; i < n; ++i) {
    var p = particles[i];
    p.y = p.y0 + elapsed * p.v;
    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, p.r, 0, tau);
    context.fillStyle = p.c;
    context.fill();
  }
});


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3-timer.v1.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<canvas width="960" height="800"></canvas>
	<script>
	var length = 100;
	var color = d3.scaleLinear().domain([1,length])
	.interpolate(d3.interpolateHcl)
	.range([d3.rgb("#00f946"), d3.rgb('#9500d1')]);

	var canvas = document.querySelector("canvas"),
	context = canvas.getContext("2d"),
	width = canvas.width,
	height = canvas.height,
	minRadius = 2.5,
	maxRadius = 5,
	minDistance = 80,
	maxDistance = 100,
	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: 0.1 * (Math.random() - 0.5),
	r: minRadius + Math.random() * (maxRadius),
	c: color(Math.floor(Math.random()*100))
	};
	}
	d3.timer(function(elapsed) {
	context.clearRect(0, 0, width, height);
	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.stroke();
	}
	}
	}
	context.globalAlpha = 1;
	for (var i = 0; i < n; ++i) {
	var p = particles[i];
	p.y = p.y0 + elapsed * p.v;
	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, p.r, 0, tau);
	context.fillStyle = p.c;
	context.fill();
	}
	});


	</script>
	</body>