let hexagons;

​

function setup() {

    createCanvas(1920, 1080);

    noLoop();

    // randomSeed(42);

    textAlign(CENTER, CENTER);

    r = 50;

    s = sqrt(3 * pow(r, 2) / 4);

    hexagons = [];

    const numTiles = 3;

    // create hexagons

    let counter = 0;

    for (let y = 0; y < height + s; y += 2*s) {

        for (let x = 0; x < width + r; x += 3*r) {

            hexagons.push(new Hexagon(x, y, r, int(random(numTiles)) ));

            hexagons.push(new Hexagon(x + 1.5 * r, y + s, r, int(random(numTiles))));

        }

    }

}

​

function draw() {

    background(220);

    let nearestHexagon;

    hexagons.forEach(h => h.render());

    stroke(200, 50, 50);

}

​

function hexagon(x, y, r) {

    beginShape();

    hexPoints(x, y, r).forEach(p => vertex(p.x, p.y));

    endShape(CLOSE);

}

​

function hexPoints(x, y, r) {

  const points = [];

  for (let a = 0; a < 2 * PI; a += 2 * PI / 6) {

        let x2 = cos(a) * r;

        let y2 = sin(a) * r;

        points.push({x: x + x2, y: y + y2});

    }

  return points;

}

​

function pLine(first, second) {

  line(first.x, first.y, second.x, second.y);

}

​

class Hexagon {

    constructor(x, y, r, tileNumber) {

        this.x = x;

        this.y = y;

        this.r = r;

        this.tileNumber = tileNumber;

    }

    render() {

        noFill();

        stroke(0);

        strokeWeight(3);

        stroke(0, 0, 0);

        // hexagon(this.x, this.y, this.r);

        const pts = hexPoints(this.x, this.y, this.r);

        const center = {x: this.x, y: this.y};

        switch(this.tileNumber) {

          case 0: 

            pLine(pts[0], pts[3]);

            pLine(pts[1], pts[4]);

            pLine(pts[2], pts[5]);

            break;

          case 1: 

            pLine(center, pts[5]);

            pLine(center, pts[4]);

            pLine(pts[3], pts[4])

            break;

          case 2:

            pLine(pts[0], pts[1]);

            pLine(pts[1], pts[2]);

            pLine(pts[1], pts[4]);

            break;

          default: break; 

        }

    }

}