JavaScript - 簡単！炎上のさせ方講座( @ttk_vim 、 @jagarikin )Tatsuki@HaskellでVimさん、じゃがりきんさんのツイートより

インタラクティブ・データビジュアライゼーション
原著

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• 参考書籍
  • JavaScriptリファレンス 第6版

これHaskellでやりたい https://t.co/tHlTar3K8v

— Tatsuki@HaskellでVim (@ttk_vim) 2017年8月8日

～簡単！炎上のさせ方講座～ pic.twitter.com/fKSOXj1Xeb

— じゃがりきん (@jagarikin) 2017年8月7日

D3.js(JavaScript、SVG)で炎上させてみた。

SVGを使うD3.js を利用してコードを書いてみたものの、このような用途では SVGよりも Canvas(さらにライブラリを利用した場合はPaper.js等)の方が向いてそう。

コード(Emacs)

HTML5

<div id="graph0"></div>
<pre id="output0"></pre>
<label for="t0">t = </label>
<input id="t0" type="number" min="0" value="100"> ms(ミリ秒)
<br>
<label for="r0">r = </label>
<input id="r0" type="number" min="0" value="10">
<label for="m0">m = </label>
<input id="m0" min="1" step="1" type="number" value="100">
<label for="n0">n = </label>
<input id="n0" min="1" step="1" type="number" value="100">

<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="sample14.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_r = document.querySelector('#r0'),
    input_t = document.querySelector('#t0'),
    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 r = parseFloat(input_r.value),
        m = parseInt(input_m.value, 10),
        n = parseInt(input_n.value, 10),
        average3 = (x, y) => {
            let k = (y * n) + x;
            
            if (x === 0) {
                return [x, y,
                        Math.floor((points[k - 1][2] +
                                    points[k - n][2] +
                                    points[k - (n - 1)][2]) / 3)];
            }
            if (x === n - 1) {
                return [x, y,
                        Math.floor((points[k - (n + 1)][2] +
                                    points[k - n][2] +
                                    points[k - (2 * n - 1)][2]) / 3)];
            }
            return [x, y,
                    Math.floor((points[k - (n + 1)][2] +
                                points[k - n][2] +
                                points[k - (n - 1)][2]) / 3)];
        },
        average4 = (x, y) => {
            let k = (y * n) + x;
            
            if (x === 0) {
                return [x, y,
                        Math.floor((points[k - 1][2] +
                                    points[k - n][2] +
                                    points[k - (n - 1)][2] +
                                    points[k - 2 * n][2]) / 4)];
            }
            if (x === n - 1) {
                return [x, y,
                        Math.floor((points[k - (n + 1)][2] +
                                    points[k - n][2] +
                                    points[k - (2 * n - 1)][2] +
                                    points[k - 2 * n][2]) / 4)];
            }
            return [x, y,
                    Math.floor((points[k - (n + 1)][2] +
                                points[k - n][2] +
                                points[k - (n - 1)][2] +
                                points[k - 2 * n][2]) / 4)];
            
        },
        points = [];

    range(0, m)
        .forEach((y) =>
                 range(0, n)
                 .forEach((x) => {
                     if (y === 0) {
                         points.push([x, y,
                                      Math.floor(Math.random() * 256)]);
                     } else if (y === 1) {
                         points.push(average3(x, y));
                     } else {
                         points.push(average4(x, y));
                     }                     
                 }));

    let xscale = d3.scaleLinear()
        .domain([0, n])
        .range([padding, width - padding]);
    let yscale = d3.scaleLinear()
        .domain([0, m])
        .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('circle')
        .data(points)
        .enter()
        .append('circle')
        .attr('cx', (d) => xscale(d[0]))
        .attr('cy', (d) => yscale(d[1]))
        .attr('r', r)
        .attr('fill', (d) => `rgba(${d[2]}, 0, 0, 0.5)`);

};
let tm;
let output = () => {
    tm = setInterval(draw, parseFloat(input_t.value));
};
let clear = () => pre0.textContent = '';

graph0.onclick = () => {
    if (tm) {
        clearInterval(tm);
        tm = null;
    } else {
        output();
    }
};
inputs.forEach((input) => input.onchange = () => {
    if (tm) {
        clearInterval(tm);
        tm = null;
    }
    output();
});
output();

t = ms(ミリ秒)
r = m = n =