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         }
  67
  68         this.redraw = function() {
  69             for (var i = 0; i < this.rows; i++) {
  70                 for (var ii = 0; ii < this.columns; ii++) {
  71                     if (this.population[i][ii].state == 1) {
  72                         this.population[i][ii].redraw();
  73                     }
  74                 }
  75             }
  76         }
  77
  78         this.serialize = function() {
  79             var serial = '';
  80             for (var i = 0; i < this.rows; i++) {
  81                 for (var ii = 0; ii < this.columns; ii++) {
  82                     serial += this.population[i][ii].state;
  83                 }
  84             }
  85             return serial;
  86         }
  87     }
  88
  89     function tick(automaton) {
  90         automaton.generation += 1;
  91         var universe = automaton.population;
  92         var newUniverse = [];
  93         for (var i = 0; i < universe.length; i++) {
  94             newUniverse[i] = [];
  95             for (var ii = 0; ii < universe[i].length; ii++) {
  96                 var neighbors = (universe[i][ii+1] ? universe[i][ii+1].state : 0) +
  97                                 (universe[i][ii-1] ? universe[i][ii-1].state : 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-1] ?
 104                                     (universe[i-1][ii] ? universe[i-1][ii].state : 0) +
 105                                     (universe[i-1][ii-1] ? universe[i-1][ii-1].state : 0) +
 106                                     (universe[i-1][ii+1] ? universe[i-1][ii+1].state : 0)
 107                                     : 0);
 108                 universe[i][ii].neighbors = neighbors;
 109                 if (universe[i][ii].state == 1) {
 110                     if (neighbors < 2 || neighbors > 3) {
 111                         newUniverse[i][ii] = 0;
 112                     } else {
 113                         newUniverse[i][ii] = 1;
 114                     }
 115                 } else {
 116                     newUniverse[i][ii] = (neighbors == 3 ? 1 : 0);
 117                 }
 118             }
 119         }
 120         for (var i in newUniverse) {
 121             for (var ii in newUniverse[i]) {
 122                 newUniverse[i][ii] ? universe[i][ii].revive() : universe[i][ii].kill();
 123             }
 124         }
 125         $('#generation')[0].innerHTML = automaton.generation;
 126     }
 127
 128     var automaton = new universe;
 129
 130     $('#controls #start-automaton').click(function(e){
 131         automaton.start();
 132         $('#controls #start-automaton').hide();
 133         $('#controls #stop-automaton').show();
 134     });
 135
 136     $('#controls #stop-automaton').click(function(e){
 137         automaton.stop();
 138         $('#controls #stop-automaton').hide();
 139         $('#controls #start-automaton').show();
 140     });
 141
 142     $('#controls #reseed-automaton').click(function(e){
 143         automaton.stop();
 144         $('#controls #stop-automaton').hide();
 145         $('#controls #start-automaton').show();
 146         automaton = new universe();
 147     });
 148
 149     $('#controls #custom-seed-automaton').click(function(e){
 150         automaton.stop();
 151         $('#controls #stop-automaton').hide();
 152         $('#controls #start-automaton').show();
 153         automaton = new universe(1);
 154     });
 155
 156     $('#2d-automaton').click(function(e) {
 157         if (!automaton.running) {
 158             var x = e.pageX - $('#2d-automaton').offset().left;
 159             var y = e.pageY - $('#2d-automaton').offset().top;
 160             var row = Math.floor(y / automaton.cellHeight);
 161             var column = Math.floor(x / automaton.cellWidth);
 162             automaton.population[row][column].toggle();
 163         }
 164     });
 165
 166 });