const TWO_PI = Math.PI * 2;

const SIDE = 8;

const N = 30;

const M = 20;

document.body.style.margin = 0;

const c = document.body

  .appendChild(document.createElement('canvas'))

  .getContext('2d');

onresize = () => {

  c.canvas.width = innerWidth;

  c.canvas.height = innerHeight;

  draw();

};

onresize();

function draw() {

  c.fillStyle = '#000';

  c.fillRect(0, 0, innerWidth, innerHeight);

  const sx = innerWidth / SIDE;

  const sy = innerHeight / SIDE;

  for (let i = 0; i <= SIDE; i++) {

    for (let j = 0; j <= SIDE; j++) {

      const n1 = ~~(Math.random() * N);

      const n2 = ~~(Math.random() * N);

      const n3 = ~~(Math.random() * N);

      const m = ~~(Math.random() * Math.random() * M);

      let a = 1;

      let b = 1;

      if (Math.random() < 0.5) {

        a = ~~(Math.random() * 8) - 4;

      }

      if (Math.random() < 0.5) {

        b = ~~(Math.random() * 8) - 4;

      }

      superShape(a, b, m, n1, n2, n3, { x: i * sx, y: j * sy }, 40);

    }

  }

}

// Superformula (equations from):

// https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333

// http://en.wikipedia.org/wiki/Superformula

function superShape(a, b, m, n1, n2, n3, pnt, scale) {

  let r = 0;

  let p = 0;

  let xp = 0;

  let yp = 0;

  while (p <= TWO_PI) {

    var ang = (m * p) / 4;

    with (Math) {

      r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1);

      xp = r * cos(p);

      yp = r * sin(p);

    }

    p += 0.01;

    c.fillStyle = '#fff';

    c.fillRect(pnt.x + xp * scale, pnt.y + yp * scale, 1, 1);

  }

}