html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #292a33;
  overflow: hidden;
}

const minSize = 1;
const maxSize = 256; // 2の倍数にする
const min = 0;
const max = 1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();

  generateHeightmap(0, 0, maxSize, random(), random(), random(), random());
}

function generateHeightmap(x, y, size, tl, tr, bl, br) {
  if (size === minSize) {
    const value = (tl + tr + bl + br) / 4;
    fill(value * 256);
    rect(x, y, minSize, minSize);
  } else {
    let midPoint = (tl + tr + bl + br) / 4 + getRandomHeight(size);
    if (midPoint < min) {
      midPoint = min;
    }
    if (max < midPoint) {
      midPoint = max;
    }
    const top = (tl + tr) / 2;
    const bottom = (bl + br) / 2;
    const left = (tl + bl) / 2;
    const right = (tr + br) / 2;

    size /= 2;
    generateHeightmap(x, y, size, tl, top, left, midPoint);
    generateHeightmap(x + size, y, size, top, tr, midPoint, right);
    generateHeightmap(x, y + size, size, left, midPoint, bl, bottom);
    generateHeightmap(x + size, y + size, size, midPoint, right, bottom, br);
  }
}

function getRandomHeight(value) {
  return ((random() - 0.5) * value) / maxSize;
}