(() => {

  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 / 70)), 3);

  const vert = `

    attribute vec3 vec;

    uniform mat4 mat;

    void main(void) {

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

      gl_PointSize = ${pointSize}.;

    }

  `

  const frag = `

    #ifdef GL_ES

    precision highp float;

    #endif

    void main(void) {

      vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);

      gl_FragColor = vec4(uv.x, 0., cos(uv.y * 60.), .4);

    }

  `

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

  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 = 3

    const s = .5;

    const verts = [

      -s, -s, 0,

       s, -s, 0,

      -s,  s, 0,

       s,  s, 0,

    ]

    //  1.0,  1.0,

    // -1.0,  1.0,

    //  1.0, -1.0,

    // -1.0, -1.0,

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

    //   verts.push(

    //     Math.random() * 1 - 0.5,

    //     Math.random() * 1 - 0.5,

    //     Math.random() * 1 - 0.5

    //   )

    // }

    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

    disable(DEPTH_TEST)

    enable(BLEND)

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

    function loop() {

      rot(rx += .01, ry += .01, 0)

      clearColor(0, 0, 0, 1)

      clear(COLOR_BUFFER_BIT)

      drawArrays(TRIANGLE_STRIP, 0, leng)

      window.requestAnimationFrame(loop)

    }

    loop()

  }

})()