fundamental and harmonics

_.md

[ Launch: fundamental and harmonics ] 5179412 by tylerkahn
[ Launch: zeffii default ] 5100062 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"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"}

inlet.js

// fundamental and harmonics.
var TAU = Math.PI * 2;
var amplitude = 1;
var num_overtones = 16; // 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; }));
  
  group.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
      .attr("y", -4)
      .attr("x", width + 28)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Time");
  
  group.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -59)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Amplitude");

}
    
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  */

style.css

.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;
}