<commit_before>var paper = require('paper');
function createCanvas(element, options) {
  var canvas = document.createElement('canvas');
  canvas.width = options.width || 100;
  canvas.height = options.height || 100;
  canvas.style.border = "1px solid #0f0";
  element.appendChild(canvas);
  return canvas;
}

function draw(element, world, additional) {
  var canvas = createCanvas(element, { width : world.xLim * 50, height : world.yLim * 50});
  paper.setup(canvas);

	var color = { 
		blocked : 'grey',
		terminal: new paper.Color(1,0,.2, .5),
		agent : 'blue'
	 };

	var scale = 20;
	var scaleCoords = function (coords) { 
		return [coords[0] * scale, coords[1] * scale];
	};

	var position = function(coords) {
		return [coords[0] * scale, (world.yLim - coords[1]) * scale];
	};

	var makeSquare = function(c) {
		var rect = new paper.Rectangle(scaleCoords([0, 0]), scaleCoords([1, 1]));
		var path = new paper.Path.Rectangle(rect, .00);
		path.fillColor = c;
		path.remove();
		return path;
	};

	var makeBackground = function(world) {
		var rect = new paper.Rectangle(scaleCoords([-.5, .5]), scaleCoords([world.xLim, world.yLim]));
		var path = new paper.Path.Rectangle(rect, .00);
		path.fillColor = new paper.Color(1,1,1,0);
		path.strokeColor = 'black';
		path.remove();
		return path;
	};

	var addShapes = function(coords, shape, group) {
		for (var i = 0; i < coords.length; i++) {
			var copy = shape.clone();
			copy.position = position(coords[i]);
			console.log(JSON.stringify(coords[i]) + JSON.stringify(copy.position));
			group.addChild(copy);
		}
	};      

	var addAgentPath = function(trajectory, group) {
		var path = new paper.Path();

		var coords = _.pluck(trajectory, 0);
		var xy = _.map(coords, position);
		path.addSegments(xy);
		console.log(JSON.stringify(xy));
		path.strokeColor = 'black';
		path.dashArray = [1,4];
		group.addChild(path);

		var agent = new paper.Path.Circle(position(coords[coords.length-1]), 4);
		agent.fillColor = color.agent;
		group.addChild(agent);
	};

	
	var terminalSquare = makeSquare(color.terminal);
	var square = makeSquare(color.blocked);

	var group = new paper.Group();
	group.addChild(makeBackground(world));
	addShapes(world.blockedStates, square, group);
	addShapes(world.terminals, terminalSquare, group);

	if (additional) {
		if (additional.trajectory) { 
			addAgentPath(additional.trajectory, group);
		}
	}
	group.fitBounds(paper.view.bounds);

  paper.view.draw();  
}

module.exports = {
  draw: draw
}<commit_msg>add gridlines and refactor<commit_after>var paper = require('paper');
function createCanvas(element, options) {
  var canvas = document.createElement('canvas');
  canvas.width = options.width || 100;
  canvas.height = options.height || 100;
  canvas.style.border = "1px solid black";
  element.appendChild(canvas);
  return canvas;
}

function draw(element, world, additional) {
  var canvas = createCanvas(element, { width : world.xLim * 50, height : world.yLim * 50});
  paper.setup(canvas);

	var color = { 
		blocked : 'grey',
		terminal: new paper.Color(1,0,.2, .5), //transparent magenta
		agent : 'blue'
	 };

	var position = function(coords) {
		return [coords[0], world.yLim - coords[1]];
	};

	var makeSquare = function(c) {
		var rect = new paper.Rectangle(([0, 0]), ([1, 1]));
		var path = new paper.Path.Rectangle(rect, .00);
		path.fillColor = c;
		path.remove();
		return path;
	};

	var makeGrid = function(world) {
		var group = new paper.Group();

		for (var i = 0; i < world.xLim; i++) {
			for (var j = 0; j < world.yLim; j++) {
				var grid = new paper.Path.Rectangle(([i-.5, j+.5]), ([1, 1]));
				grid.strokeColor = new paper.Color(.5, .2);
				grid.fillColor = new paper.Color(1, 0);
				group.addChild(grid);
			}
    }
		return group;
	};

	var addShapes = function(coords, shape, group) {
		for (var i = 0; i < coords.length; i++) {
			var copy = shape.clone();
			copy.position = position(coords[i]);
			group.addChild(copy);
		}
	};      

	var addAgentPath = function(trajectory, group) {
		var path = new paper.Path();

		var coords = _.pluck(trajectory, 0);
		path.addSegments(_.map(coords, position));
		path.strokeColor = 'black';
		path.dashArray = [1,4];
		group.addChild(path);

		var agent = new paper.Path.Circle(position(coords[coords.length-1]), .3);
		agent.fillColor = color.agent;
		group.addChild(agent);
	};

	var group = new paper.Group();
	//draw the world 
	addShapes(world.blockedStates, makeSquare(color.blocked), group);
	addShapes(world.terminals, makeSquare(color.terminal), group);

	group.addChild(makeGrid(world));

	if (additional) { //additional items to be drawn
		if (additional.trajectory) { 
			addAgentPath(additional.trajectory, group);
		}
	}

	group.fitBounds(paper.view.bounds);
  paper.view.draw();  
}

module.exports = {
  draw: draw
}
{'fraction_non_alphanumeric': 0.16333333333333333, 'fraction_numerical': 0.017083333333333332, 'mean_word_length': 3.8790650406504064, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6096470', 'n_tokens_mistral': 1859, 'n_tokens_neox': 1678, 'n_words': 381}