Introducing html5 music audio playout code with D3js to render as art.
Music artist code build
Run it by replacing url element [gist.github.com] with [bl.ocks.org] thus: https://bl.ocks.org/eauio/be48d6eb60fb0454f7c8a8bfc17fa2fb
Proceeds by including URL to music media files in the manifest
Acknowledge or share music and gist through https://twitter.com/@EAU0 or #codevideo. https://github.com/mbostock for D3js code
Released under the GNU General Public License, version 3.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| background: #111; | |
| min-width: 960px; | |
| } | |
| </style> | |
| <body> | |
| <audio src="http://eauo.org/chaconne_one.mp3" type="audio/mpeg" autoplay loop></audio> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = Math.max(960, innerWidth), | |
| height = Math.max(500, innerHeight); | |
| var x1 = width / 2, | |
| y1 = height / 2, | |
| x0 = x1, | |
| y0 = y1, | |
| i = 0, | |
| r = 200, | |
| τ = 2 * Math.PI; | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .on("ontouchstart" in document ? "touchmove" : "mousemove", move); | |
| var context = canvas.node().getContext("2d"); | |
| context.globalCompositeOperation = "lighter"; | |
| context.lineWidth = 2; | |
| d3.timer(function() { | |
| context.clearRect(0, 0, width, height); | |
| var z = d3.hsl(++i % 360, 1, .5).rgb(), | |
| c = "rgba(" + z.r + "," + z.g + "," + z.b + ",", | |
| x = x0 += (x1 - x0) * .1, | |
| y = y0 += (y1 - y0) * .1; | |
| d3.select({}).transition() | |
| .duration(2000) | |
| .ease(Math.sqrt) | |
| .tween("circle", function() { | |
| return function(t) { | |
| context.strokeStyle = c + (1 - t) + ")"; | |
| context.beginPath(); | |
| context.arc(x, y, r * t, 0, τ); | |
| context.stroke(); | |
| }; | |
| }); | |
| }); | |
| function move() { | |
| var mouse = d3.mouse(this); | |
| x1 = mouse[0]; | |
| y1 = mouse[1]; | |
| d3.event.preventDefault(); | |
| } | |
| </script> |
| license gpl-3.0 |