shuhblam/rule30.html

## rule30.html
<!doctype html>
<html lang="en" >
  <head>
    <style type="text/css">
      header {
        padding: 15px 0;
      }
      #eca{
        outline: 1px solid black;
      }
    </style>
  </head>
  <body>

    <header>
        <nav>
          <button id="startEca">Start</button>
          <button id="stopEca">Stop</button>
        </nav>
    </header>

    <canvas id="eca" width="400" height="8000"></canvas>

    <script>
      var canvas = document.getElementById('eca'),
          start = document.getElementById('startEca'),
          stop = document.getElementById('stopEca'),
          context = canvas.getContext('2d');

      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
      }

      //Elementary Cellular Automaton class
      var eca = function(r, w, h) {
        this.cellSize = 5
        this.run = false;
        this.rule = r;
        this.columns = w/this.cellSize;
        this.rows = h/this.cellSize;
        this.matrix = [];

        //create matrix
        for (i = 0; i < this.columns; i++) {
          this.matrix[i] = []
          for (j = 0; j < this.rows; j++) {
            this.matrix[i][j] = 0;
          }
        }

        //add an active cell in the middle of the first column
        this.matrix[this.columns/2][0] = 1;

        this.generation = 0;
      };

      eca.prototype.render = function(){

        var offset = this.generation%this.rows,
            c = this.cellSize;

        //loop over columns and rows and search for cells that are in an
        // active state
        for (var i = 0; i < this.columns; i++) {
          for (var j = 0; j < this.rows; j++) {
            if (this.matrix[i][j] === 1){
              ctx.fillRect(i*c, j*c, c, c);
            }
          }
        }
      }

      eca.prototype.iterate = function(){

        var m = this.matrix,
            c = this.columns,
            r = this.rows,
            g = this.generation

        // evaluate neighbors and update matrix
        for (var i = 0; i < c; i++) {

          var links = m[(i+c-1)%c][g%r],
              mir    = m[i][g%r],
              rechts = m[(i+1)%c][g%r];

          this.matrix[i][(g+1)%r] = this.neighborhood(links, mir, rechts);

        }

        // move to the next generation on the next iteration
        this.generation++;

      }

      eca.prototype.start = function(){
        this.run = true;
      }

      eca.prototype.stop = function(){
        this.run = false;
      }

      eca.prototype.neighborhood = function(a, b, c){
        if (a == 1 && b == 1 && c == 1) return this.rule [1];
        if (a == 1 && b == 1 && c == 0) return this.rule [0];
        if (a == 1 && b == 0 && c == 1) return this.rule [7];
        if (a == 1 && b == 0 && c == 0) return this.rule [6];
        if (a == 0 && b == 1 && c == 1) return this.rule [5];
        if (a == 0 && b == 1 && c == 0) return this.rule [4];
        if (a == 0 && b == 0 && c == 1) return this.rule [3];
        if (a == 0 && b == 0 && c == 0) return this.rule [2];
      }

      var ca = new eca([0,0,0,1,1,1,1,0], 400, 8000)

      setInterval(function(){
        if(ca.run === true){
          ca.render()
          ca.iterate()
        }
      }, 800);

      start.onclick = function(){
        ca.start()
      }

      stop.onclick = function(){
        ca.stop()
      }

    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en" >
	<head>
	<style type="text/css">
	header {
	padding: 15px 0;
	}
	#eca{
	outline: 1px solid black;
	}
	</style>
	</head>
	<body>

	<header>
	<nav>
	<button id="startEca">Start</button>
	<button id="stopEca">Stop</button>
	</nav>
	</header>

	<canvas id="eca" width="400" height="8000"></canvas>

	<script>
	var canvas = document.getElementById('eca'),
	start = document.getElementById('startEca'),
	stop = document.getElementById('stopEca'),
	context = canvas.getContext('2d');

	if (canvas.getContext) {
	var ctx = canvas.getContext('2d');
	}

	//Elementary Cellular Automaton class
	var eca = function(r, w, h) {
	this.cellSize = 5
	this.run = false;
	this.rule = r;
	this.columns = w/this.cellSize;
	this.rows = h/this.cellSize;
	this.matrix = [];

	//create matrix
	for (i = 0; i < this.columns; i++) {
	this.matrix[i] = []
	for (j = 0; j < this.rows; j++) {
	this.matrix[i][j] = 0;
	}
	}

	//add an active cell in the middle of the first column
	this.matrix[this.columns/2][0] = 1;

	this.generation = 0;
	};

	eca.prototype.render = function(){

	var offset = this.generation%this.rows,
	c = this.cellSize;

	//loop over columns and rows and search for cells that are in an
	// active state
	for (var i = 0; i < this.columns; i++) {
	for (var j = 0; j < this.rows; j++) {
	if (this.matrix[i][j] === 1){
	ctx.fillRect(ic, jc, c, c);
	}
	}
	}
	}

	eca.prototype.iterate = function(){

	var m = this.matrix,
	c = this.columns,
	r = this.rows,
	g = this.generation

	// evaluate neighbors and update matrix
	for (var i = 0; i < c; i++) {

	var links = m[(i+c-1)%c][g%r],
	mir = m[i][g%r],
	rechts = m[(i+1)%c][g%r];

	this.matrix[i][(g+1)%r] = this.neighborhood(links, mir, rechts);

	}

	// move to the next generation on the next iteration
	this.generation++;

	}

	eca.prototype.start = function(){
	this.run = true;
	}

	eca.prototype.stop = function(){
	this.run = false;
	}

	eca.prototype.neighborhood = function(a, b, c){
	if (a == 1 && b == 1 && c == 1) return this.rule [1];
	if (a == 1 && b == 1 && c == 0) return this.rule [0];
	if (a == 1 && b == 0 && c == 1) return this.rule [7];
	if (a == 1 && b == 0 && c == 0) return this.rule [6];
	if (a == 0 && b == 1 && c == 1) return this.rule [5];
	if (a == 0 && b == 1 && c == 0) return this.rule [4];
	if (a == 0 && b == 0 && c == 1) return this.rule [3];
	if (a == 0 && b == 0 && c == 0) return this.rule [2];
	}

	var ca = new eca([0,0,0,1,1,1,1,0], 400, 8000)

	setInterval(function(){
	if(ca.run === true){
	ca.render()
	ca.iterate()
	}
	}, 800);

	start.onclick = function(){
	ca.start()
	}

	stop.onclick = function(){
	ca.stop()
	}

	</script>
	</body>
	</html>