let hexArray = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  hexgrid(10, 10, 80);

}

​

function mouseClicked() {

  for (let i = 0; i < hexArray.length; i++) {

    hexArray[i].clicked();

  }

}

​

function draw() {

  frameRate(24);

  background(255);

​

  for (let i = 0; i < hexArray.length; i++) {

    hexArray[i].display();

  }

}

​

function hexgrid(numColumns, numRows, size) {

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

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

      let h = ((size / 2) * sqrt(3)) / 2;

      let startingPosX = windowWidth / 2 - ((size / 3) * 2 * numColumns) / 2;

​

      let startingPosY = windowHeight / 2 - h * numRows;

​

      a = new Hexagon(

        startingPosX + (size / 4) * 3 * i,

        startingPosY + h * (i % 2) + h * 2 * j,

        size

      );

​

      hexArray.push(a);

    }

  }

}

​

function isHovering(x, y, size) {

  if (dist(mouseX, mouseY, x, y) < size) {

    return true;

  } else if (dist(mouseX, mouseY, x, y) > size) {

    return false;

  }

}

​

class Hexagon {

  constructor(x, y, size) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.state = 0;

    this.string = ["W", "L", "F","M"];

    this.fillColor = [[0,113,188],[217,224,33],[0,146,69],[117,76,36]];

    this.stokeColor = [[0,113,188],[217,224,33],[0,146,69],[117,76,36]];

    this.textColor = 0;

  }

​

  display() {

    push();

    let d = dist(mouseX, mouseY, this.x, this.y);

​

    fill(this.fillColor[this.state]);

    stroke(this.stokeColor[this.state]);

​

    // if (this.hover()) {

    //   strokeWeight(map(d, 0, this.size / 2, this.size / 4, 0));

    // } else {

    //   strokeWeight(3);

    // }

​

    let h = ((this.size / 2) * sqrt(3)) / 2;

​

    // beginClip();

    // beginShape();

    // vertex(this.x - this.size / 2, this.y);

    // vertex(this.x - this.size / 4, this.y - h);

    // vertex(this.x + this.size / 4, this.y - h);

    // vertex(this.x + this.size / 2, this.y);

    // vertex(this.x + this.size / 4, this.y + h);

    // vertex(this.x - this.size / 4, this.y + h);

    // endShape(CLOSE);

    // endClip();

​

    beginShape();

    vertex(this.x - this.size / 2, this.y);

    vertex(this.x - this.size / 4, this.y - h);

    vertex(this.x + this.size / 4, this.y - h);

    vertex(this.x + this.size / 2, this.y);

    vertex(this.x + this.size / 4, this.y + h);

    vertex(this.x - this.size / 4, this.y + h);

    endShape(CLOSE);

​

//     noStroke();

//     fill(this.textColor);

//     textAlign(CENTER, CENTER);

//     textSize(20);

//     text(this.string[this.state], this.x, this.y + this.size / 30);

    pop();

  }

​

  circles() {

    push();

    strokeWeight(2);

    fill(this.fillColor[this.state]);

    stroke(this.fillColor[this.state]);

    let h = ((this.size / 2) * sqrt(3)) / 2;

    circle(this.x - this.size / 2, this.y, this.size / 10);

    circle(this.x - this.size / 4, this.y - h, this.size / 10);

    circle(this.x + this.size / 4, this.y - h, this.size / 10);

    circle(this.x + this.size / 2, this.y, this.size / 10);

    circle(this.x + this.size / 4, this.y + h, this.size / 10);

    circle(this.x - this.size / 4, this.y + h, this.size / 10);

    pop();

  }

​

  clicked() {

    if (this.hover()) {

      this.state = (this.state + 1) % 4;

    }

  }

​

  hover() {

    let h = ((this.size / 2) * sqrt(3)) / 2;

    if (isHovering(this.x, this.y, h)) {

      return true;

    } else {

      return false;

    }

  }

}

​