Snippet Zone

WebGL Particles in Sphere

```
(() => {
```
```
  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(30, ~~(innerWidth / 70)), 3)

```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.0);

```
      gl_PointSize = ${pointSize}.0;
```
```
    }
```
```
  `
```
```
 
```
```
  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', {
```
```
      preserveDrawingBuffer: true,
```

      powerPreference: 'high-performance'

```
    })
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const NUM = 4000
```
```
    const radius = 0.7
```
```
    const verts = []
```
```
 
```
```
    for (let i = 0; i < NUM; i += 3) {
```
```
      let xp = Math.random() * 2 - 1
```
```
      let yp = Math.random() * 2 - 1
```
```
      let zp = Math.random() * 2 - 1
```

      let dist = Math.sqrt(xp * xp + yp * yp + zp * zp)

```
      // normalize and scale x,y,z
```
```
      verts[i] = (xp / dist) * radius
```

      verts[i + 1] = (yp / dist) * radius

      verts[i + 2] = (zp / dist) * radius

```
 
```
```
    }
```
```
    const overts = verts.concat()
```
```
    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
```
```
    let t = 0
```
```
 
```
```
    function loop() {
```
```
      rx += 0.01
```
```
      ry += 0.01
```
```
      rot(rx, ry, rz)
```
```
 
```
```
      disable(DEPTH_TEST)
```
```
      enable(BLEND)
```

      blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
 
```
```
      clear(COLOR_BUFFER_BIT)
```
```
 
```

      for (let i = 0; i < verts.length; i += 3) {

```
        let tof = i * 0.001 + t;
```

        verts[i] = Math.sin(tof) * overts[i]

        verts[i + 1] = Math.sin(tof) * overts[i + 1]

        verts[i + 2] = Math.sin(tof) * overts[i + 2]

```
      }
```
```
 
```
```
      t += 0.01
```
```
 
```

      bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))

```
 
```
```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

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

Playing around with animating points…

December 24, 2021

// animation // graphics // javascript // math // matrix // speed-coded // 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

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

Interesting Color Picker

document.addEventListener('touchmove', e => e.preventDefault(), {

```
  passive: false
```
```
});
```
```
 
```
```
document.body.innerHTML += `
```
```
<style>
```
```
  * {
```
```
    -moz-user-select: none;
```
```
    -webkit-user-select: none;
```
```
    -ms-user-select: none;
```
```
    user-select: none;
```
```
  }
```
```
  body {
```
```
    background: #333;
```
```
  }
```
```
  .select-box {
```
```
    border: 1px solid white;
```
```
    outline: 1px solid black;
```
```
  }
```
```
  .swatch {
```
```
    border: none;
```
```
    outline: none;
```
```
  }
```
```
</style>
```
```
`;
```
```
 
```

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

```
Object.assign(col.style, {
```
```
  position: 'absolute',
```
```
  left: 0,
```
```
  top: 0,
```
```
  width: '100%',
```
```
  height: '200px',
```
```
  background:
```

    `linear-gradient(0, black 0%, transparent 50%, transparent 50%, white 100%),

     linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)`

```
});
```
```
 
```

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

```
Object.assign(swatches.style, {
```
```
  position: 'absolute',
```
```
  top: '200px',
```
```
  left: 0,
```
```
  width: '100%'
```
```
});
```
```
 
```

function box(x, y, cls = 'select-box', parent = document.body) {

  const box = parent.appendChild(document.createElement`div`);

```
  box.classList.add(cls);
```
```
  Object.assign(box.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}%`,
```
```
    top: `${y}px`,
```
```
    width: '40px',
```
```
    height: '40px',
```
```
    background: 'none',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    cursor: 'pointer',
```
```
 
```
```
    color: 'white'
```
```
  });
```
```
  return box;
```
```
}
```
```
 
```
```
function touch(e) {
```
```
  let x = e.clientX;
```
```
  let y = e.clientY;
```

  if (e.touches != null && e.touches.length > 0) {

```
    x = e.touches[0].clientX;
```
```
    y = e.touches[0].clientY;
```
```
  }
```
```
  return { x, y };
```
```
}
```
```
 
```

document.addEventListener('touchstart', onDown);

document.addEventListener('touchmove', onMove);

document.addEventListener('touchend', onUp);

document.addEventListener('mousedown', onDown);

document.addEventListener('mousemove', onMove);

document.addEventListener('mouseup', onUp);

```
 
```
```
let down = false;
```
```
let currBox;
```
```
let currSwatch;
```
```
let swatchHeight = 30;
```
```
let id = 0;
```
```
 
```
```
function toHSL(x, y) {
```
```
  let deg = x * 360;
```

  return `hsl(${deg}deg, 100%, ${100 - y / 2}%)`;

```
}
```
```
 
```
```
function onDown(e) {
```
```
  let { x, y } = touch(e);
```
```
  down = true;
```
```
  let hPercent = x / innerWidth;
```
```
  let color = toHSL(hPercent, y);
```

  if (e.target.classList.contains('swatch')) {

    e.target.style.outline = '2px solid red';

```
    e.target.style.zIndex = 999;
```
```
    down = false;
```
```
    setTimeout(() => {
```

      if (confirm('Would you like to remove this swatch?')) {

        currBox = document.querySelector(

          `.select-box[data-id="${e.target.dataset.id}"]`

```
        );
```
```
 
```
```
        if (currBox != null) {
```

          currBox.parentNode.removeChild(currBox);

          e.target.parentNode.removeChild(e.target);

```
        }
```
```
      } else {
```
```
        e.target.style.outline = null;
```
```
        e.target.style.zIndex = null;
```
```
      }
```
```
    }, 250);
```

  } else if (e.target.classList.contains('select-box')) {

```
    currBox = e.target;
```

    c = document.querySelector(`.swatch[data-id="${currBox.dataset.id}"]`);

```
  } else {
```
```
    currBox = box(hPercent * 100, y);
```
```
    currBox.dataset.id = id++;
```

    currSwatch = box(0, 0, 'swatch', swatches);

    currSwatch.dataset.id = currBox.dataset.id;

```
    Object.assign(currSwatch.style, {
```
```
      width: '100%',
```
```
      position: 'relative',
```
```
      height: `${swatchHeight}px`,
```
```
      transform: 'none',
```
```
      background: color
```
```
    });
```
```
  }
```
```
}
```
```
 
```
```
function onMove(e) {
```
```
  if (down) {
```
```
    let { x, y } = touch(e);
```
```
    let hPercent = x / innerWidth;
```
```
    let color = toHSL(hPercent, y);
```
```
    Object.assign(currBox.style, {
```
```
      left: `${hPercent * 100}%`,
```
```
      top: `${y}px`
```
```
    });
```

    currSwatch.style.background = color;

```
  }
```
```
}
```
```
 
```
```
function onUp(e) {
```
```
  down = false;
```
```
  currBox = null;
```
```
}
```

Click anywhere on the spectrum to add a color… color boxes can be dragged, color swatches can be deleted by clicking on them…

Just something that popped into my head awhile back so figured I’d do a speed-coded prototype. I’d like to revisit this and add more to it.

November 28, 2021

// color // dom // graphics // html // javascript // math // speed-coded // touchEvents // ui

Oscillating Canvas Wave

```
const c = document.body
```

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

```
  .getContext('2d');
```
```
 
```
```
Object.assign(document.body.style, {
```
```
  margin: 0,
```
```
  height: '100%'
```
```
});
```
```
 
```
```
Object.assign(c.canvas.style, {
```
```
  position: 'absolute',
```
```
  left: 0,
```
```
  top: 0,
```
```
  width: '100%',
```
```
  height: '100%'
```
```
});
```
```
 
```
```
let t = 0;
```
```
 
```
```
function resize() {
```
```
  c.canvas.width = innerWidth * 2;
```
```
  c.canvas.height = innerHeight * 2;
```
```
  draw();
```
```
}
```

window.addEventListener('resize', resize);

```
resize();
```
```
 
```
```
function draw() {
```
```
  const {
```
```
    canvas: { width, height }
```
```
  } = c;
```
```
 
```

  c.fillStyle = 'rgba(155, 155, 155, .4)';

```
  c.fillRect(0, 0, width, height);
```
```
  c.fillStyle = '#000';
```
```
 
```
```
  let x = innerWidth;
```
```
  let y = 0;
```
```
 
```
```
  t += 0.05;
```

  for (let i = 0; i < innerHeight; i++) {

    x += 2 * Math.cos(t + i * 0.1 * Math.cos(i / 200));

```
    y += 2;
```
```
    c.fillRect(x, y, 100, 1);
```
```
  }
```
```
}
```
```
 
```
```
function loop() {
```
```
  draw();
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Speed coded oscillating wave on canvas… Looks better in fullscreen.

November 25, 2021

// animation // canvas // javascript // speed-coded

Older Posts

Newer Posts

WebGL Particles in Sphere

WebGL Points and Rotation

Gray Gradient Texture

Interesting Color Picker

Oscillating Canvas Wave

Recent

Archive