Hexagon Grid

var gB, fullRes, windowRes;

var requiredFrames = 360;

​

function setup() {

  windowRes = min(windowWidth, windowHeight);

  createCanvas(windowRes, windowRes);

  imageMode(CENTER);

  gB = createGraphics(fullRes = 1024, fullRes);

  gB.colorMode(HSB, 360);

  gB.rectMode(CENTER);

  gB.fill(360);

}

​

function draw() {

  gB.background(360, 1);

  gB.resetMatrix();

  gB.stroke(0);

  gB.noFill();

​

  var hexagonCount = 32;

  var hexagonRadius = fullRes / hexagonCount;

  var hexagonHeight = hexagonRadius * 2;

  var hexagonWidth = sqrt(3) / 2 * hexagonHeight;

  var offsetCounter = 0;

  for (var i = 0; i < fullRes / hexagonRadius; i += 1) {

    for (var j = 0; j < fullRes / hexagonRadius; j += 1) {

      let xPos = hexagonWidth * j;

      let yPos = hexagonHeight * 0.75 * i;

      if (offsetCounter % 2 === 0) {

      } else {

        xPos += hexagonWidth / 2;

      }

      gB.push();

      gB.translate(xPos, yPos);

      // gB.rotate(0.25 * TAU);

      gB.beginShape();

      for (let k = 0; k < TAU; k += TAU / 6) {

        gB.vertex(hexagonRadius * cos(k + PI/2), hexagonRadius * sin(k + PI /2));

      }

      gB.endShape(CLOSE);

      gB.pop();

    }

    offsetCounter += 1;

  }

​

  background(360);

  displayBuffer(gB);

}

​

function keyPressed() {

  if (key === "r") {

    windowRes = 512;

    resizeCanvas(512, 512);

    saveGif('export', requiredFrames, {

      delay: 0,

      units: "frames"

    });

  }

  if (key === "s") {

    saveCanvas();

  }

}

​

function displayBuffer(buffer) {

  image(buffer, windowRes / 2, windowRes / 2, windowRes, windowRes);

}

​

function windowResized() {

  windowRes = min(windowWidth, windowHeight);

  resizeCanvas(windowRes, windowRes);

}