​

let useShading = true;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let radius = 9;

​

  strokeWeight(0.5);

  if(useShading) {

    background(150);

    stroke(30);

  } else {

    background(0);

    stroke(200);

  }

​

  let ydelta = sin(PI / 3) * radius;

  let even = true;

  for (let y = 0; y < height; y += ydelta) {

    let offset = 0;

    if (even) {

      offset = radius * 1.5;

    }

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

      hexagon(x + offset, y, radius);

    }

    even = !even;

  }

}

​

function hexagon(x, y, r) {

  let angle = 0;

  if(useShading) {

    let shade = getShading(x, y);

    fill(shade);

  } else {

    noFill();

  }

  beginShape();

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

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

    let x1 = p.x;

    let y1 = p.y;

    vertex(p.x, p.y);

    angle += PI / 3;

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

    vertex(p.x, p.y);

  }

  endShape(CLOSE);

}

​

function perlinize(x, y) {

  const scale = 0.01;

  const strength = 10;

  const angle = noise(x * scale, y * scale) * (PI*3);

  return {

    x: x + cos(angle) * strength,

    y: y + sin(angle) * strength,

  }

}

​

function getShading(x, y) {

  const scale = 0.01;

  const value = (noise(x * scale, y * scale) + 1) / 2;

  // const shade = 255 - value * 255;

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

  // const value = noise(x * scale, y * scale);

  // const shade = map(value, 0, 1, -30, 285);

  return shade;

}

​