​

const COLCOUNT = 8;

const ROWCOUNT = 8;

​

const hexList = [];

const hexGrid = [];

​

const SHIFTLEFT = 50;

const SHIFTDOWN = 100;

​

const OFF = 0;

const ON = 1;

const OVER = 2;

​

function setup() {

  createCanvas(400, 400);

​

  for (let j = 0; j < ROWCOUNT; j++) {

    hexGrid[j] = [];

    for (let i = 0; i < COLCOUNT; i++) {

      const hex = makeHexForLoc(i, j);

      hexList.push(hex);

      hexGrid[j][i] = hex;

    }

  }

}

​

function draw() {

  background(220);

  push();

  translate(SHIFTLEFT, SHIFTDOWN);

  hexList.map((hex) => {

    drawHex(hex)

  });

  pop();

  noLoop();

}

​

function makeHexForLoc(i, j) {

  const x = (i + (j % 2) / 2) * BASESZ;

  const y = (BASESZ * 0.75) * j;

  return {

    i,

    j,

    x,

    y,

    mode: OFF

  };

}

​

​

​

function mouseMoved() {

  hexList.map((hex) => {

    hex.mode = OFF;

  });

​

  const boardX = mouseX - SHIFTLEFT;

  const boardY = mouseY - SHIFTDOWN;

​

  let pickedHex = null;

  hexList.map((hex) => {

    if (dist(boardX, boardY, hex.x, hex.y) < BASESZ / 2) {

      pickedHex = hex;

    }

  });

  if (pickedHex) {

    //Check Easts

    getOpenHexesInDir(pickedHex,()=>1,()=>0).map(hex => hex.mode = ON);

    //Check Wests

    getOpenHexesInDir(pickedHex,()=>-1,()=>0).map(hex => hex.mode = ON);

    //Check North Easts    

    getOpenHexesInDir(pickedHex,(i,j)=>j%2,()=>-1).map(hex => hex.mode = ON);

    //Check North Wests    

    getOpenHexesInDir(pickedHex,(i,j)=>-(j+1)%2,()=>-1).map(hex => hex.mode = ON);

    //Check South Easts

    getOpenHexesInDir(pickedHex,(i,j)=>j%2,()=>1).map(hex => hex.mode = ON);

    //Check South Wests    

    getOpenHexesInDir(pickedHex,(i,j)=>-(j+1)%2,()=>1).map(hex => hex.mode = ON);

    pickedHex.mode = OVER;

  }

  loop();

}

​

​

function getOpenHexesInDir(hex,iTransform,jTransform){

  let {

    i,

    j

  } = hex;

   const res = [];

  while (i < COLCOUNT && j < ROWCOUNT && i >= 0 && j >= 0) {

    res.push(hexGrid[j][i]);

    i += iTransform(i,j);

    j += jTransform(i,j);

  }

  return res;

}

​

function drawHex(hex) {

  const {

    x,

    y,

    mode

  } = hex;

  const sz = BASESZ / 2;

  push();

  translate(x, y);

  //sides

  line(-sz, -sz / 2, -sz, sz / 2);

  line(sz, -sz / 2, sz, sz / 2);

​

  //top

  line(-sz, -sz / 2, 0, -sz);

  line(0, -sz, sz, -sz / 2);

​

  //bottom

  line(-sz, sz / 2, 0, sz);

  line(0, sz, sz, sz / 2);

​

  fill(255);

  if (mode === OVER) fill(255, 128, 128);

  if (mode === ON) fill(128, 128, 255);

  circle(0, 0, sz * 1.5);

​

  pop();

}