dev001hajipro/cellular_automaton_rule30.js

## cellular_automaton_rule30.js
function initCanvas(w, h) {
    var canvas = document.getElementById("myCanvas");
    canvas.width = w;
    canvas.height = h;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    return canvas.getContext('2d');
}

function main() {
    var maxRows = 600;
    var maxColumns = 600;
    var ctx = initCanvas(maxRows,maxColumns);

    // 初期設定
    var cells = new Array(maxRows);
    for (var i = 0; i < maxColumns; i++) {
        cells[i] = new Array(maxColumns).fill(0);
    }
    cells[0][maxColumns/2] = 1;

    // 画面クリア
    ctx.fillStyle = "rgba(255,255,255,1)";
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    rule = [0,0,0,1,1,1,1,0];

    var boxSize = 1;
    for (var t = 0; t < maxRows; t++) {
        for (var x = 0; x < maxColumns; x++) {
            // 計算
            if (t > 0) {
                var l = (x+maxColumns-1) % maxColumns;
                var r = (x+1) % maxColumns;

                var code = cells[t-1][l] * 4 + cells[t-1][x] * 2 + cells[t-1][r] * 1;
                cells[t][x] = rule[7-code];
            }
            // 描画
            if (cells[t][x] == 1) {
                ctx.fillStyle = "rgba(0,0,0, 1)";
                ctx.fillRect(x * boxSize, t * boxSize, boxSize, boxSize);
            }
        }
    }
}

main();

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rule30 - Cellular Automaton</title>
</head>
<body style="margin:0;padding:0">
    <canvas id="myCanvas"></canvas>
    <script src="cellular_automaton_rule30.js"></script>
</body>
</html>
	function initCanvas(w, h) {
	var canvas = document.getElementById("myCanvas");
	canvas.width = w;
	canvas.height = h;
	canvas.style.width = w + "px";
	canvas.style.height = h + "px";
	return canvas.getContext('2d');
	}

	function main() {
	var maxRows = 600;
	var maxColumns = 600;
	var ctx = initCanvas(maxRows,maxColumns);

	// 初期設定
	var cells = new Array(maxRows);
	for (var i = 0; i < maxColumns; i++) {
	cells[i] = new Array(maxColumns).fill(0);
	}
	cells[0][maxColumns/2] = 1;

	// 画面クリア
	ctx.fillStyle = "rgba(255,255,255,1)";
	ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

	rule = [0,0,0,1,1,1,1,0];

	var boxSize = 1;
	for (var t = 0; t < maxRows; t++) {
	for (var x = 0; x < maxColumns; x++) {
	// 計算
	if (t > 0) {
	var l = (x+maxColumns-1) % maxColumns;
	var r = (x+1) % maxColumns;

	var code = cells[t-1][l] * 4 + cells[t-1][x] * 2 + cells[t-1][r] * 1;
	cells[t][x] = rule[7-code];
	}
	// 描画
	if (cells[t][x] == 1) {
	ctx.fillStyle = "rgba(0,0,0, 1)";
	ctx.fillRect(x * boxSize, t * boxSize, boxSize, boxSize);
	}
	}
	}
	}

	main();
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Rule30 - Cellular Automaton</title>
	</head>
	<body style="margin:0;padding:0">
	<canvas id="myCanvas"></canvas>
	<script src="cellular_automaton_rule30.js"></script>
	</body>
	</html>