Instantly share code, notes, and snippets.

@eauio /index.html
Last active Oct 15, 2016

Embed
What would you like to do?
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