var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var input, memory;

var log = str => {
  console.log(str);
  document.querySelector("textarea").value += str + "\n";
};

var orientations = [
  [1, 0],
  [1, 1],
  [0, 1],
  [-1, 0],
  [-1, -1],
  [0, -1]
];

var arena = {
  grid: [[[1, 0, 0]]],
  maxX: 1,
  maxY: 0,
  expandGrid: function() {
    var grid = this.grid;
    var newWidth = grid[0].length + 2,
      newHeight = grid.length + 2;
    var createRow = () => {
      var result = [];
      for (let i = 0; i < newWidth; ++i) result.push([0, 0, 0]);
      return result;
    };
    for (let row of grid) {
      row.push([0, 0, 0]);
      row.unshift([0, 0, 0]);
    };
    grid.push(createRow());
    grid.unshift(createRow());
  },

  gridWidth: function() {
    return this.grid[0].length
  },
  gridHeight: function() {
    return this.grid.length
  },
  get: function(x, y) {
    var colOffset = Math.floor(this.gridWidth() / 2),
      rowOffset = Math.floor(this.gridHeight() / 2);
    return this.grid[y + rowOffset][x + colOffset];
  },
  isAtEnd: function(x, y) {
    var colOffset = Math.floor(this.gridWidth() / 2),
      rowOffset = Math.floor(this.gridHeight() / 2);
    return x === -colOffset || x + colOffset + 1 === this.gridWidth() ||
      y === -rowOffset || y + rowOffset + 1 === this.gridHeight();
  },
  getEdge: function(x, y, o) {
    if (o % 2 === 0) return this.get(x, y)[o / 2];
    else {
      let a, b;
      [a, b] = orientations[(o + 3) % 6];
      return this.get(x - a, y - b)[((o + 3) % 6) / 2];
    }
  },
  setEdge: function(x, y, o) {
    if (Math.abs(x) > this.maxX) this.maxX = Math.abs(x);
    if (Math.abs(y) > this.maxY) this.maxY = Math.abs(y);
    if (o % 2 === 0) {
      if (this.get(x, y)[o / 2]) throw new Error("Path already taken");
      this.get(x, y)[o / 2] = 1;
    } else {
      let a, b;
      [a, b] = orientations[(o + 3) % 6];
      if (this.get(x - a, y - b)[((o + 3) % 6) / 2]) throw new Error("Path already taken");
      this.get(x - a, y - b)[((o + 3) % 6) / 2] = 1;
    }
  }
};

var drawGrid = function(area) {
  var width = canvas.width,
    height = canvas.height;
  ctx.clearRect(0, 0, width, height);
  var gridWidth = arena.gridWidth(),
    gridHeight = arena.gridHeight();
  var triangleLen = Math.floor(Math.min(
    width / (arena.maxX * 2 + arena.maxY),
    height / (arena.maxY * Math.sqrt(3)),
    width / 4
  ));
  var convert = (x, y) => [(x - y / 2) * triangleLen, triangleLen * y * Math.sqrt(3) / 2];
  var drawCirc = function(x, y) {
    var a, b;
    ctx.beginPath();
    [a, b] = convert(x, y);
    ctx.arc(a, b, 5, 0, 2 * Math.PI);
    ctx.fill();
  };
  ctx.fillStyle = "black";
  for (let y = 0; triangleLen * y * Math.sqrt(3) / 2 < height; ++y) {
    for (let x = Math.floor(y / 2); triangleLen * (x - y / 2) < width; ++x) {
      drawCirc(x, y);
    }
  };

  var drawLine = function(a, b, c, d) {
    var x, y;
    ctx.beginPath();
    [x, y] = convert(a, b);
    ctx.moveTo(x, y);
    [x, y] = convert(a + c, b + d);
    ctx.lineTo(x, y);
    ctx.stroke();
  };

  var centerY = Math.round(height / (triangleLen * Math.sqrt(3)));
  var centerX = Math.round(width / (2 * triangleLen) + centerY / 2);
  ctx.fillStyle = "red";
  drawCirc(centerX, centerY);

  for (let row = -(gridHeight - 1) / 2; row < (gridHeight + 1) / 2; ++row) {
    for (let col = -(gridWidth - 1) / 2; col < (gridWidth + 1) / 2; ++col) {
      let lines = arena.get(col, row);
      for (let j = 0; j < lines.length; ++j) {
        if (lines[j]) {
          let or = orientations[2 * j];
          drawLine(col + centerX, row + centerY, or[0], or[1]);
        }
      }
    }
  }
};


var step = function(x, y, absoluteOrientation) {
  log('(' + x + ',' +  y + ')');
  var surroundings = 0;
  for (let i = 0; i < 6; ++i) {
    if (arena.getEdge(x, y, (absoluteOrientation + i) % 6)) {
      surroundings |= (1 << i);
    }
  }
  if (surroundings == 63) {
    console.log("Done!");
    return;
  }
  var action;
  if (memory[surroundings] !== undefined)
    action = memory[surroundings];
  else {
    action = input.shift();
    memory[surroundings] = action;
  }
  absoluteOrientation = (absoluteOrientation + action) % 6;
  arena.setEdge(x, y, absoluteOrientation);
  var or = orientations[absoluteOrientation];
  x += or[0];
  y += or[1];
  if (arena.isAtEnd(x, y)) arena.expandGrid();
  drawGrid(arena);
  setTimeout(function() {
    step(x, y, absoluteOrientation);
  }, parseFloat(document.querySelector("input[type=number]").value));
};

var go = function() {
  input = document.querySelector("input[type=text]").value.split(",").map(x => parseInt(x, 10));
  arena.grid = [[[1, 0, 0]]];
  arena.maxX = 1;
  arena.maxY = 0;
  memory = {};

  for (let i = 0; i < 6; ++i) {
    memory[(~(1 << i)) & 63] = i;
  }

  arena.expandGrid();
  arena.expandGrid();

  step(1, 0, 0);
};

document.querySelector("button").onclick = go;

canvas {
  border: 1px solid black;
}

Input: <input type="text" placeholder="Comma separated input"><br />
Delay (ms): <input type="number" placeholder="delay" value="500"/><button>Go</button><br />
<canvas width="500" height="400"></canvas><br />
<textarea></textarea>