Snippet Zone

WebGL Hemisphere Lines

```
(() => {
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0])
```
```
 
```
```
  const pointSize = 4; 
```
```
 
```
```
  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., .5);

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

  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 = 2000
```
```
    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 = i / NUM; 
```

      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
```
```
    let ry = 0
```
```
    let rz = 0
```
```
    let t = 0
```
```
 
```
```
    function loop() {
```
```
      rx += 0.005
```
```
      ry += 0.005
```
```
      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.005
```
```
 
```

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

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

      window.requestAnimationFrame(loop)

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

WebGL lines and points…

January 1, 2022

// animation // canvas // graphics // javascript // speedcoding // webgl

WebGL Tangled Supershape Points

```
(() => {
```
```
  const TWO_PI = Math.PI * 2;
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0
```
```
  ])
```
```
 
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.0);

```
      gl_PointSize = 2.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 = 120
```
```
    const radius = 0.7
```
```
    let verts = []
```
```
 
```
```
    // Superformula (equations from):
```

    // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333

    // http://en.wikipedia.org/wiki/Superformula

    function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0) {

      const { random, pow, abs, cos, sin } = Math

      // with(Math) { // destrucuring vs the dreaded `with`

```
        let r = 0
```
```
        let p = 0
```
```
        let xp = 0
```
```
        let yp = 0
```
```
        let zp = 0
```
```
 
```
```
        let rotX = random() * TWO_PI
```
```
        let rotY = random() * TWO_PI
```
```
        let rotZ = random() * TWO_PI
```
```
 
```
```
        let cosX = cos(rotX)
```
```
        let cosY = cos(rotY)
```
```
        let sinX = sin(rotX)
```
```
        let sinY = sin(rotY)
```
```
 
```
```
        while (p <= TWO_PI) {
```
```
          let ang = (m * p) / 4
```
```
 
```

          r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1)

```
          xp = r * cos(p)
```
```
          yp = r * sin(p)
```
```
 
```
```
          p += 0.05
```
```
 
```
```
          zp = zp * cosX - xp * sinX
```
```
          xp = zp * sinX + xp * cosX
```
```
          yp = yp * cosY - zp * sinY
```
```
          zp = yp * sinY + zp * cosY
```
```
 
```
```
          verts[inc] = xp * scale + x
```

          verts[inc + 1] = yp * scale + y

          verts[inc + 2] = zp * scale + z

```
          inc += 3;
```
```
        }
```
```
      // }
```
```
    }
```
```
 
```
```
    let inc = 0; 
```
```
    for (let i = 0; i < NUM; i++) {
```

      superShape(1, 1, 1 + ~~(Math.random() * 20),

```
        ~~(Math.random() * 30),
```
```
        ~~(Math.random() * 30),
```

        ~~(Math.random() * 30), Math.random() * .2,

```
        Math.random() - .5,
```
```
        Math.random() - .5,
```
```
        Math.random() - .5 )
```
```
    }
```
```
 
```
```
 
```
```
    console.log(verts.length)
```
```
    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
```
```
 
```
```
    function loop() {
```
```
      rx += 0.01
```
```
      ry += 0.01
```
```
      rz += 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)
```
```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

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

An interesting accident while playing around with Supershapes and WebgGL points…

December 26, 2021

// animation // graphics // hacks // javascript // math // matrix // webgl

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

Responsive Radial Gradient Animation

function rect(x1, y1, x2, y2, col, blur=.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 NUM = 8; 
```
```
 
```
```
let rects = [];
```

const colors = ['rgba(0, 0, 0, 0.2)', 'white', 'black'];

```
 
```
```
let x = 0;
```
```
let y = 0;
```
```
let t = 8;
```
```
function loop() { 
```
```
  rects = [];
```
```
 
```
```
  for (let i = 0; i < NUM; i++) { 
```
```
    x = 50 + 30 * Math.sin(t + i / 2);
```

    y = 50 + 30 * Math.cos(t * 1.5 * i / 10);

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(255, 255, 255, 1)', 1));

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(0, 0, 0, 0.4)',

```
      8 + 6 * Math.cos(y / 10)));
```
```
  }
```
```
  t += .04;
```

  document.body.style.backgroundImage = rects.join(', ');

```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop()
```
```
 
```
```
document.body.innerHTML += `
```
```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background: #ccc;
```
```
      margin: 0;
```
```
      background-repeat: no-repeat;
```
```
      width: 100%;
```
```
    }
```
```
  </style>
```
```
`;
```

Animated variation on yesterdays post – many animating circles with no divs or canvas, just radial-gradients…

December 7, 2021

// animation // css // dom // graphics // hacks // javascript // math

Letter Particles With Keyboard

```
const Key = {
```
```
  LEFT: 37,
```
```
  UP: 38,
```
```
  RIGHT: 39,
```
```
  DOWN: 40,
```
```
  disabled: false
```
```
};
```
```
 
```
```
const keyDown = {};
```
```
 
```
```
function setupKeys() {
```

  const alph = 'abcdefghijklmnopqrstuvwxyz'.split('');

```
  const keys = {};
```
```
  const aKey = 65;
```
```
  alph.forEach((letter, i) => {
```
```
    const idx = aKey + i;
```
```
    keyDown[idx] = false;
```
```
    Key[letter.toUpperCase()] = idx;
```
```
  });
```
```
 
```
```
  keyDown.allLetters = () => {
```
```
    const lettersDown = alph.filter(
```

      letter => keyDown[Key[letter.toUpperCase()]]

```
    );
```
```
    return lettersDown;
```
```
  };
```
```
 
```

  document.addEventListener('keydown', e => {

```
    e.preventDefault();
```
```
    if (!Key.disabled) {
```
```
      keyDown[e.which] = true;
```
```
    }
```
```
  });
```
```
 
```

  document.addEventListener('keyup', e => {

```
    e.preventDefault();
```
```
    keyDown[e.which] = false;
```
```
  });
```
```
}
```
```
 
```
```
setupKeys();
```
```
 
```
```
// later:
```
```
 
```
```
const dots = {};
```
```
let id = 0;
```
```
function dot(letter = '') {
```

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

```
  el.innerHTML = letter;
```
```
  const size = 20;
```
```
  const scale = 1 + Math.random() * 2;
```
```
  const vel = (2 - scale / 2) / 4;
```
```
  let x = innerWidth / 2 - size;
```
```
  let y = innerHeight / 2 - size;
```
```
  let vx = Math.random() * 6 - 3;
```
```
  let vy = Math.random() * 6 - 3;
```
```
  let life = 0;
```

  let maxLife = Math.floor(50 + Math.random() * 30);

```
  Object.assign(el.style, {
```
```
    position: 'absolute',
```
```
    left: 0,
```
```
    top: 0,
```

    transform: `translate3d(${x}px, ${y}px)`,

```
    borderRadius: '500px',
```
```
    background: 'red',
```
```
    width: `${size}px`,
```
```
    fontFamily: 'sans-serif',
```
```
    textAlign: 'center',
```
```
    color: 'white'
```
```
  });
```
```
 
```
```
  id++;
```
```
 
```
```
  let props = {
```
```
    el,
```
```
    id,
```
```
    right() {
```
```
      vx += vel;
```
```
    },
```
```
    left() {
```
```
      vx -= vel;
```
```
    },
```
```
    down() {
```
```
      vy += vel;
```
```
    },
```
```
    up() {
```
```
      vy -= vel;
```
```
    },
```
```
    run() {
```
```
      life++;
```
```
      if (life === maxLife) {
```

        document.body.removeChild(dots[props.id].el);

```
        delete dots[props.id];
```
```
      }
```
```
      x += vx;
```
```
      y += vy;
```
```
      vx *= 0.999;
```
```
      vy *= 0.999;
```

      el.style.transform = `translate(${x}px, ${y}px) scale(${scale}) `;

```
    }
```
```
  };
```
```
  dots[id] = props;
```
```
  document.body.appendChild(el);
```
```
}
```
```
 
```
```
function loop() {
```

  keyDown.allLetters().forEach(letter => {

```
    dot(letter);
```
```
  });
```
```
 
```
```
  for (let i in dots) {
```
```
    dots[i].run();
```
```
  }
```
```
 
```
```
  if (keyDown[Key.LEFT]) {
```
```
    for (let i in dots) {
```
```
      dots[i].left();
```
```
    }
```
```
  }
```
```
 
```
```
  if (keyDown[Key.DOWN]) {
```
```
    for (let i in dots) {
```
```
      dots[i].down();
```
```
    }
```
```
  }
```
```
 
```
```
  if (keyDown[Key.RIGHT]) {
```
```
    for (let i in dots) {
```
```
      dots[i].right();
```
```
    }
```
```
  }
```
```
 
```
```
  if (keyDown[Key.UP]) {
```
```
    for (let i in dots) {
```
```
      dots[i].up();
```
```
    }
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```
```
 
```

const info = document.createElement('div')

info.innerHTML = 'click here, then type letters and use arrow keys'

```
document.body.appendChild(info)
```

A demo showing how to use the keyboard snippet from yesterday. Also added a function to obtain an array of all currently pressed letter keys

December 1, 2021

// animation // javascript // keys // math // random // tricks // ui

Older Posts

Newer Posts

WebGL Hemisphere Lines

WebGL Tangled Supershape Points

WebGL Particles in Sphere

Responsive Radial Gradient Animation

Letter Particles With Keyboard

Recent

Archive