​

const radius = 19;

const useShading = true;

const ydelta = Math.sin(Math.PI / 3) * radius;

let animOffset = 0;

const scale = 0.012;

const strength = 20;

​

function setup() {

  // createCanvas(windowWidth, windowHeight);

  createCanvas(600, 600);

  strokeWeight(0.5);

}

​

function draw() {

  if (useShading) {

    background(150);

    stroke(30);

  } else {

    background(0);

    stroke(200);

  }

  animOffset += 0.00125;

​

  let even = true;

  for (let y = -ydelta*2; y < height+ydelta*2; y += ydelta) {

    let offset = 0;

    if (even) {

      offset = radius * 1.5;

    }

    for (let x = -radius*3; x < width+radius*3; x += radius * 3) {

      hexagon(x + offset, y, radius);

    }

    even = !even;

  }

  animOffset += 0.01;

}

​

function hexagon(x, y, r) {

  let angle = 0;

  let p;

​

  beginShape();

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

    p = perlinize(x + cos(angle) * r, y + sin(angle) * r);

    vertex(p.x, p.y);

    angle += PI / 3;

  }

  endShape(CLOSE);

​

  if (useShading) {

    fill(p.shade);

  } else {

    noFill();

  }

}

​

function perlinize(x, y) {

  const n = noise(x * scale, y * scale - animOffset);

  const angle = n * PI;

  const value = (n + 1) / 2;

  const shade = map(value, 0.5, 1, 0, 255);

  return {

    x: x + cos(angle) * strength,

    y: y + sin(angle) * strength,

    shade: shade,

  };

}

​