Langton's Ant

by asemahle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
    <div class="content">
        <h1>Langton's Ant</h1>

        <div class="canvas-container">
            <canvas id="map" width="500" height="500" style="margin: auto; background-color: white; width: 500px; height: 500px"></canvas>
        </div>
        
        <h3>CONTROLS</h3>
        <div class="form-group">
          <label for="rule">Rule:</label>
          <input class="form-control" type="text" id="rule" value="lrrrrrllr">
        </div>
        <div class="form-group">
          <label for="speed">Speed:</label>
          <input class="form-control" type="number" id="skips" value="100">
        </div>        
        <div class="btn-group" role="group" >
            <button id="btn-generate" type="button" class="btn btn-default">Apply Changes</button>
        </div>
    </div>
</div>

CSS

.canvas-container {
  background-color: grey; 
  width: 100%; 
  padding: 24px; 
  text-align: center
}

JavaScript

var Grid = function(directions) {
	this.colours = ['#ffffff', '#282828', '#1e695c', '#5c798f', '#e59f45', '#8b6196', '#5ef985', '#f66045', '#60ebf6', '#d6fb4c', '#5445f6'];
	this.grid = [];
  this.directions = directions.split('').map(function(e) { return e == 'l' ? true : false; }); // a boolean array: true = left, false = right
  
  if (directions.length < 1) {
  	directions = [true];
  }
  
  this.mod = directions.length;
};
Grid.prototype = {
	toggle: function(x, y) {  	
    this._protectGrid(x, y);
    this.grid[y][x] = (this.grid[y][x] + 1) % this.mod;
  },
  
  getTurn: function(x, y) {
  	this._protectGrid(x, y);
    return this.directions[this.grid[y][x]]
  },
  
  getColour: function(x, y) {
  	this._protectGrid(x, y);
    return this.colours[this.grid[y][x] % this.colours.length];
  },
  
  _protectGrid: function(x, y) {
    if (this.grid[y] == null) {
    	this.grid[y] = [];
    } 
    if (this.grid[y][x] == null) {
    	this.grid[y][x] = 0;
    }
  }
}

var Ant = function(startx, starty, grid) {
	this.grid = grid;
	this.posx = startx;
  this.posy = starty;
  this.dir = 0; //   0
  							// 3 - 1  
                //   2
}
Ant.prototype = {
	step: function() {
  	// get the direction to turn and toggle the grid
  	var turn = this.grid.getTurn(this.posx, this.posy);
    this.grid.toggle(this.posx, this.posy);
    
    // set the new direction
    this.dir = turn ? (((this.dir - 1) % 4) + 4) % 4 : (this.dir + 1) % 4;
    
    // update position by moving in the new direction
    if (this.dir === 0) {
      this.posy ++;
    } else if (this.dir === 1) {
    	this.posx ++;
    } else if (this.dir === 2) {
    	this.posy --;
    } else {
    	this.posx --;
    }
  }
}


/** CONTROLS **/
// The arguments for the grid determine the rule.
var grid = null;
// Skips determines the speed. More skips means more speed. Careful not to crash ur computer tho
var skips = null;
var ant = null;

var canvas = document.getElementById('map');
var ctx =...