Snippet Zone

TC39

function equals(x: number, y: number): boolean {

```
    return x === y;
```
```
}
```

Interesting proposal Proposal Types as Comments

Capitalize those types and this would look quite familiar…. cough ES4.

I have nothing against types so 👍 from me.

March 17, 2022

// javascript // types

PointerUp Before Click

document.body.innerHTML += 'click/tap anywhere<br>'

```
 
```

document.addEventListener('click', () => {

  document.body.innerHTML += 'click<br>'

```
})
```
```
 
```

document.addEventListener('pointerup', () => {

  document.body.innerHTML += 'pointerup<br>'

```
})
```

pointerup fires before click

March 16, 2022

// dom // events // javascript // touchEvents // ui

npm list all packages to json

npm list -json > package-list.json

Write your dependency graph to a json file.

March 15, 2022

// javascript // npm

Random Color Strings Not-Golfed

```
const { random, round } = Math
```
```
 
```
```
const TICK = 100
```
```
const CHUNKS_PER_TICK = 4
```
```
const minChunk = 3
```
```
const maxChunk = 10
```
```
const diffChunk = maxChunk - minChunk
```
```
 
```

const generateChance = .9 // 90% change of string generation

const spaceChance = .8 // 80% chance of space

const breakChance = .1 // 10% chance of line break

```
const numbersChance = .9
```
```
 
```

const randomChunk = () => round(random() * 0xff).toString(36)

  .replace(random() < numbersChance ? /[0-9]/g : '', '')

```
 
```
```
setInterval(() => {
```
```
 
```
```
  if (random() < generateChance) {
```
```
 
```

    Array(CHUNKS_PER_TICK).fill(0).forEach(() => {

```
 
```

      const stringLeng = round(minChunk + random() * diffChunk)

```
      let chunk = ''
```
```
 
```
```
      Array(stringLeng).fill(0)
```

        .forEach(() => chunk += randomChunk())

```
 
```

      const span = document.createElement('span')

```
      const hue = round(random() * 360)
```
```
 
```

      span.style.color = `hsl(${hue}, 30%, 50%)`

```
      document.body.appendChild(span)
```
```
      span.innerText = chunk
```
```
 
```
```
      if (random() < spaceChance) { 
```

        document.body.appendChild(document.createTextNode(' '))

```
      }
```
```
 
```
```
      if (random() < breakChance) {
```

        const br = document.createElement('br')

```
        document.body.appendChild(br)
```
```
      }
```
```
 
```
```
    })
```
```
  }
```
```
 
```

  scrollTo(0, document.body.scrollHeight)

```
}, TICK)
```
```
 
```
```
 
```

// just a lazy hack since snippet zone quick editor only supports js...

// normally this goes in a separate file... :D

```
document.body.innerHTML += `
```
```
<style>
```
```
body, html {
```
```
  background: black;
```
```
  font-family: Oswald, sans-serif;
```
```
  overflow-wrap: break-word;
```
```
  text-transform: uppercase;
```
```
  letter-spacing: 1;
```
```
}
```
```
 
```
```
br {
```
```
  height: 1em;
```
```
  display: block;
```
```
}
```
```
</style>
```
```
`
```

An expansion on a snippet from a few days ago inspired by a friends codepen fork…

March 14, 2022

// graphics // humor // javascript // strings

WebGL Shader Example

```
(() => {
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    void main(void) {
```
```
      gl_Position = vec4(vec, 1.);
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    #ifdef GL_ES
```
```
    precision highp float;
```
```
    #endif
```
```
    uniform float time;
```
```
    void main(void) {
```

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

      float w = 1. + cos(uv.y * 60.) * cos(uv.x * 50. + time * 30.);

      gl_FragColor = vec4(uv.x, w * .5, w, 1.);

```
    }
```
```
  `
```
```
 
```

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

```
  const gl = document.body
```

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

```
    .getContext('webgl')
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: 0,
```
```
    top: 0
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const s = 1;
```
```
    const verts = [
```
```
      -s, -s, 0,
```
```
       s, -s, 0,
```
```
      -s,  s, 0,
```
```
       s,  s, 0,
```
```
    ]
```
```
 
```
```
    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)
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl 
```
```
      canvas.width = innerWidth
```
```
      canvas.height = innerHeight
```

      viewport(0, 0, innerWidth, innerHeight)

```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    const startTime = Date.now();
```
```
 
```
```
    function loop() {
```

      const time = (Date.now() - startTime) / 1000

      const uniformTime = gl.getUniformLocation(sp, 'time');

```
      gl.uniform1f(uniformTime, time);
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```

      drawArrays(TRIANGLE_STRIP, 0, leng)

```
      requestAnimationFrame(loop)
```
```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

A basic shader setup. This is realistic minus the use of a with statement…

March 13, 2022

// 3d // glsl // javascript // shaders // webgl

Older Posts

Newer Posts

TC39

PointerUp Before Click

npm list all packages to json

Random Color Strings Not-Golfed

WebGL Shader Example

Recent

Archive