Skip to content

Instantly share code, notes, and snippets.

@textarcana

textarcana/index.html

Forked from biovisualize/index.html
Last active Aug 29, 2015
Embed
What would you like to do?
d3 Game of Life / cellular automaton
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="http://mbostock.github.com/d3/d3.js"></script>
<style type='text/css'>
.cell{
stroke: none;
}
</style>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
var ruleString = '3/1234'
var gridSize = 400,
gridCellNum = 50,
cellSize = ~~(gridSize / gridCellNum);
var data = d3.range(gridCellNum).map(function(d, i){return d3.range(gridCellNum).map(function(d, i, a){
return ~~(Math.random()*2);
});});
var count = 0;
var timer = setInterval(refreshGrid,30);
function refreshGrid(){
var dataTmp = [];
data.forEach(function(pD, pI){
dataTmp[pI] = [];
return pD.forEach(function(d, i){
var birth = ruleString.split('/')[0].split('').map(function(d, i){return ~~d;});
var survival = ruleString.split('/')[1].split('').map(function(d, i){return ~~d;});
var neighbours = countNeighbors(i, pI);
var alive = !!d;
dataTmp[pI][i] = d;
if(alive) dataTmp[pI][i] = ~~(survival.indexOf(neighbours) != -1);
else dataTmp[pI][i] = ~~(birth.indexOf(neighbours) != -1);
});});
data = dataTmp;
var rows = root.selectAll('g.row')
.data(data);
var cells = rows.selectAll('rect.cell')
.data(function(d, i){return d;});
cells.style({fill: function(d, i, pI){
return (!!d)? 'black': 'white';
}});
count++;
if(count >= 100)clearInterval(timer);
}
function countNeighbors(col, row){
var cellValue = data[row][col];
var n = (row-1 >= 0)? row-1: gridCellNum-1;
var s = (row+1 <= (gridCellNum-1))? row+1: 0;
var w = (col-1 >= 0)? col-1: gridCellNum-1;
var e = (col+1 <= (gridCellNum-1))? col+1: 0;
var livingNeighbours = data[col][w]
+ data[n][w]
+ data[s][w]
+ data[col][e]
+ data[n][e]
+ data[s][e]
+ data[s][row]
+ data[n][row];
return livingNeighbours;
}
var root = d3.select('#grid').append('svg')
.attr({width: gridSize, height: gridSize})
.classed('root', true);
var rows = root.selectAll('g.row')
.data(data);
rows.enter().append('g')
.classed('row', true)
.attr({transform: function(d, i){return 'translate(0,' + cellSize * i + ')';}});
var cells = rows.selectAll('rect.cell')
.data(function(d, i){return d;});
cells.enter().append('rect')
.classed('cell', true)
.attr({width: cellSize, height: cellSize, x: function(d, i){return cellSize*i;}});
cells.style({fill: function(d, i){return (!!d)? 'black': 'white';}});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment