​

function drawHex1(t, sw) {

  fill(255);

  strokeWeight(sw);

​

  beginShape();

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

    const p = hexpts[idx];

    const q = hexpts[(idx + 1) % 6];

    vertex(lerp(p.x, q.x, t * 0.5), lerp(p.y, q.y, t * 0.5));

    vertex(lerp(p.x, q.x, 1 - t * 0.5), lerp(p.y, q.y, 1 - t * 0.5));

  }

  endShape(CLOSE);

​

  const p = hexpts[0];

  const q = hexpts[1];

  const x = lerp(p.x, q.x, t * 0.5);

  const y = lerp(p.y, q.y, t * 0.5);

  push();

  for (let idx = 0; idx < 2; ++idx) {

    triangle(x, y, x, -y, x + sqrt(3) * y, 0);

    rotate(PI / 3);

  }

  pop();

}

​

function drawHex2(t, sw) {

  push();

  rotate(PI / 6);

  scale(sqrt(3) / 2.0);

  strokeWeight((sw * 2.0) / sqrt(3));

​

  for (let idx = 0; idx < 2; ++idx) {

    push();

    rotate((idx * PI) / 3);

    translate(50, (50 * sqrt(3)) / 3);

    beginShape();

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

      const p = hexpts[idx];

      vertex((p.x * 2) / 3, (p.y * 2) / 3);

    }

    endShape(CLOSE);

    pop();

  }

​

  fill(255);

  beginShape();

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

    const p = hexpts[idx];

    vertex(p.x * (1 - t / 3), p.y * (1 - t / 3));

  }

  endShape(CLOSE);

​

  pop();

}

​

function setup() {

  createCanvas(400, 400);

​

  hexpts = [];

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

    const ang = (TWO_PI * idx) / 6.0;

    hexpts.push({ x: 50 * cos(ang), y: 50 * sin(ang) });

  }

}

​

function draw() {

  const f = frameCount % 200;

​

  let sw = 3.0;

​

  const sf = pow(sqrt(3), f / 200.0);

  sw /= sf;

​

  background(220);

  push();

  for (let y = -10; y < 20; ++y) {

    for (x = -10; x < 20; ++x) {

      push();

      translate(width / 2, height / 2);

      scale(0.8);

      rotate(lerp(0, PI / 6, f / 200.0));

      scale(sf);

​

      translate(75 * x, 25 * sqrt(3) * x);

      translate(0, y * 50 * sqrt(3));

​

      if (f < 100) {

        drawHex1(f / 100, sw);

      } else {

        drawHex2((f - 100) / 100, sw);

      }

​

      pop();

    }

  }

​

  pop();

}

​

function keyPressed() {

  if (key == "s") {

    saveGif("out.gif", 200, { units : 'frames' } );

  } else if( key === "p" ) {

    save( "jan10.png" );

  } else {

    noLoop();

  }

}

​