let canvasS = 400;

​

function setup() {

​

  createCanvas(canvasS, canvasS);

  background(200);

  noStroke()

  let colors = []

  colors[0] = color(255, 204, 0);

  colors[1] = color(24, 204, 0)

​

  let angleCos30 = cos(30 * PI / 180) * radius;

  let angleSin30 = sin(30 * PI / 180) * radius;

​

  let moves = {

    down: createVector(0, radius * (3 / 2)),

    downRight: createVector(

      vecByAngle(30,radius,"cos"), vecByAngle(30,radius,"sin")),

    // downLeft: createVector(-angleCos30, angleSin30),

    upRight: createVector(

      vecByAngle(30,radius,"cos"), -vecByAngle(30,radius,"sin")),

    // upLeft: createVector(-angleCos30, -angleSin30),

    // up: createVector(0, -radius)

  };

​

  /////////////////////////////////////////////////////////////

​

  let tilingSize = createVector(ceil(canvasS / 100), ceil(canvasS / 100 * (5 / 3)));

  let place = createVector(0, 0);

  for (let j = -tilingSize.x; j <= tilingSize.x; j++) {

​

    let ctrl2 = abs(j % 2);

​

    for (let i = -tilingSize.y; i <= tilingSize.y; i++) {

​

      let ctrl = abs((i - ctrl2) % 2);

      fill(colors[ctrl]);

      polygon(place.x, place.y, radius, 3, 30 + ctrl * 180)

​

      if (ctrl == 0)

        place.add(moves["upRight"]);

      else if (ctrl == 1)

        place.add(moves["downRight"]);

    }

​

    place.set(0, place.y);

    place.add(moves["down"]);

​

  }

}

​

​

function vecByAngle(angle, magnitude, cosOrSin){

  if (cosOrSin == "sin")

    return sin(angle * PI / 180) * magnitude;

  else if (cosOrSin == "cos")

    return cos(angle * PI / 180) * magnitude;

}

​

​

function polygon(x, y, radius, npoints, rotation) {

  let angle = TWO_PI / npoints;

  let offsetAngle = rotation * PI / 180;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a + offsetAngle) * radius;

    let sy = y + sin(a + offsetAngle) * radius;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}