Last active
June 13, 2020 23:11
-
-
Save mbostock/5723d93e4f617b542991 to your computer and use it in GitHub Desktop.
Arc Piano
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <style> | |
| .key { | |
| stroke-width: 1.5px; | |
| transition: fill 250ms linear, stroke 250ms linear; | |
| transition-delay: 150ms; | |
| } | |
| .key:hover { | |
| transition-delay: 0; | |
| } | |
| .key--white { fill: #fff; stroke: #777; } | |
| .key--black { fill: #333; stroke: #000; } | |
| .key--white:hover { fill: cyan; stroke: #00999b; } | |
| .key--black:hover { fill: magenta; stroke: #910099; } | |
| </style> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| outerRadius = (height - 60), | |
| innerRadius = outerRadius / 2.4, | |
| g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + (height - 40) + ")"); | |
| var over = "ontouchstart" in window ? "touchstart" : "mouseover", | |
| out = "ontouchstart" in window ? "touchend" : "mouseout"; | |
| var pie = d3.pie() | |
| .startAngle(-Math.PI / 2) | |
| .endAngle(Math.PI / 2) | |
| .padAngle(0.01) | |
| .value(function() { return 1; }) | |
| .sort(null); | |
| var arc = d3.arc() | |
| .cornerRadius(4) | |
| .padRadius(outerRadius) | |
| .innerRadius(function(d) { return d.sharp ? innerRadius + 80 : innerRadius; }); | |
| var key = g.selectAll("path") | |
| .data(sharpen(pie(repeat(["C", "D", "E", "F", "G", "A", "B"])))) | |
| .enter().append("path") | |
| .each(function(d, i) { d.outerRadius = outerRadius - 20; }) | |
| .attr("class", function(d) { return "key key--" + (d.sharp ? "black" : "white"); }) | |
| .attr("d", arc) | |
| .on(over, arcTween(outerRadius, 0)) | |
| .on(out, arcTween(outerRadius - 20, 150)); | |
| function arcTween(outerRadius, delay) { | |
| return function() { | |
| d3.event.preventDefault(); | |
| d3.select(this).transition().delay(delay).attrTween("d", function(d) { | |
| var i = d3.interpolate(d.outerRadius, outerRadius); | |
| return function(t) { d.outerRadius = i(t); return arc(d); }; | |
| }); | |
| }; | |
| } | |
| function repeat(notes) { | |
| return notes.concat(notes, notes[0]); | |
| } | |
| function sharpen(keys) { | |
| var keyWidth = Math.PI / keys.length; | |
| for (var i = 0, n = keys.length - 1, k; i < n; ++i) { | |
| if (/[CDFGA]/.test((k = keys[i]).data)) { | |
| keys.splice(++i, 0, { | |
| startAngle: k.startAngle + keyWidth * 0.65, | |
| endAngle: k.endAngle + keyWidth * 0.35, | |
| padAngle: k.padAngle, | |
| sharp: true | |
| }); | |
| ++n; | |
| } | |
| k.sharp = false; | |
| } | |
| for (var i = 0, n = keys.length; i < n; ++i) { | |
| keys[i].frequency = 440 * Math.pow(2, (i - 9) / 12); // 0 is middle C | |
| } | |
| return keys.sort(function(a, b) { return a.sharp - b.sharp; }); | |
| } | |
| (function() { | |
| var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext; | |
| if (!AudioContext) return console.error("AudioContext not supported"); | |
| if (!OscillatorNode.prototype.start) OscillatorNode.prototype.start = OscillatorNode.prototype.noteOn; | |
| if (!OscillatorNode.prototype.stop) OscillatorNode.prototype.stop = OscillatorNode.prototype.noteOff; | |
| var context = new AudioContext; | |
| key.on(over + ".beep", function(d, i) { | |
| var now = context.currentTime, | |
| oscillator = context.createOscillator(), | |
| gain = context.createGain(); | |
| oscillator.type = "square"; | |
| oscillator.frequency.value = d.frequency; | |
| gain.gain.linearRampToValueAtTime(0, now); | |
| gain.gain.linearRampToValueAtTime(.6, now + .1); | |
| gain.gain.linearRampToValueAtTime(0, now + 1); | |
| oscillator.connect(gain); | |
| gain.connect(context.destination); | |
| oscillator.start(0); | |
| setTimeout(function() { oscillator.stop(); }, 1500); | |
| }); | |
| })(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment