開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- D3.js (JavaScript Library)
- Safari(Web browser)
- 参考書籍
- JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
- JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)
- インタラクティブ・データビジュアライゼーション(Scott Murray (著)、長尾 高弘 (翻訳)、オライリージャパン)
素数夜曲 (吉田 武 (著)、東海大学出版会)の付録D(女王陛下のLISP)、D.7(連分数・円周率・ベルヌーイ数)、D.7.1(連分数による無理数の定義)、正多角形と円周率を JavaScript で取り組んでみる。
コード(Emacs)
HTML5
<div id="graph0"></div> 円数率(π)の近似: <span id="output0"></span> <br> <label for="n0">n = </label> <input id="n0" type="number" min="0" step="1" value="0"> (6 + n 角形) <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js" integrity="sha256-5idA201uSwHAROtCops7codXJ0vja+6wbBrZdQ6ETQc=" crossorigin="anonymous"></script> <script src="sample10.js"></script>
JavaScript
{ let div_graph = document.querySelector('#graph0'), svg, width = 600, height = 600, r = 300, input_n = document.querySelector('#n0'), div_output = document.querySelector('#output0'); xscale = d3.scaleLinear() .domain([-300, 300]) .range([0, 600]); yscale = d3.scaleLinear() .domain([-300, 300]) .range([600, 0]); let pi_gon = (n) => { let gon = (n) => { if (n === 0) { return 1; } return Math.sqrt(2 - Math.sqrt(4 - Math.pow(gon(n - 1), 2))); }; return 3 * Math.pow(2, n) * gon(n); }; let points = (n) => { let result = [], a = 2 * Math.PI / n; for (let i = 0; i < Math.PI * 2; i += a) { result.push([r * Math.cos(i), r * Math.sin(i)]); } return result; }; let output = () => { let n = parseInt(input_n.value, 10), a = 6 + n, ps = points(a); div_graph.innerHTML = ''; svg = d3.select('#graph0') .append('svg') .attr('width', width) .attr('height', height); console.log(ps.length); svg.selectAll('line') .data(ps.slice(0, -1)) .enter() .append('line') .attr('x1', (d) => xscale(d[0])) .attr('y1', (d) => yscale(d[1])) .attr('x2', (d, i) => xscale(ps[i + 1][0])) .attr('y2', (d, i) => yscale(ps[i + 1][1])) .attr('stroke', 'blue'); svg.append('circle') .attr('cx', xscale(0)) .attr('cy', yscale(0)) .attr('r', xscale(300) - xscale(0)) .attr('fill', 'rgba(0, 255, 0, 0.1)'); div_output.innerHTML = pi_gon(n); }; input_n.onchange = output; output(); }円数率(π)の近似:
(6 + n 角形)
0 コメント:
コメントを投稿