enjalot/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Pulsating version of Color Mesh II.
forked from syntagmatic's block: Breathing Color Mesh

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body { background: #000; width: 100%; height: 100%; margin: 0; }
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

/* global d3 */
d3.selection.prototype.now = function(tagName, maker) {
    var key = function(v) { return v; };
    var selection = this.selectAll(tagName)
        .data(this.data()[0], key);
    selection.enter().append(tagName);
    selection.exit().remove();
    selection.each(function(d) {
        maker(d3.select(this), d);
    });
    return this;
};


var width = document.body.clientWidth,
    height = document.body.clientHeight,
    radius = 30 + Math.random() * 60;

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

while (sample = sampler()) samples.push([sample[0] - radius, sample[1] - radius]);

var voronoi = d3.geom.voronoi()
    .clipExtent([[-1, -1], [width + 1, height + 1]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.timer(function(elapsed) {
  var offset = Math.random() / 10;
  svg
    .datum(voronoi.triangles(samples).map(d3.geom.polygon))
    .now("path", function(element) {
      element
        .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
        .style("fill", function(d) { return color(d.centroid()); })
        .style("stroke", function(d) { return color(d.centroid()); });
    });

  function color(d) {
    var dx = (d[0] - width / 2) / height,
        dy = (d[1] - height / 2) / height;
    var denom = (1 + Math.sin(Math.PI + elapsed / 800));
    var a = dx * 100 + 20*Math.sin(Math.PI + elapsed / 2700);
    var b = dy * 100 + 20*Math.sin(Math.PI + elapsed / 1800);
    return d3.lab(100 - 500 * (dx * dx + dy * dy) / denom, a, b);
  }
});

// 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	html, body { background: #000; width: 100%; height: 100%; margin: 0; }
	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>

	/* global d3 */
	d3.selection.prototype.now = function(tagName, maker) {
	var key = function(v) { return v; };
	var selection = this.selectAll(tagName)
	.data(this.data()[0], key);
	selection.enter().append(tagName);
	selection.exit().remove();
	selection.each(function(d) {
	maker(d3.select(this), d);
	});
	return this;
	};


	var width = document.body.clientWidth,
	height = document.body.clientHeight,
	radius = 30 + Math.random() * 60;

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

	while (sample = sampler()) samples.push([sample[0] - radius, sample[1] - radius]);

	var voronoi = d3.geom.voronoi()
	.clipExtent([[-1, -1], [width + 1, height + 1]]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.timer(function(elapsed) {
	var offset = Math.random() / 10;
	svg
	.datum(voronoi.triangles(samples).map(d3.geom.polygon))
	.now("path", function(element) {
	element
	.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
	.style("fill", function(d) { return color(d.centroid()); })
	.style("stroke", function(d) { return color(d.centroid()); });
	});

	function color(d) {
	var dx = (d[0] - width / 2) / height,
	dy = (d[1] - height / 2) / height;
	var denom = (1 + Math.sin(Math.PI + elapsed / 800));
	var a = dx * 100 + 20*Math.sin(Math.PI + elapsed / 2700);
	var b = dy * 100 + 20*Math.sin(Math.PI + elapsed / 1800);
	return d3.lab(100 - 500 * (dx * dx + dy * dy) / denom, a, b);
	}
	});

	// 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>