2d.js

   1 $(document).ready(function(){
   2
   3     var canvas = $('#2d-automaton')[0];
   4     var c = canvas.getContext('2d');
   5
   6
   7     function cell(x, y, h, l) {
   8         this.x = x;
   9         this.y = y;
  10         this.h = h;
  11         this.l = l;
  12         this.state = 0;
  13         this.kill = function() {
  14             c.fillStyle = "rgb(255,255,255)";
  15             c.fillRect(this.x, this.y, this.h, this.l);
  16             this.state = 0;
  17         }
  18         this.revive = function() {
  19             c.fillStyle = "rgb(0,0,0)";
  20             c.fillRect(this.x, this.y, this.h, this.l);
  21             this.state = 1;
  22         }
  23         this.toggle = function() {
  24             this.state ? this.kill() : this.revive();
  25         }
  26     }
  27
  28     function universe(blank) {
  29         this.population = [];
  30         this.generation = 0;
  31         this.running = 0;
  32         this.tickID = 0;
  33
  34         this.blank = blank || 0;
  35
  36         this.rows = 50;
  37         this.columns = 50;
  38
  39         this.cellWidth = canvas.width / this.rows;
  40         this.cellHeight = canvas.height / this.columns;
  41
  42         for (var i = 0; i < this.rows; i++) {
  43             var world = [];
  44             var x = 0;
  45             var y = i * this.cellHeight;
  46             for (var ii = 0; ii < this.columns; ii++) {
  47                 world.push(new cell(x, y, this.cellWidth, this.cellHeight));
  48                 x += this.cellWidth;
  49                 if (this.blank) { world[ii].kill(); }
  50                 else { Math.random() > .5 ? world[ii].revive() : world[ii].kill(); }
  51             }
  52             this.population.push(world);
  53         }
  54
  55         this.start = function() {
  56             this.tickID = setInterval(function(){tick(automaton)}, 100);
  57             this.running = 1;
  58         }
  59
  60         this.stop = function() {
  61             clearInterval(this.tickID);
  62             this.running = 0;
  63         }
  64
  65         this.toggle = function() {
  66             this.running ? this.stop() : this.start();
  67         }
  68
  69         this.redraw = function() {
  70             for (var i = 0; i < this.rows; i++) {
  71                 for (var ii = 0; ii < this.columns; ii++) {
  72                     if (this.population[i][ii].state == 1) {
  73                         this.population[i][ii].redraw();
  74                     }
  75                 }
  76             }
  77         }
  78
  79         this.serialize = function() {
  80             var serial = '';
  81             for (var i = 0; i < this.rows; i++) {
  82                 for (var ii = 0; ii < this.columns; ii++) {
  83                     serial += this.population[i][ii].state;
  84                 }
  85             }
  86             return serial;
  87         }
  88     }
  89
  90     function tick(automaton) {
  91         automaton.generation += 1;
  92         var universe = automaton.population;
  93         var newUniverse = [];
  94         for (var i = 0; i < universe.length; i++) {
  95             newUniverse[i] = [];
  96             for (var ii = 0; ii < universe[i].length; ii++) {
  97                 var neighbors = (universe[i][ii+1] ? universe[i][ii+1].state : 0) +
  98                                 (universe[i][ii-1] ? universe[i][ii-1].state : 0) +
  99                                 (universe[i+1] ?
 100                                     (universe[i+1][ii] ? universe[i+1][ii].state : 0) +
 101                                     (universe[i+1][ii+1] ? universe[i+1][ii+1].state : 0) +
 102                                     (universe[i+1][ii-1] ? universe[i+1][ii-1].state : 0)
 103                                     : 0) +
 104                                 (universe[i-1] ?
 105                                     (universe[i-1][ii] ? universe[i-1][ii].state : 0) +
 106                                     (universe[i-1][ii-1] ? universe[i-1][ii-1].state : 0) +
 107                                     (universe[i-1][ii+1] ? universe[i-1][ii+1].state : 0)
 108                                     : 0);
 109                 universe[i][ii].neighbors = neighbors;
 110                 if (universe[i][ii].state == 1) {
 111                     if (neighbors < 2 || neighbors > 3) {
 112                         newUniverse[i][ii] = 0;
 113                     } else {
 114                         newUniverse[i][ii] = 1;
 115                     }
 116                 } else {
 117                     newUniverse[i][ii] = (neighbors == 3 ? 1 : 0);
 118                 }
 119             }
 120         }
 121         for (var i in newUniverse) {
 122             for (var ii in newUniverse[i]) {
 123                 newUniverse[i][ii] ? universe[i][ii].revive() : universe[i][ii].kill();
 124             }
 125         }
 126         $('#generation')[0].innerHTML = automaton.generation;
 127     }
 128
 129     var automaton = new universe;
 130
 131     $('#controls #start-automaton').click(function(e){
 132         automaton.start();
 133         $('#controls #start-automaton').hide();
 134         $('#controls #stop-automaton').show();
 135     });
 136
 137     $('#controls #stop-automaton').click(function(e){
 138         automaton.stop();
 139         $('#controls #stop-automaton').hide();
 140         $('#controls #start-automaton').show();
 141     });
 142
 143     $('#controls #reseed-automaton').click(function(e){
 144         automaton.stop();
 145         $('#controls #stop-automaton').hide();
 146         $('#controls #start-automaton').show();
 147         automaton = new universe();
 148     });
 149
 150     $('#controls #custom-seed-automaton').click(function(e){
 151         automaton.stop();
 152         $('#controls #stop-automaton').hide();
 153         $('#controls #start-automaton').show();
 154         automaton = new universe(1);
 155     });
 156
 157     $('#2d-automaton').click(function(e) {
 158         if (!automaton.running) {
 159             var x = e.pageX - $('#2d-automaton').offset().left;
 160             var y = e.pageY - $('#2d-automaton').offset().top;
 161             var row = Math.floor(y / automaton.cellHeight);
 162             var column = Math.floor(x / automaton.cellWidth);
 163             automaton.population[row][column].toggle();
 164         }
 165     });
 166
 167 });