function setup() {
  createCanvas(800, 800);
  noStroke();
  fill(0, 0, 80);
}

function draw() {
  var size = width;
  var division = 12;
  var distance = dist(touchX, touchY, width * 0.5, height * 0.5);

  if (distance < size * 0.5) {
    division = int(map(distance, 0, size, 2, 90)) * 2; // [4 .. 180]
  }

  background(255);

  drawPattern(width * 0.5, height * 0.5, size, division, true);
  drawPattern(width * 0.5, height * 0.5, size, division, false);
}

function drawPattern(x, y, size, div, isDrawLargeArea) {
  var rotation = PI / div;
  var rectTypeNum = div / 2 - 1;
  var rects = [];

  var vertices = [];
  for (var i = 0; i < div; i++) {
    var angle = i * TWO_PI / div;
    vertices[i] = new p5.Vector(cos(angle), sin(angle));
  }

  // totalWidth is approx.
  var totalWidth = 0;
  for (var i = 0; i < rectTypeNum; i++) {
    rects[i] = new RectPart(
      p5.Vector.dist(vertices[0], vertices[div / 2 - (i + 1)]),
      p5.Vector.dist(vertices[0], vertices[i + 1]));

    totalWidth += rects[i].w;
  }
  totalWidth *= 2;
  totalWidth += rects[0].w;

  // set origin and scale
  push();
  translate(x, y);
  rotate(frameCount * 0.001);
  scale(size / totalWidth);

  // offset
  if (!isDrawLargeArea) {
    var offsetY = rects[0].h * 0.5;
    if (rectTypeNum % 2 == 0) {
      offsetY += 1.0;
    } else {
      offsetY += rects[0].w * 0.5;
    }
    for (var i = 0; i < rectTypeNum; i++) {
      if (i % 2 == rectTypeNum % 2) {
        offsetY += sin(HALF_PI - rotation) * rects[i].w;
      } else {
        offsetY += rects[i].w;
      }
    }
    translate(0, offsetY);
  }

  for (var i = 0; i < div; i++) {
    push();
    for (var j = 0; j < rects.length; j++) {
      var rect = rects[j];

      if (j == 0) {
        translate(rect.w * 0.5, rect.h * -0.5);
      }

      if (i > div / 2 && i < div - j) {
        if (!isDrawLargeArea) {
          rect.draw();
        }
      } else if (i > 0 && i < div / 2 - j) {
      } else {
        if (isDrawLargeArea) {
        rect.draw();
        }
      }

      translate(rect.w, rect.h);
      rotate(rotation);
    }
    pop();
    rotate(rotation * 2);
  }
  pop();
}

var RectPart = function(pw, ph) {
  this.w = pw;
  this.h = ph;
}

RectPart.prototype.draw = function() {
  rect(0, 0, this.w, this.h);
}

// var frameEl = window.frameElement;
// if (frameEl) {
//   frameEl.style.height = "800px";
// }