Snippet Zone

Non-perspective WebGL Texture

```
(() => {
```
```
  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()
```
```
  }
```
```
})()
```

Forked from a previous example – toying with the idea of doing some kind of complex low level webgl… not sure, might end up using THREE… Please excuse some of the dead code here…

February 23, 2022

// canvas // webgl

open .

```
open .
```

In a weird folder in your terminal? That’s right open . – I do this all the time 😛

February 22, 2022

// osx

Escape HTML

const el = document.createElement('div')

const txt = document.createElement('textarea')

txt.innerHTML = '&times; &copy; <script>alert("bang!")<\/script>'

```
el.innerText = txt.innerText
```
```
document.body.appendChild(el)
```
```
 
```

const theHtml = document.createElement('div')

```
theHtml.innerText = txt.innerHTML
```
```
document.body.appendChild(theHtml)
```

Just a hack to escape html strings… guessing most would use a lib for this…

February 21, 2022

// html // strings // tricks

Broken Audio OSX

```
sudo killall coreaudiod
```

For years osx has had weird audio issues – from strange crackling to audio just randomly failing across the board. This still seems to solve it…

February 20, 2022

// apple // osx

Disable Bouncing Dock Icons

defaults write com.apple.dock no-bouncing -bool TRUE;

I have never liked those bouncing icons in osx…

February 19, 2022

// apple // osx

Older Posts

Newer Posts

Non-perspective WebGL Texture

open .

Escape HTML

Broken Audio OSX

Disable Bouncing Dock Icons

Recent

Archive