Skip to content

Instantly share code, notes, and snippets.

@eauio
Last active October 15, 2016 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eauio/12609d241fe492a80e8d27d506a1884c to your computer and use it in GitHub Desktop.
Save eauio/12609d241fe492a80e8d27d506a1884c to your computer and use it in GitHub Desktop.
Voronoi with Music

Synopsis

Introducing html5 music audio playout code with D3js to render as art.

Motivation

Music artist code build

Installation

Run it by replacing url element [gist.github.com] with [bl.ocks.org] thus: https://bl.ocks.org/eauio/12609d241fe492a80e8d27d506a1884c

Tests

Proceeds by including URL to (loopable) music media file in the manifest

Contributors

Acknowledge or share music and gist through https://twitter.com/@EAU0 or #codevideo. https://github.com/mbostock for D3js and Voronoi code

License

Released under the GNU General Public License, version 3.

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="960"></canvas>
<audio src="http://eauo.org/antonymy.mp3" type="audio/mpeg" autoplay loop></audio>
<script src="https://d3js.org/d3.v4.0.0-alpha.28.min.js"></script>
<script>
var canvas = d3.select("canvas").node(),
context = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
var sites = d3.range(100).map(function() { return [Math.random() * width, Math.random() * height]; }),
cells = d3.voronoi().size([width, height]).polygons(sites),
formatHex = d3.format("02x");
var colors = d3.range(256)
.map(d3.scaleRainbow().domain([0, 255]))
.map(function(c) { return d3.rgb(c); });
for (var i = 0; i < 256; ++i) {
context.beginPath();
cells.forEach(function(cell) {
drawCell(cell);
var p0 = cell.shift(),
p1 = cell[0],
t = Math.min(0.5, 4 / distance(p0, p1)),
p2 = [p0[0] * (1 - t) + p1[0] * t, p0[1] * (1 - t) + p1[1] * t];
cell.push(p2);
});
context.fillStyle = "#" + formatHex(i) + "0000";
context.fill();
}
var source = context.getImageData(0, 0, width, height).data,
targetBuffer = context.createImageData(width, height),
target = targetBuffer.data;
for (var i = 0, y = 0; y < height; ++y) {
for (var x = 0; x < width; ++x, i += 4) {
target[i + 0] =
target[i + 1] =
target[i + 2] =
target[i + 3] = 255;
}
}
context.clearRect(0, 0, width, height);
d3.timer(function(elapsed) {
for (var i = 0, y = 0; y < height; ++y) {
for (var x = 0; x < width; ++x, i += 4) {
var c = colors[Math.floor(source[i] + elapsed / 10) % 256];
target[i + 0] = c.r;
target[i + 1] = c.g;
target[i + 2] = c.b;
}
}
context.putImageData(targetBuffer, 0, 0);
});
function drawCell(cell) {
context.moveTo(cell[0][0], cell[0][1]);
for (var i = 1, n = cell.length; i < n; ++i) context.lineTo(cell[i][0], cell[i][1]);
context.closePath();
}
function distance(a, b) {
var dx = a[0] - b[0], dy = a[1] - b[1];
return Math.sqrt(dx * dx + dy * dy);
}
</script>
license gpl-3.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment