Snippet Zone

Martin Kleppe’s Golfed Blobs Quine

<pre id=p style=background:#000><svg onload='setInterval(f=n=>

{for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>

(M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))

(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'>

Great golfed snippet from Martin Kleppe – can’t wait to fork it… 😀

This was updated a bit later to be even smaller:

<body onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+f)[i],"o"][c=0|(h=v=>(M=Math).hypot(i/30-7+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'bgcolor=X><pre id=p>

December 22, 2021

// dom // golfed // graphics // hacks // html // humor // javascript // math // strings // tricks

3d Hypocycloid Shape

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

WebGL plot of a hypocycloid shape. I enjoy using with here…

December 21, 2021

// graphics // javascript // math // matrix // webgl

WebGL Points and Rotation

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

      gl_FragColor = vec4(1., 1., 1., .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 = 600
```
```
    const verts = []
```
```
 
```
```
    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 ry = 0, rz = 0
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    function loop() {
```
```
      rot(0, ry -= 0.03, rz += 0.001)
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```
```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

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

Some WebGL points with rotation… I couldn’t resist using with here…

December 20, 2021

// graphics // hacks // javascript // math // matrix // speed-coded // webgl

Perlin Noise on JavaScript Canvas

// IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.

```
const p = [];
```

const permutation = [151,160,137,91,90,15,

131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,

190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,

88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,

77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,

102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,

135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,

5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,

223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,

129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,

251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,

49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,

138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];

```
 
```
```
for (let i = 0; i < 256 ; i++) 
```
```
  p[256+i] = p[i] = permutation[i]; 
```
```
 
```
```
function noise(x, y, z) {
```

  const X = Math.floor(x) & 255,

        Y = Math.floor(y) & 255,

```
        Z = Math.floor(z) & 255;
```

  x -= Math.floor(x);

  y -= Math.floor(y);

```
  z -= Math.floor(z);
```
```
 
```

  const u = fade(x),

        v = fade(y),

```
        w = fade(z);
```

  const A = p[X  ]+Y, AA = p[A]+Z, AB = p[A+1]+Z,

      B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;

```
 
```

  return lerp(w, lerp(v, lerp(u, grad(p[AA  ], x  , y  , z   ),

                                  grad(p[BA  ], x-1, y  , z   )),

                          lerp(u, grad(p[AB  ], x  , y-1, z   ),

                                  grad(p[BB  ], x-1, y-1, z   ))),

                  lerp(v, lerp(u, grad(p[AA+1], x  , y  , z-1 ),

                                  grad(p[BA+1], x-1, y  , z-1 )),

                          lerp(u, grad(p[AB+1], x  , y-1, z-1 ),

                                  grad(p[BB+1], x-1, y-1, z-1 ))));

```
}
```
```
function fade(t) { 
```

  return t * t * t * (t * (t * 6 - 15) + 10);

```
}
```
```
function lerp(t, a, b) { 
```
```
  return a + t * (b - a); 
```
```
}
```
```
function grad(hash, x, y, z) {
```

  const h = hash & 15;

  const u = h<8 ? x : y,

        v = h<4 ? y : h==12||h==14 ? x : z;

  return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);

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

const canvas = document.body.appendChild(document.createElement('canvas'));

```
const c = canvas.getContext('2d');
```
```
canvas.width = canvas.height = 200;
```
```
 
```
```
c.fillStyle = 'black';
```

c.fillRect(0, 0, canvas.width, canvas.height);

```
 
```

const pix = c.createImageData(canvas.width, canvas.height);

```
 
```
```
const freq = 1 / 20;
```
```
let inc = 0;
```
```
let z = 0;
```
```
 
```
```
function loop() {
```
```
  z += 0.02;
```
```
  inc = 0;
```

  for (var y = 0; y < canvas.height; y++) {

    for (var x = 0; x < canvas.width; x++) {

      var col = parseInt(Math.abs(noise(x * freq, y * freq, z)) * 500);

```
      pix.data[inc++] = col;
```
```
      pix.data[inc++] = col;
```
```
      pix.data[inc++] = col;
```
```
      pix.data[inc++] = 255;
```
```
    }
```
```
  }
```
```
 
```
```
  c.putImageData(pix, 0, 0);
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Perlin noise (created by Ken Perlin).

Years ago I grabbed the noise function from here I think….

This shows how to do perlin noise on an html5 canvas. If you need a more performant one for animation and/or larger images – a glsl shader is the way to go.

December 16, 2021

// canvas // graphics // javascript // math // oldschool

Gray Gradient Texture

function rect(x1, y1, x2, y2, col, blur = 0.1) {

```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

```
    blur}%)`;
```
```
}
```

const blends = 'multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue'.split(

```
  ','
```
```
);
```
```
const cols = ['black', 'white'];
```
```
 
```
```
function gen() {
```

  [...document.querySelectorAll('div')].forEach(d =>

```
    d.parentNode.removeChild(d)
```
```
  );
```
```
  for (let j = 0; j < 4; j++) {
```
```
    const rects = [];
```
```
    for (let i = 0; i < 10; i++) {
```
```
      const x = Math.random() * 100;
```
```
      const y = Math.random() * 100;
```

      const s = Math.random() * Math.random() * Math.random() * 30 + 3;

      const col = cols[~~(Math.random() * cols.length)];

      rects.push(rect(x, y, x + s, y + s, col, Math.random() * 10));

```
    }
```

    const el = document.body.appendChild(document.createElement('div'));

    el.style.backgroundImage = rects.join(', ');

    el.style.mixBlendMode = blends[~~(Math.random() * blends.length)];

```
  }
```
```
}
```
```
gen();
```
```
 
```
```
document.body.innerHTML += `
```

  <button id="regen">Regenerate</button>

```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background: #ccc;
```
```
      margin: 0;
```
```
      background-repeat: no-repeat;
```
```
      width: 100%;
```
```
    }
```
```
    div {
```
```
      position: absolute;
```
```
      top: 0; left: 0;
```
```
      width: 100%;
```
```
      height: 100%;
```
```
    }
```
```
    #regen {
```
```
      position: absolute;
```
```
      width: 100px;
```
```
      height: 30px;
```
```
      background: #ccc;
```
```
      border: 1px solid white;
```
```
      margin: 1em;
```
```
      cursor: pointer;
```
```
      transition: all 250ms ease-out;
```
```
      z-index: 999;
```
```
    }
```

    #regen:hover { background: #333; color: white; }

```
  </style>
```
```
`;
```
```
 
```
```
regen.onclick = gen;
```

Playing around some more with lots of linear gradients.

December 9, 2021

// color // css // gradients // graphics // hacks // javascript // speed-coded

Older Posts

Newer Posts

Martin Kleppe’s Golfed Blobs Quine

3d Hypocycloid Shape

WebGL Points and Rotation

Perlin Noise on JavaScript Canvas

Gray Gradient Texture

Recent

Archive