Sample is best!
Sample is best!
開発環境 メモ帳
実行環境 Internet Explorer 11


svgFourierSeries.html 
<!doctype html>
<head>
<title>svgFourierSeries</title>
</head>
 
<body>
<svg id="svg" width=360 height=200 overflow="hidden"></svg><br>
<br>
<textarea id="ta" cols=80 rows=10></textarea>
<script>
 
const N = 9;
 
var svg;
 
main();
 
function f(x)
{
//	return Math.sin(2 * Math.PI * x) / 2;
	return (x < 0.5) ? 0.5 : -0.5;
}
 
function main()
{
	svg = document.getElementById("svg");
	var width = svg.getAttribute("width");
	var height_2 = Math.floor(svg.getAttribute("height") / 2);
 
	// 係数計算
	var a = [];	// フーリエ余弦係数
	var b = [];	// フーリエ正弦係数
	for (var n = 0; n <= N; n++) {
		a[n] = 0;
		b[n] = 0;
	}
 
	var src = [];	// 元の波形 source waveform
	for (var i = 0; i < width; i++) {
		var x = i / width;
		var y = f(x);
		for (var n = 0; n <= N; n++) {
			var nx = n * (2 * Math.PI * x);
			a[n] += y * Math.cos(nx);
			b[n] += y * Math.sin(nx);
		}
		src.push(i + "," + Math.round(height_2 - y * height_2));
	}
 
	var str = "";
	for (var n = 0; n <= N; n++) {
		a[n] /= 180;
		b[n] /= 180;
		str += "a" + n + "=" + a[n].toFixed(3) + ", b" + n + "=" + b[n].toFixed(3) + "\n";
	}
	var ta = document.getElementById("ta");
	ta.value = str;
 
	// 波形の合成
	var syn = [];	// 合成波形 synthesized waveform
	for (var i = 0; i < width; i++) {
		var x = i / width;
		var y = a[0] / 2;
		for (var n = 1; n <= N; n++) {
			var nx = n * (2 * Math.PI * x);
			y += a[n] * Math.cos(nx) + b[n] * Math.sin(nx);
		}
		syn.push(i + "," + Math.round(height_2 - y * height_2));
	}
 
	// グラフ描画
	append("line", {x1:0, y1:height_2, x2:width, y2:height_2, stroke:"#000"});
	append("polyline", {points:src.join(" "), stroke:"#f00", fill:"none"});
	append("polyline", {points:syn.join(" "), stroke:"#00f", fill:"none"});
}
 
function append(type, attr)
{
	var e = document.createElementNS("http://www.w3.org/2000/svg", type);
	for (var n in attr) {
		e.setAttribute(n, attr[n]);
	}
	svg.appendChild(e);
}
 
</script>
</body>
 
「svgFourierSeries」をウィキ内検索
最終更新：2014年11月15日 17:19