Spatial Grid

by dirtyd77

HTML

<script src="https://rawgit.com/mourner/rbush/master/rbush.js"></script>
<canvas id="canvas" />

CSS

#canvas{
  border: 1px solid;
}

Babel + JSX

const canvasHeight = 400;
const canvasWidth = 400;
const cellWidth = canvasWidth / 10;
const cellHeight = canvasHeight / 10;
const gridTree = rbush();
let mouse = {
	x: NaN,
  y: NaN
};

const canvas = document.getElementById('canvas');
canvas.height = 400;
canvas.width = 400;
canvas.onmousemove = mouseMove;

const context = canvas.getContext('2d');
context.translate(0.5, 0.5);

createTree();
doCanvasStuff();

function mouseMove ({offsetX, offsetY}) {
	mouse.x = offsetX;
  mouse.y = offsetY;
}

function doCanvasStuff () {
	requestAnimationFrame(doCanvasStuff);
  clear();
  drawGrid();
  draw();
}

function createTree() {
for (let i = 0; i < canvasWidth; i += cellWidth) {
  	let xMin = i;
    let xMax = i + cellWidth;
    
    for (let j = 0; j < canvasHeight; j += cellHeight) {
      let yMin = j;
    	let yMax = j + cellHeight;
      let cell = [xMin, yMin, xMax, yMax];
      gridTree.insert(cell);
    }
	}
}

function clear () {
	context.fillStyle = 'white';
  context.fillRect(0, 0, canvasWidth, canvasHeight);
}

function drawGrid () {
	context.strokeStyle = 'black';
	context.beginPath();
  for (let i = 0; i < canvasWidth; i += cellWidth) {
    for (let j = 0; j < canvasHeight; j += cellHeight) {
      drawGridLines(i, j);
  	}
  }
	
  context.stroke();
}

function drawGridLines (x, y) {
	context.moveTo(0, y);
  context.lineTo(canvasWidth, y);
  context.moveTo(x, 0);
  context.lineTo(x, canvasHeight);
}

function drawMouseCircle () {
	let radius = 10;
  
  let xMin = mouse.x - radius;
  let xMax = mouse.x + radius;
  let yMin = mouse.y - radius;
  let yMax = mouse.y + radius;
  
  let cell = [xMin, yMin, xMax, yMax];
  
  let result = gridTree.search(cell);
  context.beginPath();
  
  result.forEach((r) => {
    let [rMinX, rMinY, rMaxX, rMaxY] = r;
    context.fillStyle = 'gray';
    context.beginPath();
    context.moveTo(rMinX, rMinY);
    context.lineTo(rMinX, rMaxY);
    context.lineTo(rMaxX, rMaxY);
    context.lineTo(rMaxX, rMinY);
   ...