(() => {

  const m = new Float32Array([

    0, 0, 0, 0, 

    0, 0, 0, 0, 

    0, 0, 0, 0, 

    0, 0, 0, 0

  ])

  const pointSize = Math.max(Math.min(10, ~~(innerWidth / 100)), 3);

  const vert = `

    attribute vec3 vec;

    uniform mat4 mat;

    void main(void) {

      gl_Position = mat * vec4(vec, 1.);

      gl_PointSize = ${pointSize}.;

    }

  `

  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')

  Object.assign(gl.canvas.style, {

    position: 'absolute',

    left: '50%',

    top: '50%',

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

    outline: '1px solid gray'

  })

  with (gl) {

    const NUM = 600

    const TWO_PI = Math.PI * 2;

    const verts = []

    let step =.05

    let n = 8

    let xp = 0

    let yp = 0

    let a = 12

    let t = 0

    let scl = .005;

    for (var i = 0; i < TWO_PI; i += step) {

      for (var j = 0; j < TWO_PI; j += step) {

        // unoptimized for readability

        let cosi = a/n * ((n - 1) * Math.cos(i) + Math.cos(Math.abs((n - 1) * i)))

        let sini = a/n * ((n - 1) * Math.sin(i) - Math.sin(Math.abs((n - 1) * i)))

        let cosj = a/n * ((n - 1) * Math.cos(j) + Math.cos(Math.abs((n - 1) * j)))

        let sinj = a/n * ((n - 1) * Math.sin(j) - Math.sin(Math.abs((n - 1) * j)))

        verts.push(cosi * cosj * scl)

        verts.push(sini * cosj * scl)

        verts.push(a * sinj * scl)

      }

    }

    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

    disable(DEPTH_TEST)

    enable(BLEND)

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

    function loop() {

      rot(rx += .01, ry -= 0.03, rz += 0.01)

      clearColor(0, 0, 0, 1)

      clear(COLOR_BUFFER_BIT)

      drawArrays(POINTS, 0, leng)

      window.requestAnimationFrame(loop)

    }

    loop()

  }

})()