​

const pscale = 0.005;

const strength = 40;

const radius = 9;

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

const colorArr = [

  [3, 7, 30],

  [55, 6, 23],

  [106, 4, 15],

  [157, 2, 8],

  [208, 0, 0],

  [220, 47, 2],

  [232, 93, 4],

  [244, 140, 6],

  [250, 163, 7],

  [255, 186, 8]

];

​

let aoffset = 0;

​

​

function setup() {

  // createCanvas(windowWidth, windowHeight);

  createCanvas(600, 600);

  strokeWeight(0.5);

  background(0);

  stroke(200);

}

​

function draw(){

  translate(0, -radius*3)

  background(150,5);

  stroke(30);

  let even = true;

  for (let y = -ydelta*2; y < height+ydelta*4; 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;

  }

  aoffset += 0.02;

}

​

​

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);

  let c = floor(map(p.shade, 0, 255, colorArr.length, 0));

  stroke(colorArr[c][2], colorArr[c][1], colorArr[c][0],200);

  fill(colorArr[c][0], colorArr[c][1], colorArr[c][2],20);

​

}

​

function perlinize(x, y) {  

  // const angle = noise(x * pscale, y * pscale + aoffset) * PI;

  const n = noise(x * pscale, y * pscale - aoffset );

  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

  }

}

​