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         this.redraw = function() {
  29             c.fillStyle = this.state == 1 ? "rgb(0,0,0)" : "rgb(255,255,255)";
  30             c.fillRect(this.x, this.y, this.h, this.l);
  31         }
  32         this.highlight = function() {
  33             c.fillStyle = "rgb(0,0,100)";
  34             c.fillRect(this.x, this.y, this.h, this.l);
  35         }
  36     }
  37
  38     function universe() {
  39         this.population = [];
  40         this.generation = 0;
  41
  42         for (var i = 0; i < rows; i++) {
  43             var world = [];
  44             var x = 0;
  45             var y = i * cellHeight;
  46             for (var ii = 0; ii < columns; ii++) {
  47                 world.push(new cell(x, y, cellWidth, cellHeight));
  48                 x += cellWidth;
  49                 Math.random() > .5 ? world[ii].revive() : world[ii].kill();
  50             }
  51             this.population.push(world);
  52         }
  53
  54         this.print = function() {
  55             for (var i = 0; i < rows; i++) {
  56                 var s = '';
  57                 for (var ii = 0; ii < columns; ii++) {
  58                     s += this.population[i][ii];
  59                 }
  60             }
  61         }
  62
  63         this.highlight = function() {
  64             for (var i = 0; i < rows; i++) {
  65                 for (var ii = 0; ii < columns; ii++) {
  66                     if (this.population[i][ii].state == 1) {
  67                         this.population[i][ii].highlight();
  68                     }
  69                 }
  70             }
  71         }
  72
  73         this.redraw = function() {
  74             for (var i = 0; i < rows; i++) {
  75                 for (var ii = 0; ii < columns; ii++) {
  76                     if (this.population[i][ii].state == 1) {
  77                         this.population[i][ii].redraw();
  78                     }
  79                 }
  80             }
  81         }
  82     }
  83
  84     function tick(automaton) {
  85         automaton.generation += 1;
  86         var universe = automaton.population;
  87         var newUniverse = [];
  88         for (var i = 0; i < universe.length; i++) {
  89             newUniverse[i] = [];
  90             for (var ii = 0; ii < universe[i].length; ii++) {
  91                 var neighbors = (universe[i][ii+1] ? universe[i][ii+1].state : 0) +
  92                                 (universe[i][ii-1] ? universe[i][ii-1].state : 0) +
  93                                 (universe[i+1] ?
  94                                     (universe[i+1][ii] ? universe[i+1][ii].state : 0) +
  95                                     (universe[i+1][ii+1] ? universe[i+1][ii+1].state : 0) +
  96                                     (universe[i+1][ii-1] ? universe[i+1][ii-1].state : 0)
  97                                     : 0) +
  98                                 (universe[i-1] ?
  99                                     (universe[i-1][ii] ? universe[i-1][ii].state : 0) +
 100                                     (universe[i-1][ii-1] ? universe[i-1][ii-1].state : 0) +
 101                                     (universe[i-1][ii+1] ? universe[i-1][ii+1].state : 0)
 102                                     : 0);
 103                 universe[i][ii].neighbors = neighbors;
 104                 if (universe[i][ii].state == 1) {
 105                     if (neighbors < 2 || neighbors > 3) {
 106                         newUniverse[i][ii] = 0;
 107                     } else {
 108                         newUniverse[i][ii] = 1;
 109                     }
 110                 } else {
 111                     newUniverse[i][ii] = (neighbors == 3 ? 1 : 0);
 112                 }
 113             }
 114         }
 115         for (var i in newUniverse) {
 116             for (var ii in newUniverse[i]) {
 117                 newUniverse[i][ii] ? universe[i][ii].revive() : universe[i][ii].kill();
 118             }
 119         }
 120         $('#generation')[0].innerHTML = automaton.generation;
 121     }
 122
 123     var automaton = new universe;
 124     var seed = $.extend(true, {}, automaton);
 125     var tickID = 0;
 126
 127     $('#controls #start-automaton').click(function(e){
 128         tickID = setInterval(function(){tick(automaton)}, 100);
 129         $('#controls #start-automaton').hide();
 130         $('#controls #stop-automaton').show();
 131         $('#controls #highlight-seed').show();
 132     });
 133
 134     $('#controls #stop-automaton').click(function(e){
 135         clearInterval(tickID);
 136         $('#controls #stop-automaton').hide();
 137         $('#controls #start-automaton').show();
 138     });
 139
 140     $('#controls #reset-automaton').click(function(e){
 141         clearInterval(tickID);
 142         $('#controls #stop-automaton').hide();
 143         $('#controls #start-automaton').show();
 144         automaton = $.extend(true, {}, seed);
 145         $('#generation')[0].innerHTML = automaton.generation;
 146         automaton.redraw();
 147     });
 148
 149     $('#controls #highlight-seed').click(function(e){
 150         seed.highlight();
 151     });
 152
 153 });