2d.js

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