Last active
June 5, 2017 14:32
-
-
Save pashute/1ee2f6cab5c353cefa14d22368936a3d to your computer and use it in GitHub Desktop.
CircleSound
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> | |
<html> | |
<head> | |
<style type="text/css"> | |
* { | |
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; | |
font-size:13px; | |
} | |
circle { | |
fill-opacity: .8; | |
} | |
</style> | |
</head> | |
<body> | |
<audio id="aud0" preload="none"> | |
<source src="tones/Piano_pp_C3.mp3"></source> | |
</audio> | |
<audio id="aud1" preload="none"> | |
<source src="tones/Piano_pp_Db3.mp3"></source> | |
</audio> | |
<audio id="aud2" preload="none"> | |
<source src="tones/Piano_pp_D3.mp3"></source> | |
</audio> | |
<audio id="aud3" preload="none"> | |
<source src="tones/Piano_pp_Eb3.mp3"></source> | |
</audio> | |
<audio id="aud4" preload="none"> | |
<source src="tones/Piano_pp_E3.mp3"></source> | |
</audio> | |
<audio id="aud5" preload="none"> | |
<source src="tones/Piano_pp_F3.mp3"></source> | |
</audio> | |
<audio id="aud6" preload="none"> | |
<source src="tones/Piano_pp_Gb3.mp3"></source> | |
</audio> | |
<audio id="aud7" preload="none"> | |
<source src="tones/Piano_pp_G3.mp3"></source> | |
</audio> | |
<audio id="aud8" preload="none"> | |
<source src="tones/Piano_pp_Ab4.mp3"></source> | |
</audio> | |
<audio id="aud9" preload="none"> | |
<source src="tones/Piano_pp_A4.mp3"></source> | |
</audio> | |
<audio id="aud10" preload="none"> | |
<source src="tones/Piano_pp_Bb4.mp3"></source> | |
</audio> | |
<audio id="aud11" preload="none"> | |
<source src="tones/Piano_pp_B4.mp3"></source> | |
</audio> | |
<form> | |
<label for="radius">Radius:</label> | |
<input type="text" id="radius" name="radius" value=150> | |
<label for="numNodes">Number of elements:</label> | |
<input type="text" id="numNodes" name="radius" value=12> | |
<button id="btn1" onclick="playsound()">play</button> | |
<p /> | |
<a href="http://bl.ocks.org/bycoffe/3404776">Thanks to blocks.org for circle code</a> | |
<a href="https://www.freesound.org/people/Tesabob2001/sounds/"> Thanks Tesabob for sounds!</a> | |
</form> | |
<p /> | |
<div id="canvas"></div> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script> | |
<script type="text/javascript"> | |
var lastaudid = '#aud0'; | |
(function() { | |
// a small addition to the code... | |
var notenames = ['1.do', '2_', '3.re', '4_', '5.mi', '6.fa', '7_', '8.sol', '9_', 'J.la','a_', 'b.si']; | |
var createNodes = function (numNodes, radius) { | |
var nodes = [], | |
width = (radius * 2) + 50, | |
height = (radius * 2) + 50, | |
angle, | |
x, | |
y, | |
i; | |
for (i=0; i<numNodes; i++) { | |
angle = (i / (numNodes/2)) * Math.PI; // Calculate the angle at which the element will be placed. | |
// For a semicircle, we would use (i / numNodes) * Math.PI. | |
x = (radius * Math.cos(angle)) + (width/2); // Calculate the x position of the element. | |
y = (radius * Math.sin(angle)) + (width/2); // Calculate the y position of the element. | |
nodes.push({'id': i, 'x': x, 'y': y}); | |
} | |
return nodes; | |
} | |
var createSvg = function (radius, callback) { | |
d3.selectAll('svg').remove(); | |
var svg = d3.select('#canvas').append('svg:svg') | |
.attr('width', (radius * 2) + 50) | |
.attr('height', (radius * 2) + 50); | |
callback(svg); | |
} | |
// here's where I changed the code!! | |
var createElements = function (svg, nodes, elementRadius) { | |
circleGroup = svg.selectAll('g') | |
.data(nodes); | |
circleGroup.enter() | |
.append('svg:g') | |
.attr('transform', function(d, i) { | |
return 'translate(' + d.x + ',' + d.y + ')'; | |
}) | |
.attr('gnum', function(d, i) { return d.id; }) | |
.attr('id', function(d, i) { return 'g' + d.id; }); | |
circle = circleGroup | |
.append('svg:circle') | |
.attr('r', elementRadius) | |
.attr('id', function (d, i) { | |
return 'c' + d.id; | |
}) | |
.attr('onclick', function (d, i) { | |
return 'playsound(' + d.id + ')'; | |
}) | |
.attr('fill', function (d, i) { | |
if (d.id == null) return 'red'; | |
if (notenames[d.id].indexOf("_") > -1) | |
return 'lightgreen'; | |
return 'steelblue'; | |
/*return //'lightgreen'; | |
notenames[d.id]).indexOf("_") > -1) | |
? 'lightgreen' | |
: 'steelblue'; | |
*/ | |
}) | |
; | |
text = circleGroup | |
.append('text') | |
.text( function (d, i) { | |
return notenames[d.id]; | |
}) | |
.attr('fill', 'black') | |
.attr('font-family','sans-serif') | |
.attr('font-size','20px') | |
.attr('text-anchor','middle') | |
; | |
} | |
var draw = function () { | |
var numNodes = $("#numNodes").val() || 12; | |
var radius = $("#radius").val() || 40; | |
var nodes = createNodes(numNodes, radius); | |
createSvg(radius, function (svg) { | |
createElements(svg, nodes, 20); | |
}); | |
} | |
$(document).ready(function() { | |
draw(); | |
}); | |
$("#radius, #numNodes").bind('keyup', function(e) { | |
draw(); | |
}); | |
})(); | |
function playsound(id){ | |
var lastaud = $(lastaudid); | |
if (!lastaud.paused) | |
lastaud[0].pause(); | |
lastaudid = '#aud' + id; | |
var audid = '#aud' + id; | |
var aud = $(audid); | |
aud[0].play(); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment