abberg · July 2, 2017 02:49
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="500"></canvas>
 <script src="//d3js.org/d3.v4.min.js"></script>
 <script src="//d3js.org/d3-voronoi.v0.3.min.js"></script>
 <script src="//d3js.org/d3-timer.v0.1.min.js"></script>
 <script>

 var canvas = d3.select("canvas").on("touchmove mousemove", moved).node(),
    width = canvas.width,
    height = canvas.height,
    context = canvas.getContext("2d"),
    voronoi = d3_voronoi.voronoi().extent([[0.5, 0.5], [width - 0.5, height - 0.5]]);

 var radius = 60,
    sampler = poissonDiscSampler(width + radius * 2, height + radius * 2, radius),
    particles = [],
    sample;

 while (sample = sampler()) { 
  particles.push({
    0: sample[0], 
    1: sample[1], 
    vx: 0, 
    vy: 0,
    age: function(){ return 0.1; },
    color: function(){ return '#ccc'; }
  });
 }

 var mouseColorScale = d3.scaleLinear()
  .domain([0, 0.2, 0.5, 0.7, 0.9, 1])
  .range([d3.hsl('#FFFFEE'), d3.hsl('#FFFF00'), d3.hsl('#990000'), d3.hsl('#220022'), d3.hsl('#333333'), d3.hsl('#666666')])
  .interpolate(d3.interpolateHsl);


 function moved(){
  mouse = d3.mouse(this);
  particles.push({
    0: mouse[0] + (Math.random() * radius - ( radius / 2)), 
    1: mouse[1], 
    vx: (Math.random() * 2 - 1),  
    vy: -3 - (Math.random() * 2),
    start: new Date(),
    timeToLive:  1000 + Math.random() * 500,
    age: function(){
      var now = new Date();
      var elapsed = now - this.start;
      return elapsed/this.timeToLive;
    },
    color: function() {
      return mouseColorScale(this.age());
    }
  });
 }

 d3_timer.timer(function(elapsed) {
  var i = particles.length;
  while (i--) {
    var p = particles[i];
    p[0] += p.vx; 
    p[1] += p.vy;
    if (
      p[0] < 0 ||
      p[0] > width ||
      p[1] < 0 ||
      p[1] > height ||
      p.age() >= 1
    ) {
     particles.splice(i, 1);
    }
  }

  var cells = voronoi.polygons(particles);
  context.clearRect(0, 0, width, height);

  cells.forEach(function(cell, i) { 
    context.beginPath(); 
    drawPolygon(cell);
    context.fillStyle = particles[i].color();
    context.fill();
    context.strokeStyle = particles[i].color();
    context.stroke();
  });
  

 });

 function drawPolygon(points) {
  context.moveTo(points[0][0], points[0][1]);
  for (var i = 1, n = points.length; i < n; ++i) context.lineTo(points[i][0], points[i][1]);
  context.closePath();
 }

 // Based on https://www.jasondavies.com/poisson-disc/
 function poissonDiscSampler(width, height, radius) {
  var k = 30, // maximum number of samples before rejection
      radius2 = radius * radius,
      R = 3 * radius2,
      cellSize = radius * Math.SQRT1_2,
      gridWidth = Math.ceil(width / cellSize),
      gridHeight = Math.ceil(height / cellSize),
      grid = new Array(gridWidth * gridHeight),
      queue = [],
      queueSize = 0,
      sampleSize = 0;

  return function() {
    if (!sampleSize) return sample(Math.random() * width, Math.random() * height);

    // Pick a random existing sample and remove it from the queue.
    while (queueSize) {
      var i = Math.random() * queueSize | 0,
          s = queue[i];

      // Make a new candidate between [radius, 2 * radius] from the existing sample.
      for (var j = 0; j < k; ++j) {
        var a = 2 * Math.PI * Math.random(),
            r = Math.sqrt(Math.random() * R + radius2),
            x = s[0] + r * Math.cos(a),
            y = s[1] + r * Math.sin(a);

        // Reject candidates that are outside the allowed extent,
        // or closer than 2 * radius to any existing sample.
        if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y);
      }

      queue[i] = queue[--queueSize];
      queue.length = queueSize;
    }
  };

  function far(x, y) {
    var i = x / cellSize | 0,
        j = y / cellSize | 0,
        i0 = Math.max(i - 2, 0),
        j0 = Math.max(j - 2, 0),
        i1 = Math.min(i + 3, gridWidth),
        j1 = Math.min(j + 3, gridHeight);

    for (j = j0; j < j1; ++j) {
      var o = j * gridWidth;
      for (i = i0; i < i1; ++i) {
        if (s = grid[o + i]) {
          var s,
              dx = s[0] - x,
              dy = s[1] - y;
          if (dx * dx + dy * dy < radius2) return false;
        }
      }
    }

    return true;
  }

  function sample(x, y) {
    var s = [x, y];
    queue.push(s);
    grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s;
    ++sampleSize;
    ++queueSize;
    return s;
  }
 }

 </script>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<canvas width="960" height="500"></canvas>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/d3-voronoi.v0.3.min.js"></script>
	<script src="//d3js.org/d3-timer.v0.1.min.js"></script>
	<script>

	var canvas = d3.select("canvas").on("touchmove mousemove", moved).node(),
	width = canvas.width,
	height = canvas.height,
	context = canvas.getContext("2d"),
	voronoi = d3_voronoi.voronoi().extent([[0.5, 0.5], [width - 0.5, height - 0.5]]);

	var radius = 60,
	sampler = poissonDiscSampler(width + radius * 2, height + radius * 2, radius),
	particles = [],
	sample;

	while (sample = sampler()) {
	particles.push({
	0: sample[0],
	1: sample[1],
	vx: 0,
	vy: 0,
	age: function(){ return 0.1; },
	color: function(){ return '#ccc'; }
	});
	}

	var mouseColorScale = d3.scaleLinear()
	.domain([0, 0.2, 0.5, 0.7, 0.9, 1])
	.range([d3.hsl('#FFFFEE'), d3.hsl('#FFFF00'), d3.hsl('#990000'), d3.hsl('#220022'), d3.hsl('#333333'), d3.hsl('#666666')])
	.interpolate(d3.interpolateHsl);


	function moved(){
	mouse = d3.mouse(this);
	particles.push({
	0: mouse[0] + (Math.random() * radius - ( radius / 2)),
	1: mouse[1],
	vx: (Math.random() * 2 - 1),
	vy: -3 - (Math.random() * 2),
	start: new Date(),
	timeToLive: 1000 + Math.random() * 500,
	age: function(){
	var now = new Date();
	var elapsed = now - this.start;
	return elapsed/this.timeToLive;
	},
	color: function() {
	return mouseColorScale(this.age());
	}
	});
	}

	d3_timer.timer(function(elapsed) {
	var i = particles.length;
	while (i--) {
	var p = particles[i];
	p[0] += p.vx;
	p[1] += p.vy;
	if (
	p[0] < 0 \|\|
	p[0] > width \|\|
	p[1] < 0 \|\|
	p[1] > height \|\|
	p.age() >= 1
	) {
	particles.splice(i, 1);
	}
	}

	var cells = voronoi.polygons(particles);
	context.clearRect(0, 0, width, height);

	cells.forEach(function(cell, i) {
	context.beginPath();
	drawPolygon(cell);
	context.fillStyle = particles[i].color();
	context.fill();
	context.strokeStyle = particles[i].color();
	context.stroke();
	});


	});

	function drawPolygon(points) {
	context.moveTo(points[0][0], points[0][1]);
	for (var i = 1, n = points.length; i < n; ++i) context.lineTo(points[i][0], points[i][1]);
	context.closePath();
	}

	// Based on https://www.jasondavies.com/poisson-disc/
	function poissonDiscSampler(width, height, radius) {
	var k = 30, // maximum number of samples before rejection
	radius2 = radius * radius,
	R = 3 * radius2,
	cellSize = radius * Math.SQRT1_2,
	gridWidth = Math.ceil(width / cellSize),
	gridHeight = Math.ceil(height / cellSize),
	grid = new Array(gridWidth * gridHeight),
	queue = [],
	queueSize = 0,
	sampleSize = 0;

	return function() {
	if (!sampleSize) return sample(Math.random() * width, Math.random() * height);

	// Pick a random existing sample and remove it from the queue.
	while (queueSize) {
	var i = Math.random() * queueSize \| 0,
	s = queue[i];

	// Make a new candidate between [radius, 2 * radius] from the existing sample.
	for (var j = 0; j < k; ++j) {
	var a = 2 * Math.PI * Math.random(),
	r = Math.sqrt(Math.random() * R + radius2),
	x = s[0] + r * Math.cos(a),
	y = s[1] + r * Math.sin(a);

	// Reject candidates that are outside the allowed extent,
	// or closer than 2 * radius to any existing sample.
	if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y);
	}

	queue[i] = queue[--queueSize];
	queue.length = queueSize;
	}
	};

	function far(x, y) {
	var i = x / cellSize \| 0,
	j = y / cellSize \| 0,
	i0 = Math.max(i - 2, 0),
	j0 = Math.max(j - 2, 0),
	i1 = Math.min(i + 3, gridWidth),
	j1 = Math.min(j + 3, gridHeight);

	for (j = j0; j < j1; ++j) {
	var o = j * gridWidth;
	for (i = i0; i < i1; ++i) {
	if (s = grid[o + i]) {
	var s,
	dx = s[0] - x,
	dy = s[1] - y;
	if (dx * dx + dy * dy < radius2) return false;
	}
	}
	}

	return true;
	}

	function sample(x, y) {
	var s = [x, y];
	queue.push(s);
	grid[gridWidth * (y / cellSize \| 0) + (x / cellSize \| 0)] = s;
	++sampleSize;
	++queueSize;
	return s;
	}
	}

	</script>