maze.js

.sublime-text-git-autocommit

maze.js

// Make an instance of two and place it on the page.
var elem = document.getElementById('draw-shapes');
var params = { width: 400, height: 400 };
var two = new Two(params).appendTo(elem);

const mazeData = [
[0,0,0,1,0,0,0,0],
[0,1,1,1,1,1,1,0],
[1,1,0,0,1,0,1,0],
[0,1,1,0,0,1,1,0],
[0,0,1,1,0,1,0,0],
[0,1,0,1,0,1,1,0],
[0,1,1,1,1,0,1,1],
[0,0,0,0,0,0,0,0]
];

const pathData = [
[0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,1,0],
[1,1,0,0,0,0,1,0],
[0,0,0,0,0,1,1,0],
[0,0,0,0,0,1,0,0],
[0,0,0,0,0,1,1,0],
[0,0,0,0,0,0,1,1],
[0,0,0,0,0,0,0,0]
];

// 2 = left, 3 = right, 4 = up, 5 = down
const policyData = [
[0,0,0,0,0,0,0,0],
[0,3,3,3,3,3,5,0],
[3,4,0,0,4,0,5,0],
[0,4,2,0,0,5,2,0],
[0,0,4,2,0,5,0,0],
[0,5,0,4,0,3,5,0],
[0,3,3,4,2,0,3,3],
[0,0,0,0,0,0,0,0]
];

const addArrow = (x, y, direction) => {

const arrowOrigin = [0, 0];
const arrowRadius = 8;
const arrowHead = two.makePolygon(arrowOrigin[0], arrowOrigin[1], arrowRadius, 3);
arrowHead.fill = 'orangered';
arrowHead.noStroke();
const lineStart = arrowOrigin;
const lineLength = 16;
const arrowTail = two.makeLine(lineStart[0], lineStart[1], lineStart[0], lineStart[1] + lineLength);
arrowTail.stroke = 'orangered';

const group = two.makeGroup();
group.add(arrowHead);
group.add(arrowTail);
group.center(); // Sets the centroid of the grouped objects to the origin.

switch(direction) {
  case 'up':
    group.rotation = 0.0;
    break;
  case 'down':
    group.rotation = Math.PI;
    break;
  case 'left':
    group.rotation = -Math.PI / 2;
    break;
  case 'right':
    group.rotation = Math.PI / 2;
    break;
  default:
    group.rotation = direction;
    break;
}
group.translation.set(x, y);

};

const drawMaze = (mazeData, pathData) => {
const cellDim = 40;
const boardDim = 8;
const boardX = 20;
const boardY = 20;
const cellColorA = 'black';
const cellColorB = 'white';

for (let i = 0; i < boardDim; i++) {
  // Rows
  for (let j = 0; j < boardDim; j++) {
    // Columns
    let cellX = boardX + (cellDim * j);
    let cellY = boardY + (cellDim * i);
    let rect = two.makeRectangle(
      cellX,
      cellY,
      cellDim,
      cellDim
    );

    // Base pattern
    if (mazeData[i][j] == 0) {
      rect.fill = cellColorA;
    } else {
      rect.fill = cellColorB;
    }

    // Path override
    if (pathData[i][j] == 1) {
      rect.fill = '#FF8000';
    }

    // Policy Layer
    const valMap = {
      2: 'left',
      3: 'right',
      4: 'up',
      5: 'down'
    };

    const dirString = valMap[policyData[i][j]];

    if (dirString !== undefined) {
      addArrow(cellX, cellY, dirString);
    }
  }
}

// Agent visualization
let agentLocation = [1, 2];
var circle = two.makeCircle(
  boardX + (agentLocation[0] * cellDim),
  boardY + (agentLocation[1] * cellDim),
  (cellDim / 2) - 10);

// The object returned has many stylable properties:
circle.fill = 'rgb(0, 200, 255)';
circle.stroke = 'orangered'; // Accepts all valid css color
circle.linewidth = 2;
};

drawMaze(mazeData, pathData);


// Don't forget to tell two to render everything
// to the screen
two.update();