Skip to content

Instantly share code, notes, and snippets.

@enjalot
Last active November 24, 2015 19:35
Show Gist options
  • Save enjalot/ddbbb63bde26d54f627e to your computer and use it in GitHub Desktop.
Save enjalot/ddbbb63bde26d54f627e to your computer and use it in GitHub Desktop.
Breathing Color Mesh: Badge
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment