[-3, 1, 2],

  [-3, 0, 3],

  [-2, 2, 0],

  [0, 1, -1],

  [-2, 1, 1],

  [3, 0, -3],

  [0, -2, 2],

  [0, 0, 0],

  [2, -2, 0],

  [-1, 2, -1]

];

​

let leftBlack1 = [

  [-3, 1, 2],

  [-3, 0, 3],

  [-2, 2, 0],

  [0, 1, -1],

  [-2, 1, 1],

  [0, 0, 0],

  [-1, 2, -1]

]

​

let resBlack1 = [

  [-3, 1, 2],

  [-3, 0, 3],

  [-2, 2, 0],

  [0, 1, -1],

  [-2, 1, 1],

  [0, 0, 0],

  [-1, 2, -1],

  [-4, 1, 3],

  [-4, 1, 3],

  [-2, 3, -1],

  [1, 0, -1],

  [0, 2, -2],

  [-1, 0, 1],

  [0, -1, 1],

  [1, -2, 1],

  [1, -1, 0],

  [0, -1, 1],

  [-1, 0, 1],

  [1, 0, -1],

  [1, -2, 1],

  [1, -1, 0],

  [-2, 3, -1],

  [0, 2, -2]

]

​

function cubeToAxial(cube) {

  return [cube[0], cube[2]];

}

​

const size = 20;

​

function axialToPoint(hex) {

  let [q, r] = hex

  let x = size * (sqrt(3) * q + 0.5 * sqrt(3) * r)

  let y = size * (0.5 * 3 * r)

  return [x, y]

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(255);

  stroke(0)

  strokeWeight(4)

  translate(width / 2, height / 2)

  for (p of resBlack1.map(cubeToAxial).map(axialToPoint)) {

    fill(0, 255, 0);

    // if (p[0] == 0 && p[1] == 0) fill(255, 0, 255);

    hexagon(p[0], p[1], size / 160)

  }

​

    for (p of black.map(cubeToAxial).map(axialToPoint)) {

    fill(255, 0, 0);

    // if (p[0] == 0 && p[1] == 0) fill(255, 0, 255);

    hexagon(p[0], p[1], size / 160)

  }

​

  for (p of leftBlack1.map(cubeToAxial).map(axialToPoint)) {

    fill(0);

    // if (p[0] == 0 && p[1] == 0) fill(255, 0, 255);

    hexagon(p[0], p[1], size / 160)

  }

​

    stroke(255,0,255)

  strokeWeight(8)

  point(0,0)

​

}

​

function hexagon(transX, transY, s) {

  push();

  translate(transX, transY);

  rotate(TWO_PI / 12)

  scale(s);

  beginShape();

  vertex(-75, -130);

  vertex(75, -130);

  vertex(150, 0);

  vertex(75, 130);

  vertex(-75, 130);

  vertex(-150, 0);

  endShape(CLOSE);

  pop();

}