JavaScript - 幾何学 - ユークリッド互除法(長方形(と正方形)をくるくる回す)( @hyuki )結城浩さんのツイートより

JavaScript 第6版
原著

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• 参考書籍
  • JavaScriptリファレンス 第6版
  • インタラクティブ・データビジュアライゼーション

金曜日は『数学ガールの秘密ノート』の日。最新回は一週間無料で読めます。公式RTしてから読みにいってね！
「整数に誘われて」第3章　ユークリッドの互除法（後編）https://t.co/GWiElwhykk

— 結城浩 (@hyuki) 2017年5月25日

ユークリッドの互除法（後編）｜数学ガールの秘密ノートの 《全体像》、《旅の地図》を、座標平面の平面上の点(m, n)がどう動くかではなく、最小公倍数と最大公約数の長方形と正方形みたいに、長方形(と正方形)で見えるようにしてみた。(各長方形の辺の長さに注目。)

コード(Emacs)

HTML5

<div id="graph0"></div>
<pre id="output0"></pre>
<label for="m0">m = </label><input id="m0" min="0" step="1" type="number" value="55">
<label for="n0">n = </label><input id="n0" min="1" step="1" type="number" value="89">
<button id="draw0">draw</button>
<button id="clear0">clear</button>

<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="sample11.js"></script>    

JavaScript

let div0 = document.querySelector('#graph0'),
    pre0 = document.querySelector('#output0'),
    width = 600,
    height = 600,
    padding = 50,
    btn0 = document.querySelector('#draw0'),
    btn1 = document.querySelector('#clear0'),
    input_m = document.querySelector('#m0'),
    input_n = document.querySelector('#n0'),
    inputs = [input_m, input_n],
    p = (x) => pre0.textContent += x + '\n',
    range = (start, end, step=1) => {
        let result = [];
        for (let i = start; i < end; i += step) {
            result.push(i);
        }
        return result;
    };

let draw = () => {
    pre0.textContent = '';    
    
    let m = parseInt(input_m.value, 10),
        n = parseInt(input_n.value, 10),
        d = Math.max(m, n);

    let lines =
        range(1, d + 1)
        .map((x) => [[x, 0], [x, d]])
        .concat(range(1, d + 1)
                .map((y) => [[0, y], [d, y]]));
    let t = lines.length;
    
    lines = lines.concat([[[n, m], [0, m]],
                          [[0, m], [0, 0]],
                          [[0, 0], [n, 0]],
                          [[n, 0], [n, m]]]);

    let n0 = n;
    p(`(${m}, ${n})`);
    for (let i = t + 2; true; i += 2) {
        let r = n % m,
            i0 = ((i - t) / 2) % 4;
        
        let [[x01, y01], [x02, y02]] = lines[i],
            [[x11, y11], [x12, y12]] = lines[i + 1];

        if (r === 0) {
            r = m;
        }
        if (i0 === 1) {
            lines.push([[x12 - r, y12], [x11 - r, y11]]);
            lines.push([[x02 - r, y01], [x02, y02]]);
        } else if (i0 === 2) {
            lines.push([[x12, y12 + r], [x11, y11 + r]]);
            lines.push([[x01, y02 + r], [x02, y02]]);
        } else if (i0 === 3) {
            lines.push([[x12 + r, y12], [x11 + r, y11]]);
            lines.push([[x02 + r, y01], [x02, y02]]);
        } else {
            lines.push([[x12, y12 - r], [x11, y11 - r]]);
            lines.push([[x01, y02 - r], [x02, y02]]);
        }
        if (r === m) {
            p(`(${0}, ${m})`);
            break;
        }
        n = m
        m = r;
        p(`(${m}, ${n})`);
    }

    let xscale = d3.scaleLinear()
        .domain([0, d])
        .range([padding, width - padding]);
    let yscale = d3.scaleLinear()
        .domain([0, d])
        .range([height - padding, padding]);

    let xaxis = d3.axisBottom().scale(xscale);
    let yaxis = d3.axisLeft().scale(yscale);
    div0.innerHTML = '';
    let svg = d3.select('#graph0')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    svg.selectAll('line')
        .data(lines)
        .enter()
        .append('line')
        .attr('x1', (d) => xscale(d[0][0]))
        .attr('y1', (d) => yscale(d[0][1]))
        .attr('x2', (d) => xscale(d[1][0]))
        .attr('y2', (d) => yscale(d[1][1]))
        .attr('stroke', (d, i) => i < t ? 'lightgray' : 'green');
        
    svg.append('g')
        .attr('transform', `translate(0, ${height - padding})`)
        .call(xaxis);

    svg.append('g')
        .attr('transform', `translate(${padding}, 0)`)
        .call(yaxis);
}
let clear = () => pre0.textContent = '';

inputs.forEach((input) => input.onchange = draw);
btn0.onclick = draw;
btn1.onclick = clear;
draw();

m = n =