{

  createCanvas(640, 360);

  background(75);

  stroke(0);

  strokeWeight(3);

  let numberOfColumns = 6;

  let hexagonsPerColumn = 8;

  let margin = 20;  // Amount of space around the outside of the grid

  let hexagonHeight = (height - 2 * margin) / (hexagonsPerColumn + 0.5);

  let ySpacing = hexagonHeight; // Vertical distance between the center of one

                                // hexagon and the next one directly beneath it

  // This next little bit here isn't really important for your project,

  // but it makes mine look a little bit nicer in my opinion :D

  // 

  // The apothem of a regular polygon is the distance

  // from its center to the center of one of its sides

  // 

  //       https://en.wikipedia.org/wiki/Apothem

  // 

  let apothem = hexagonHeight / 2;

  // The formula for finding the apothem of a hexagon is

  //       apothem = radius * cos(PI / 6)

  // If we solve for the radius, we get

  let radius = apothem / cos(PI / 6);

  // Left cluster

  // Note how the grid is made of hexagons, but

  // it's still arranged in a rectangular layout

  // Horizontal distance between the center of one hexagon

  // and the hexagon directly to its right

  let leftXSpacing = 2 * radius;

  // In the left grid, I use this formula, but I use a different one on the right

  let leftExtraYMargin = apothem / 2; // This is just to get the left grid to be

                                      // centered better in the canvas

  fill(230, 220, 40); // a nice yellow that I like :)

  for (let i = 0; i < numberOfColumns; ++i)

  {

    // X position of the center of the current column

    let x = margin + radius + leftXSpacing * i;

    // The margin + radius part is just to make it look nicer here in my sketch

    for (let j = 0; j < hexagonsPerColumn; ++j)

    {

      // Y position of the center of the current hexagon in the current column

      let y = margin + apothem + leftExtraYMargin + ySpacing * j;

      // The margin + apothem + leftExtraYMargin part makes it look nicer here

      Hexagon(x, y, radius);

    }

  }

  // Right cluster

  // The grid here is made of hexagons AND

  // it's arranged in a hexagonal layout

  // In the right grid, I used a different formula, but this one looks better.

  let rightXSpacing = radius * (1 + cos(TWO_PI / 6));

  // This puts the columns closer together so that they interlock

  fill(100, 160, 200); // a pleasant blue

  for (let i = 0; i < numberOfColumns; ++i)

  {

    // X position of the center of the current column

    let x = width / 2 + margin + radius + rightXSpacing * i;

    // The width / 2 part just moves it to the right half of the canvas

    // The margin + radius part just makes it look nicer here

    for (let j = 0; j < hexagonsPerColumn; ++j)

    {

      // Y position of the center of the current hexagon in the current column

      let y = margin + apothem + ySpacing * j;

      // The margin + apothem part makes it look nicer here

      // Here's another important bit of business if you go with this approach:

      // 

      // It's important to shift every other column a bit from its neighbors.

      // We can do that by checking whether the column number (which is i) is

      // even or odd.

      // 

      // An even number % 2 is 0, so if i % 2 isn't 0, then it isn't even.

      // If it isn't even, it's odd. If it's odd, we shift it.

      // (We could just as easily shift the even columns instead.)

      if (i % 2 != 0)

        y += apothem;

      // We shift by half the height of the hexagon, which equals its apothem

      Hexagon(x, y, radius);

    }

  }

}

​

​

function Hexagon(x, y, r)

{

  let delta = TWO_PI / 6;

  beginShape();

  for (let i = 0; i < 6; ++i)

  {

    let vx = x + r * cos(delta * i);

    let vy = y + r * sin(delta * i);

    vertex(vx, vy);

  }

  endShape(CLOSE);

}

​