HTML5 Canvas Example

OEIS A181018

HTML

<div>
  <canvas id="canvas" width="10" height="10"></canvas>
</div>
<div id="filled_count"></div>
<ul id="filled_history"></ul>

CSS

#canvas {
  padding: 10px 20px;
}

#filled_history {
  padding: 10px 20px;
}

#filled_count {
  font-size: 16pt;
  padding: 10px 20px;
}

JavaScript

var grid, filled_count = 0,
  GRID_SIZE = 16,
  BOOL_SHOW_SWAPS = true;

///////////////
//
// Prototype methods for finding neighbor cells
//
///////////////
Object.prototype.north = function() {
  if (this && this.y > 0) {
    return grid[(this.y - 1) * this.max_y + this.x];
  }
  return {};
}
Object.prototype.south = function() {
  if (this && this.y < (this.max_y - 1)) {
    return grid[(this.y + 1) * this.max_y + this.x];
  }
  return {};
}
Object.prototype.west = function() {
  if (this && this.x > 0) {
    return grid[(this.y) * this.max_y + this.x - 1];
  }
  return {};
}
Object.prototype.east = function() {
  if (this && this.x < (this.max_x - 1)) {
    return grid[(this.y) * this.max_y + this.x + 1];
  }
  return {};
}

function main() {
  //// Build the grid
  create_grid(GRID_SIZE);

  //// Fill in the empty grid row-by-row
  //// (Fills in 2x2 squares automatically based on rules)
  fill_empties();

  //// Start random swap routine
  window.requestAnimationFrame(frame);
}

//// How many random swaps should we attempt?
var MAX_CYCLES = Number.MAX_SAFE_INTEGER;
//// How many so far?
var CYCLES = 0;

//// Animation frame routine
function frame(timestamp) {
  if (CYCLES++ < MAX_CYCLES) {
    random_swap();
  }

  if (BOOL_SHOW_SWAPS) {
    update_counter();
    draw_grid();
  }

  window.requestAnimationFrame(frame);
}

//////////
//
// Helper function for creating a random shuffle of grid ids
//
/////////
function random_shuffle(len) {
  var rgrid = [];
  for (var j = 0; j < len; j++) {
    rgrid[j] = j;
  }

  for (var i = (len - 1); i > 0; i--) {
    var n = Math.floor(Math.random() * (i + 1));
    var t = rgrid[i];
    rgrid[i] = rgrid[n];
    rgrid[n] = t;
  }
  return rgrid;
}

function create_grid(n) {
  grid = [];
  document.getElementById('canvas').width = n * 40;
  document.getElementById('canvas').height = n * 40;
  for (var i = 0; i < n * n; i++) {
    var box = new Object();
    box.x = i % n;
    box.y = Math.floor(i / n);
    box.max_x =...