p5js-HexagonGrid.js

//https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js


  var move = true;
  var circle2rotate = 0;
  var circle = 0;
  var since = 0;
  var started = 0;
  var degrees = 0;
  var x, y;
  var vx = 5;
  var vy = 2;
  var r = 25;
  var hexagons = [];

  function Hexagon(x, y, radius, circle, angle = 30) {

    this.x = x;
    this.y = y;
    this.radius = radius;
    this.circle = circle;
    this.angle = angle;

  }

  function setup() {
    createCanvas(500, 500);

    x = width / 2;
    y = height / 2;
    frameRate(60)
    createHexagons();
  }

  function draw() {
    background(0);
    for (hexagon of hexagons) {
      if (move) {
        if (hexagon.circle == circle2rotate) {
          since = frameCount - started;
          if (since > 2 && since < 18) {
            hexagon.angle += 2;
          }
          if (since > 17) {
            circle2rotate++;
            started = frameCount;
          }
          if (circle2rotate > circle) {
            circle2rotate = 0;
            //move = false;//false to stop loop
          }
        }
      }
      placeFigure(hexagon.x, hexagon.y, hexagon.radius, 6, hexagon.angle)
    }
  }

  function createHexagons() {
    var count = 0;
    var points = 6
    radius = 40;
    var hexagon0 = new Hexagon(x, y, radius / 2, 0)
    hexagons.push(hexagon0);
    for (var i = 0; i < y*1.5; i += 40) {
      var angle = TWO_PI / points;
      circle++;
      for (var a = 0; a < TWO_PI; a += angle) {
        var sx = cos(a) * (radius + i);
        var sy = sin(a) * (radius + i);
        var sx2 = cos(a - angle) * (radius + i);
        var sy2 = sin(a - angle) * (radius + i);
        var d = int(dist(sx, sy, sx2, sy2));
        var numFigures = Math.ceil(d / 40);
        for (var j = 0; j < numFigures; j++) {
          var middleX = ((sx - sx2) / numFigures) * j + sx2;
          var middleY = ((sy - sy2) / numFigures) * j + sy2;
          var hexagon = new Hexagon(middleX + x, middleY + y, radius / 2, circle)
          hexagons.push(hexagon);
        }
      }
    }
  }

  function mousePressed() {
    if (!move) {
      started = frameCount;
      move = true;
    }
  }

  function placeFigure(x, y, radius, points, angle) {
    push();
    translate(x, y);
    angleMode(DEGREES);
    rotate(angle)
    angleMode(RADIANS);
    polygon(0, 0, radius, points);
    pop();
  }

  function polygon(x, y, radius, npoints) {
    var angle = TWO_PI / npoints;
    beginShape();
    for (var a = 0; a < TWO_PI; a += angle) {
      var sx = x + cos(a) * radius;
      var sy = y + sin(a) * radius;
      vertex(sx, sy);
    }
    endShape(CLOSE);
  }