feyderm · April 23, 2017 22:24
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
    <style>
        rect {
            height: 10px;
            width: 10px;
            fill: lightgray;
        }
        .state_0 {
            fill: lightgray;
        }
        .state_1 {
            fill: red;
        }
    </style>
 <body>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script type="text/javascript">

        // CELLULAR AUTOMATA VISUALIZATION
        // 
        // inspired by:
        //      - https://www.nature.com/nature/journal/v544/n7649/full/nature22031.html
        // 
        // references:
        //      - https://bl.ocks.org/mbostock/70d5541b547cc222aa02 
        //      - http://natureofcode.com/book/chapter-7-cellsular-automata/

        addArrayEqualityMethod();

        // initial params
        let svg_dx = 800, 
            svg_dy = 800,
            n_rows = 50,
            n_cols = 75,
            rows = d3.range(n_rows),
            cols = d3.range(n_cols),
            cells = d3.cross(rows, cols, (row, col) => {
                return {"row": row, "col": col, "state": 0};
            });

        // set initial state of cell in first row, center col to 1 
        cells[Math.round(n_cols/2)].state = 1;

        let svg = d3.select("body")
                    .append("svg")
                    .attr("width", svg_dx)
                    .attr("height", svg_dy);

        // plot rects
        svg.selectAll("rect")
           .data(cells)
           .enter()
           .append("rect")
           .attr("class", assignClass)
           .attr("x", cell => cell.col * 11)
           .attr("y", cell => cell.row * 11);

        // update cell states for each row
        rows.forEach(row => {
            d3.selectAll(".row_" + row)
              .call(plotStates, row)
        });

        function plotStates(selection, row) {

            let old_states = selection.data().map(cell => cell.state),
                new_states = computeNewState(old_states);

            // update next row
            // NB: arrow function does not bind 'this'
            d3.selectAll(".row_" + (row + 1))
              .each(function(cell, i) {  
                    cell.state = new_states[i]; 
                    d3.select(this)
                      .transition()
                      .delay(() => row * 50)
                      .attr("class", assignClass); 
              });
        }

        function computeNewState(states) {

            // state of first cell remains 0
            let new_states = [0];  

            // NB: loop begins at second element in array and end at second
            //     to last element in array; state for first and last elements 
            //     in array remain 0
            for (let i = 1; i < states.length - 1; i++) {

                // NB: slice end not included
                let context = states.slice(i - 1, i + 2);

                // rule 126
                if (context.equals([1, 1, 1])) {
                    new_states.push(0); 
                } else if (context.equals([1, 1, 0])) {
                    new_states.push(1);
                } else if (context.equals([1, 0, 1])) {
                    new_states.push(1);
                } else if (context.equals([1, 0, 0])) {
                    new_states.push(1);
                } else if (context.equals([0, 1, 1])) {
                    new_states.push(1);
                } else if (context.equals([0, 1, 0])) {
                    new_states.push(1);
                } else if (context.equals([0, 0, 1])) {
                    new_states.push(1);
                } else if (context.equals([0, 0, 0])) {
                    new_states.push(0);
                }
            }

            // state of last cell remains 0
            new_states.push(0);  

            return new_states;
        }

        function assignClass(cell) {
            return "row_" + cell.row + (cell.state == 1 ? " state_1" : " state_0");
        }

        function addArrayEqualityMethod() {

            // from http://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript
            //
            // attach the .equals method to Array's prototype to call it on any array
            Array.prototype.equals = function (array) {

                for (var i = 0, l=this.length; i < l; i++) {
                    if (this[i] != array[i]) { 
                        return false;   
                    }           
                }       
                return true;
            }
        }

    </script>
 </body>
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	rect {
	height: 10px;
	width: 10px;
	fill: lightgray;
	}
	.state_0 {
	fill: lightgray;
	}
	.state_1 {
	fill: red;
	}
	</style>
	<body>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script type="text/javascript">

	// CELLULAR AUTOMATA VISUALIZATION
	//
	// inspired by:
	// - https://www.nature.com/nature/journal/v544/n7649/full/nature22031.html
	//
	// references:
	// - https://bl.ocks.org/mbostock/70d5541b547cc222aa02
	// - http://natureofcode.com/book/chapter-7-cellsular-automata/

	addArrayEqualityMethod();

	// initial params
	let svg_dx = 800,
	svg_dy = 800,
	n_rows = 50,
	n_cols = 75,
	rows = d3.range(n_rows),
	cols = d3.range(n_cols),
	cells = d3.cross(rows, cols, (row, col) => {
	return {"row": row, "col": col, "state": 0};
	});

	// set initial state of cell in first row, center col to 1
	cells[Math.round(n_cols/2)].state = 1;

	let svg = d3.select("body")
	.append("svg")
	.attr("width", svg_dx)
	.attr("height", svg_dy);

	// plot rects
	svg.selectAll("rect")
	.data(cells)
	.enter()
	.append("rect")
	.attr("class", assignClass)
	.attr("x", cell => cell.col * 11)
	.attr("y", cell => cell.row * 11);

	// update cell states for each row
	rows.forEach(row => {
	d3.selectAll(".row_" + row)
	.call(plotStates, row)
	});

	function plotStates(selection, row) {

	let old_states = selection.data().map(cell => cell.state),
	new_states = computeNewState(old_states);

	// update next row
	// NB: arrow function does not bind 'this'
	d3.selectAll(".row_" + (row + 1))
	.each(function(cell, i) {
	cell.state = new_states[i];
	d3.select(this)
	.transition()
	.delay(() => row * 50)
	.attr("class", assignClass);
	});
	}

	function computeNewState(states) {

	// state of first cell remains 0
	let new_states = [0];

	// NB: loop begins at second element in array and end at second
	// to last element in array; state for first and last elements
	// in array remain 0
	for (let i = 1; i < states.length - 1; i++) {

	// NB: slice end not included
	let context = states.slice(i - 1, i + 2);

	// rule 126
	if (context.equals([1, 1, 1])) {
	new_states.push(0);
	} else if (context.equals([1, 1, 0])) {
	new_states.push(1);
	} else if (context.equals([1, 0, 1])) {
	new_states.push(1);
	} else if (context.equals([1, 0, 0])) {
	new_states.push(1);
	} else if (context.equals([0, 1, 1])) {
	new_states.push(1);
	} else if (context.equals([0, 1, 0])) {
	new_states.push(1);
	} else if (context.equals([0, 0, 1])) {
	new_states.push(1);
	} else if (context.equals([0, 0, 0])) {
	new_states.push(0);
	}
	}

	// state of last cell remains 0
	new_states.push(0);

	return new_states;
	}

	function assignClass(cell) {
	return "row_" + cell.row + (cell.state == 1 ? " state_1" : " state_0");
	}

	function addArrayEqualityMethod() {

	// from http://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript
	//
	// attach the .equals method to Array's prototype to call it on any array
	Array.prototype.equals = function (array) {

	for (var i = 0, l=this.length; i < l; i++) {
	if (this[i] != array[i]) {
	return false;
	}
	}
	return true;
	}
	}

	</script>
	</body>