2d.js

   1 $(document).ready(function(){
   2
   3     var canvas = document.getElementById('2d-automaton')
   4     var c = canvas.getContext('2d');
   5
   6     var rows = 50;
   7     var columns = 50;
   8
   9     var cellWidth = canvas.width / rows;
  10     var cellHeight = canvas.height / columns;
  11
  12     function cell(x, y, h, l) {
  13         this.x = x;
  14         this.y = y;
  15         this.h = h;
  16         this.l = l;
  17         this.state = 0;
  18         this.kill = function() {
  19             c.fillStyle = "rgb(255,255,255)";
  20             c.fillRect(this.x, this.y, this.h, this.l);
  21             this.state = 0;
  22         }
  23         this.revive = function() {
  24             c.fillStyle = "rgb(0,0,0)";
  25             c.fillRect(this.x, this.y, this.h, this.l);
  26             this.state = 1;
  27         }
  28     }
  29
  30     function universe() {
  31         this.population = [];
  32         this.generation = 0;
  33
  34         for (var i = 0; i < rows; i++) {
  35             var world = [];
  36             var x = 0;
  37             var y = i * cellHeight;
  38             for (var ii = 0; ii < columns; ii++) {
  39                 world.push(new cell(x, y, cellWidth, cellHeight));
  40                 x += cellWidth;
  41                 Math.random() > .5 ? world[ii].revive() : world[ii].kill();
  42             }
  43             this.population.push(world);
  44         }
  45
  46         this.highlight = function() {
  47             for (var i = 0; i < rows; i++) {
  48                 for (var ii = 0; ii < columns; ii++) {
  49                     if (this.population[i][ii].state == 1) {
  50                         this.population[i][ii].highlight();
  51                     }
  52                 }
  53             }
  54         }
  55
  56         this.redraw = function() {
  57             for (var i = 0; i < rows; i++) {
  58                 for (var ii = 0; ii < columns; ii++) {
  59                     if (this.population[i][ii].state == 1) {
  60                         this.population[i][ii].redraw();
  61                     }
  62                 }
  63             }
  64         }
  65     }
  66
  67     function tick(automaton) {
  68         automaton.generation += 1;
  69         var universe = automaton.population;
  70         var newUniverse = [];
  71         for (var i = 0; i < universe.length; i++) {
  72             newUniverse[i] = [];
  73             for (var ii = 0; ii < universe[i].length; ii++) {
  74                 var neighbors = (universe[i][ii+1] ? universe[i][ii+1].state : 0) +
  75                                 (universe[i][ii-1] ? universe[i][ii-1].state : 0) +
  76                                 (universe[i+1] ?
  77                                     (universe[i+1][ii] ? universe[i+1][ii].state : 0) +
  78                                     (universe[i+1][ii+1] ? universe[i+1][ii+1].state : 0) +
  79                                     (universe[i+1][ii-1] ? universe[i+1][ii-1].state : 0)
  80                                     : 0) +
  81                                 (universe[i-1] ?
  82                                     (universe[i-1][ii] ? universe[i-1][ii].state : 0) +
  83                                     (universe[i-1][ii-1] ? universe[i-1][ii-1].state : 0) +
  84                                     (universe[i-1][ii+1] ? universe[i-1][ii+1].state : 0)
  85                                     : 0);
  86                 universe[i][ii].neighbors = neighbors;
  87                 if (universe[i][ii].state == 1) {
  88                     if (neighbors < 2 || neighbors > 3) {
  89                         newUniverse[i][ii] = 0;
  90                     } else {
  91                         newUniverse[i][ii] = 1;
  92                     }
  93                 } else {
  94                     newUniverse[i][ii] = (neighbors == 3 ? 1 : 0);
  95                 }
  96             }
  97         }
  98         for (var i in newUniverse) {
  99             for (var ii in newUniverse[i]) {
 100                 newUniverse[i][ii] ? universe[i][ii].revive() : universe[i][ii].kill();
 101             }
 102         }
 103         $('#generation')[0].innerHTML = automaton.generation;
 104     }
 105
 106     var automaton = new universe;
 107     var tickID = 0;
 108
 109     $('#controls #start-automaton').click(function(e){
 110         tickID = setInterval(function(){tick(automaton)}, 100);
 111         $('#controls #start-automaton').hide();
 112         $('#controls #stop-automaton').show();
 113     });
 114
 115     $('#controls #stop-automaton').click(function(e){
 116         clearInterval(tickID);
 117         $('#controls #stop-automaton').hide();
 118         $('#controls #start-automaton').show();
 119     });
 120
 121 });