Skip to content

Instantly share code, notes, and snippets.

@tylerkahn
Created March 17, 2013 19:20
Show Gist options
  • Save tylerkahn/5183149 to your computer and use it in GitHub Desktop.
Save tylerkahn/5183149 to your computer and use it in GitHub Desktop.
fundamental and harmonics
{"description":"fundamental and harmonics","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ieCrgTg.gif"}
// fundamental and harmonics.
var TAU = Math.PI * 2;
var amplitude = 1;
var num_overtones = 8; // change this
d3.select("body").style("background-color", d3.rgb(240,240,240))
var svg = d3.select("svg");
var defs = svg.append("defs");
var group1 = svg.append("g").classed("group1", true);
var group2 = svg.append("g").classed("group2", true);
group1.attr("transform", "translate(" + [131, 150] + ")")
group2.attr("transform", "translate(" + [131, 389] + ")")
//
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 560 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height*2, 0]);
var y2 = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var segments = 124;
var frequencies = harmonic_series(num_overtones, amplitude);
var data1 = frequencies[0].data;
var summed_frequencies = summed(frequencies);
make_graph(frequencies, group1)
make_graph(summed_frequencies, group2)
/* helpers */
function harmonic_series(n, amp) {
var a = [];
for (var i = 1; i <= n; ++i) {
a.push({data:make_wave(amp/i, TAU*i)});
}
return a;
}
function make_graph(frequencies, group){
var color = d3.scale.category20();
var i = 0;
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y2(d.y); });
frequencies.forEach(function(d){
group.append("path")
.datum(d.data)
.attr("class", "line")
.attr("d", line)
.style("stroke", color(i++))
.style("stroke-width", 2.8)
.style("fill", "none")
})
x.domain(d3.extent(data1, function(d) { return d.x; }));
y.domain(d3.extent(data1, function(d) { return d.y; }));
}
function make_wave(amp, period){
var m_array = [];
var seg_size = period / segments;
for (var i = 0; i <= segments; i += 1){
var pos = {
x: i*seg_size/period,
y: Math.sin(seg_size * i)*amp};
m_array.push(pos)
}
return m_array;
}
function summed(f_array){
var num_frequencies = f_array.length;
var m_array = [];
var array_max = 0;
// sum the arrays
for (var i = 0; i <= segments; i += 1){
var _sum = 0;
for (var j = 0; j < num_frequencies; j += 1){
_sum += ((f_array[j].data[i].y) / num_frequencies)
}
if (_sum > array_max) array_max = _sum
var pos = {
x: f_array[0].data[i].x,
y: _sum
};
m_array.push(pos)
}
// normalize the array
var normalized_array = [];
for (var n = 0; n <= segments; n += 1){
normalized_array.push({
x: m_array[n].x,
y: m_array[n].y / array_max
})
}
return [{data:normalized_array, color: "#A5A5A5"}]
//return [{data:m_array, color: "#A5A5A5"}]
}
/* EOF */
.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969; }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
body {
font: 11px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment