createCanvas(400, 400);

  rectMode(CENTER);

  angleMode(DEGREES);

  noLoop();

}

​

function draw() {

  background(0,255,255);

  noStroke();

  var r = random(4,24);

  var d = 2 * r;

  var h = d*sin(60);

  var dx = h*cos(30);

  var x = 0;

  var y = 0;

  // Iterate the pattern to fill the screen width x height

  for (var i = 0; i < 1+width / dx; i++) {

    for (var j = 0; j < 1+height / h; j++) {

      fill(0, random(20, 255), 0);

      hexagon(x,y,r);

      // rect(x, y, d, d);

      // fill(random(20, 255), 0, 0);

      // ellipse(x, y, d);

      // fill(0, 0, random(20, 255));

      // triangle(x + r * cos(30), y + r * sin(30), x + r * cos(150), y + r * sin(150), x + r * cos(270), y + r * sin(270));

      y += h;

    }

    if(i%2==1) {

      y = 0;

    } else {

      y = -h/2

    }

    x += dx;

  }

}

​

function hexagon(x,y,r) {

  beginShape();

    for(var s = 0; s < 6; s++) {

    vertex(x+r*cos(s*60), y+r*sin(s*60));

  }

    endShape(CLOSE);

}