(() => {

  const TWO_PI = Math.PI * 2;

  const m = new Float32Array([

    0, 0, 0, 0,

    0, 0, 0, 0,

    0, 0, 0, 0,

    0, 0, 0, 0

  ])

  const vert = `

    attribute vec3 vec;

    uniform mat4 mat;

    void main(void) {

      gl_Position = mat * vec4(vec, 1.0);

      gl_PointSize = 2.0;

    }

  `

  const frag = `

    void main(void) {

      gl_FragColor = vec4(1., 1., 1., .25);

    }

  `

  document.body.style.background = '#232323'

  const gl = document.body

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

    .getContext('webgl', {

      preserveDrawingBuffer: true,

      powerPreference: 'high-performance'

    })

  Object.assign(gl.canvas.style, {

    position: 'absolute',

    left: '50%',

    top: '50%',

    transform: 'translate(-50%, -50%)',

    outline: '1px solid gray'

  })

  with(gl) {

    const NUM = 50

    const radius = 0.7

    let verts = []

    // 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, scale, x = 0, y = 0, z = 0, rx=0, ry=0, rz=0) {

      const { random, pow, abs, cos, sin } = Math

      // with(Math) { // destrucuring vs the dreaded `with`

        let r = 0

        let p = 0

        let xp = 0

        let yp = 0

        let zp = 0

        let rotX = rx

        let rotY = ry  

        let rotZ = rz

        let cosX = cos(rotX)

        let cosY = cos(rotY)

        let sinX = sin(rotX)

        let sinY = sin(rotY)

        while (p <= TWO_PI) {

          let ang = (m * p) / 4

          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.05

          zp = zp * cosX - xp * sinX

          xp = zp * sinX + xp * cosX

          yp = yp * cosY - zp * sinY

          zp = yp * sinY + zp * cosY

          verts[inc] = xp * scale + x

          verts[inc + 1] = yp * scale + y

          verts[inc + 2] = zp * scale + z

          inc += 3;

        }

      // }

    }

    let inc = 0; 

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

      let m =  Math.random() * 20

      let n1 = Math.random() * 30

      let n2 = Math.random() * 30

      let n3 = Math.random() * 30

      let scl = Math.random() * .2

      let x = Math.random() * Math.cos(i)

      let y = Math.random() * Math.sin(i);

      let z = Math.random() - .5

      let rx = Math.random() * TWO_PI,

          ry = Math.random() * TWO_PI,

          rz = Math.random() * TWO_PI;

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

        superShape(1, 1, 1 + m,

          n1 / j,

          n2,

          n3, 

          scl- j / 100,

          x,

          y,

          z, rx, ry, rz)

        }

    }

    const overts = verts.concat()

    const leng = verts.length / 3

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

    const vs = createShader(VERTEX_SHADER)

    shaderSource(vs, vert)

    compileShader(vs)

    const fs = createShader(FRAGMENT_SHADER)

    const sp = createProgram()

    shaderSource(fs, frag)

    compileShader(fs)

    attachShader(sp, vs)

    attachShader(sp, fs)

    linkProgram(sp)

    useProgram(sp)

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

    enableVertexAttribArray(vec)

    const matLoc = getUniformLocation(sp, 'mat')

    function rot(x, y, z) {

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

      const sinA = Math.sin(x)

      const cosA = Math.cos(x)

      const sinB = Math.sin(y)

      const cosB = Math.cos(y)

      const sinY = Math.sin(z)

      const cosY = Math.cos(z)

      m[0] = cosA * cosB

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

      m[3] = 0

      m[4] = sinA * cosB

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

      m[7] = 0

      m[8] = -sinB

      m[9] = cosB * sinY

      m[10] = cosB * cosY

      m[11] = m[12] = m[13] = 0

      m[15] = 1

      uniformMatrix4fv(matLoc, false, m)

    }

    onresize = () => {

      const {

        canvas

      } = gl

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

      viewport(0, 0, size, size)

    }

    onresize()

    let rx = 0, ry = 0, rz = 0

    let t = 0;

    function loop() {

      // rx += 0.01

      // ry += 0.01

      rz += 0.01

      rot(rx, ry, rz)

      disable(DEPTH_TEST)

      enable(BLEND)

      blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

      clearColor(0, 0, 0, 1)

      clear(COLOR_BUFFER_BIT)

      for (let i = 0; i < verts.length; i += 3) {

        let tof = t + i / 50000;  

        verts[i] = Math.sin(tof) * overts[i]

        verts[i + 1] = Math.sin(tof) * overts[i + 1]

        verts[i + 2] = Math.sin(tof) * overts[i + 2]

      }

      t += 0.01

      bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))

      drawArrays(POINTS, 0, leng)

      window.requestAnimationFrame(loop)

    }

    loop()

  }

})()