let distV = 0;

let distH = 0;

let maxTiling = 10;

​

let place;

let moves = {};

let colors = [];

let fromColor;

let toColor;

let canvasSize = 400;

​

​

function setup() {

  createCanvas(canvasSize, canvasSize);

​

  fromColor = color(218, 165, 32);

  toColor = color(72, 61, 139);

​

  distV = radius * sqrt(3);

  distH = 2 * radius * 0.75

​

  moves = {

    down: createVector(0, distV),

    downRight: createVector(distH, distV * 0.5),

    downLeft: createVector(-distH, distV * 0.5),

    upRight: createVector(distH, -distV * 0.5),

    upLeft: createVector(-distH, -distV * 0.5),

    up: createVector(0, -distV)

  };

}

​

​

​

​

​

​

function draw() {

  background(255);

  fill(255)

  colorMode(RGB);

​

  let mousePosX = constrain(mouseX, 0, canvasSize) / canvasSize;

  let tilingRadius = floor(mousePosX * maxTiling);

​

  for (let k = 0; k <= tilingRadius; k++) {

    colors[k] = lerpColor(fromColor, toColor, k / tilingRadius)

  }

​

  place = createVector(canvasSize / 2, canvasSize / 2)

​

​

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

  fill(colors[0])

  polygon(place.x, place.y, radius, 6);

​

  for (let j = 1; j <= tilingRadius; j++) {

    fill(colors[j])

​

    executeMove("up", 1);

    executeMove("downRight", j);

    executeMove("down", j);

    executeMove("downLeft", j);

    executeMove("upLeft", j);

    executeMove("up", j);

    executeMove("upRight", j);

  }

}

​

​

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

​

​

​

function executeMove(moveName, times) {

  for (let i = 1; i <= times; i++) {

    place.add(moves[moveName]);

    polygon(place.x, place.y, radius, 6);

  }

}

​

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

  let angle = TWO_PI / npoints;

  beginShape();

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

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

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

    vertex(sx, sy);

  }

  endShape(CLOSE);

}