Snippet Zone

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

Random Color Strings

```
R = Math.random
```
```
b = document.body
```

b.style = 'background: black; font-family: sans-serif; text-transform: uppercase; color: white;'

```
 
```
```
setInterval(_ => {
```
```
  if (R()<.9) {
```
```
    s = ''
```

    for(i=0;i<R() * 30 + 4;i++) s+=(~~(R() * 0xff)).toString(36)

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

```
 
```
```
    b.innerHTML += `
```

     <n style="color:hsl(${R()*360}, 30%, 50%)">${s}</n> `+(R()<.1?'<br>':'');

```
  }
```
```
}, 100)
```

Make some random strings and give them a random color… a friend of mine showed a work in progress forked codepen – so I created a golfed version/variation…

March 12, 2022

// codegolf // random // regex // speedcoding // strings

Building Spikes Codegolf

```
f = 
```
```
 
```
```
n=>`   ^ 
```
```
  /|\\
```
```
 /.|.\\
```
```
/..|..\\
```

___`.replace(/.[_|^]./g,'$&'.repeat(n))+'____'

```
 
```
```
// test it out
```
```
document.body.innerHTML += 
```
```
`<pre>${f(1)}
```
```
${f(3)}
```
```
${f(4)}`
```

Great codegolf stackexchange answer from user tsh

March 11, 2022

// codegolf // golfed // javascript // regex // strings

W3Schools Output Tag

```

```
```
<!DOCTYPE html>
```
```
<html>
```
```
<body>
```
```
 
```
```
<h1>The output element</h1>
```
```
 
```

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

```
<input type="range" id="a" value="50">
```

+<input type="number" id="b" value="25">

```
=<output name="x" for="a b"></output>
```
```
</form>
```
```
 
```

<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>

```
 
```
```
</body>
```
```
</html>
```

I like w3Schools.

This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…

March 11, 2022

// hacks // html // humor // speedcoding

Canvas Path2D

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth
```
```
canvas.height = innerHeight
```
```
 
```
```
c.translate(10, 10)
```

const path = new Path2D('M 154.75 61.5 Q 169.75 63.8 184.8 69.35 173.15 68.3 161.7 69.4 173.1 73.85 184.8 75.95 173.1 77.15 161.65 75.95 173.05 80.45 184.8 82.55 173 83.75 160.05 82.35 173 87.05 184.8 89.15 172.95 90.35 161.65 89.1 172.9 93.65 184.8 95.75 172.8 96.9 161.65 95.7 172.8 100.2 184.8 102.35 172.75 103.5 163.7 102.7 172.7 106.8 184.8 110.3 172.7 110.1 161.65 108.85 172.6 113.35 184.8 118.85 171.05 116.05 158.35 114.65 167.3 126.9 174 141.45 166.5 132.45 157.65 125.1 162.55 136.3 169.35 146.1 160.2 138.65 152.95 129.7 157.85 141 164.7 150.75 155.5 143.25 147.3 133.15 153.15 145.6 160 155.45 150.75 147.9 143.65 139 148.45 150.2 155.35 160.1 146.05 152.4 139 143.65 143.7 154.75 150.7 164.75 141.3 157.05 135.5 150.05 139 159.35 145.05 170.4 136.65 161.7 129.7 152.95 134.25 163.9 139 176.45 131.3 164.75 123.3 154.8 121 169.8 115.45 184.8 116.5 173.15 115.4 161.7 110.95 173.1 108.85 184.8 107.65 173.1 108.85 161.65 104.35 173.05 102.25 184.8 101.05 173 102.45 160.05 97.75 173 95.65 184.8 94.45 172.95 95.7 161.65 91.15 172.9 89.05 184.8 87.9 172.8 89.1 161.65 84.6 172.8 82.45 184.8 81.3 172.75 82.1 163.7 78 172.7 74.5 184.8 74.7 172.7 75.95 161.65 71.45 172.6 65.95 184.8 68.75 171.05 70.15 158.4 57.9 167.35 43.35 174.05 52.35 166.55 59.7 157.7 48.5 162.6 38.7 169.4 46.15 160.25 55.1 153 43.8 157.9 34.05 164.75 41.55 155.55 51.65 147.35 39.2 153.2 29.35 160.05 36.9 150.8 45.8 143.7 34.6 148.5 24.7 155.4 32.4 146.1 41.15 139.05 30.05 143.75 20.05 150.75 27.75 141.35 34.75 135.55 25.45 139.05 14.4 145.1 23.1 136.7 31.85 129.75 20.9 134.3 8.35 139.05 20.05 131.3 30.05 123.3 15.05 121 0 115.45 11.65 116.5 23.1 115.4 11.7 110.95 0 108.85 11.7 107.65 23.15 108.85 11.75 104.35 0 102.25 11.8 101.05 24.75 102.45 11.8 97.75 0 95.65 11.85 94.45 23.15 95.7 11.9 91.15 0 89.05 12 87.9 23.15 89.1 12 84.6 0 82.45 12.05 81.3 21.1 82.1 12.1 78 0 74.5 12.1 74.7 23.15 75.95 12.2 71.45 0 65.95 13.75 68.75 26.45 70.15 17.45 57.9 10.75 43.35 18.25 52.35 27.1 59.7 22.2 48.5 15.4 38.7 24.55 46.15 31.8 55.1 26.9 43.8 20.05 34.05 29.25 41.55 37.45 51.65 31.6 39.2 24.75 29.35 34 36.9 41.1 45.8 36.3 34.6 29.4 24.7 38.7 32.4 45.75 41.15 41.05 30.05 34.05 20.05 43.45 27.75 49.25 34.75 45.75 25.45 39.7 14.4 48.1 23.1 55.05 31.85 50.5 20.9 45.75 8.35 53.5 20.05 61.5 30.05 63.8 15.05 69.35 0 68.3 11.65 69.4 23.1 73.85 11.7 75.95 0 77.15 11.7 75.95 23.15 80.45 11.75 82.55 0 83.75 11.8 82.35 24.75 87.05 11.8 89.15 0 90.35 11.85 89.1 23.15 93.65 11.9 95.75 0 96.9 12 95.7 23.15 100.2 12 102.35 0 103.5 12.05 102.7 21.1 106.8 12.1 110.3 0 110.1 12.1 108.85 23.15 113.35 12.2 118.85 0 116.05 13.75 114.65 26.45 126.9 17.45 141.45 10.75 132.45 18.25 125.1 27.1 136.3 22.2 146.1 15.4 138.65 24.55 129.7 31.8 141 26.9 150.75 20.05 143.25 29.25 133.15 37.45 145.6 31.6 155.45 24.75 147.9 34 139 41.1 150.2 36.3 160.1 29.4 152.4 38.7 143.65 45.75 154.75 41.05 164.75 34.05 157.05 43.45 150.05 49.25 159.35 45.75 170.4 39.7 161.7 48.1 152.95 55.05 163.9 50.5 176.45 45.75 164.75 53.5 154.75 61.5 140.2 73.15 129.35 85.4 146 97.85 158.35 114.65 M 61.5 30.05 Q 73.15 44.6 85.4 55.45 97.8 38.8 114.65 26.45 M 30.05 123.3 Q 44.6 111.65 55.45 99.45 38.8 87 26.45 70.15 M 123.3 154.8 Q 111.65 140.25 99.4 129.4 86.95 146.05 70.15 158.4');

```
 
```
```
c.stroke(path);
```

Use SVG style paths in canvas…

March 9, 2022

// canvas // javascript // svg

Older Posts

Newer Posts

WebGL Shader Example

Random Color Strings

Building Spikes Codegolf

W3Schools Output Tag

Canvas Path2D

Recent

Archive