Snippet Zone

Speed Coded Space

```
(() => {
```
```
  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 = 50
```
```
    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, rx=0, ry=0, rz=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 = rx
```
```
        let rotY = ry  
```
```
        let rotZ = rz
```
```
 
```
```
        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++) {
```
```
      let m =  Math.random() * 20
```
```
      let n1 = Math.random() * 30
```
```
      let n2 = Math.random() * 30
```
```
      let n3 = Math.random() * 30
```
```
      let scl = Math.random() * .2
```

      let x = Math.random() * Math.cos(i)

      let y = Math.random() * Math.sin(i);

```
      let z = Math.random() - .5
```
```
      let rx = Math.random() * TWO_PI,
```
```
          ry = Math.random() * TWO_PI,
```
```
          rz = Math.random() * TWO_PI;
```
```
 
```
```
      for (let j = 0; j < 10; j++) {
```
```
        superShape(1, 1, 1 + m,
```
```
          n1 / j,
```
```
          n2,
```
```
          n3, 
```
```
          scl- j / 100,
```
```
          x,
```
```
          y,
```
```
          z, rx, ry, rz)
```
```
        }
```
```
    }
```
```
 
```
```
    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
```
```
      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)
```
```
 
```

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

```
        let tof = t + i / 50000;  
```

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

Forked a recent snippet using supershapes for #genuary2022 – prompt was space…

January 3, 2022

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

Speed Coded Cosine Dither

```
d = document
```
```
b = d.body
```
```
wh = 300
```
```
hs = wh / 2
```
```
S = 1.5
```
```
with(
```
```
  b.appendChild(Object.assign(
```
```
    d.createElement`canvas`, {
```
```
      width: wh, height: wh
```
```
    })).getContext`2d`) {
```
```
 
```
```
  canvas.style.transformOrigin = '0 0'
```

  canvas.style.transform = `scale(${S})`

  canvas.style.imageRendering = 'pixelated'

```
 
```
```
  fillStyle = 'gray'
```
```
 
```
```
  fillRect(0, 0, wh, wh)
```
```
  shadowBlur = 80
```
```
  shadowColor = 'black';
```
```
  shadowOffsetY = 20
```
```
  for (let i = 0; i < 70; i++) {
```
```
    save()
```
```
    translate(hs, hs)
```
```
    rotate(i / 33)
```
```
    scale(1 - i / 100, 1)
```
```
    translate(-hs, -hs)
```

    fillStyle = `hsl(${i << 2}, 50%, 50%)`

```
    beginPath()
```
```
    arc(hs, hs, hs * .8, 0, 7)
```
```
    fill()
```
```
    restore()
```
```
    shadowColor = 'transparent'
```
```
    shadowBlur = 0
```
```
  }
```
```
 
```

  C = Object.assign(d.createElement`canvas`, {

```
    width: wh, height: wh
```
```
  }).getContext('2d')
```
```
  C.drawImage(canvas, 0, 0);
```
```
 
```
```
  im = getImageData(0, 0, wh, wh);
```
```
 
```
```
  p = im.data
```
```
  size = wh * wh * 4
```
```
 
```
```
  modd = Math.random() * 5550
```
```
  for (let i = 0; i < size; i += 4) {
```

    if (Math.random() < 0.0001) modd = Math.random() * 5550

```
    M = Math.cos(i % modd) * 255
```
```
    p[i] = M < p[i] ? 255 : 0;
```
```
    p[i + 1] = M < p[i + 1] ? 255 : 0;
```
```
    p[i + 2] = M < p[i + 2] ? 255 : 0;
```
```
  }
```
```
 
```
```
  putImageData(im, 0, 0);
```

  globalCompositeOperation = 'hard-light'

```
  drawImage(C.canvas, 0, 0);
```
```
}
```

Some speed-coded canvas stuff with a dither inspired by #genuary2022

January 2, 2022

// canvas // graphics // javascript // random // speedcoding // tricks

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

Speed Coded Mouse Toy

```
d = document
```
```
b = d.body
```
```
b.style.margin = 0
```
```
with (b.appendChild(
```

  Object.assign(d.createElement`canvas`, {

```
    width: innerWidth,
```
```
    height: innerHeight,
```
```
  })
```
```
).getContext`2d`) {
```
```
  mx = 0
```
```
  my = 0
```
```
 
```
```
  onresize = _ => {
```
```
    canvas.width = innerWidth
```
```
    canvas.height = innerHeight
```
```
  }
```
```
 
```
```
  onpointermove = e => {
```
```
    mx = e.clientX, 
```
```
    my = e.clientY
```
```
  }
```
```
 
```
```
  r = 0
```
```
  loop = () => {
```
```
    save()
```

    globalCompositeOperation = 'hard-light'

    translate(innerWidth / 2, innerHeight / 2)

```
 
```
```
    rotate(r += .02)
```

    translate(-innerWidth / 2, -innerHeight / 2)

```
 
```
```
    fillStyle = 'rgba(55, 55, 55, .01)'
```

    fillRect(0, 0, innerWidth, innerHeight)

```
 
```

    fillStyle = 'rgba(116, 196, 221, .02)'

```
    fillRect(0, my, innerWidth, 20);
```
```
 
```

    fillStyle = 'rgba(255, 255, 255, .02)'

```
    fillRect(mx, 0, 20, innerHeight);
```
```
 
```
```
    fillStyle = 'rgba(0, 0, 0, .03)'
```

    fillRect(0, innerHeight - my, innerWidth, 20);

```
 
```

    fillStyle = 'rgba(116, 196, 221, .02)'

    fillRect(innerWidth - mx, 0, 20, innerHeight);

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

Speed coded mouse toy…

December 30, 2021

// canvas // codegolf // globals // graphics // hacks // speedcoding

Polar Plots

```
const Pnt = (x, y, p = { x, y }) => (
```

  p.add = o => (p.x += o.x, p.y += o.y, p), p

```
);
```

Pnt.polar = (rad, t) => Pnt(rad * Math.cos(t), rad * Math.sin(t));

```
 
```
```
const pnts = {};
```
```
let index = -1;
```
```
const polar = (inc, rad) => {
```
```
  index++;
```
```
  if (!pnts[index]) pnts[index] = 0;
```

  return Pnt.polar(rad, (pnts[index] += inc));

```
};
```
```
 
```
```
let d = document;
```
```
let b = d.body;
```
```
with (b.appendChild(
```

  Object.assign(d.createElement`canvas`, {

```
    width: 600,
```
```
    height: 500,
```
```
  })
```
```
).getContext`2d`) {
```
```
  canvas.style.transformOrigin = "0 0";
```
```
  canvas.style.transform = "scale(.6)";
```
```
 
```
```
  let p0 = Pnt(80, 100);
```
```
  let p1 = Pnt(270, 100);
```
```
  let p2 = Pnt(480, 40);
```
```
  let p3 = Pnt(170, 180);
```
```
  let p4 = Pnt(430, 300);
```
```
 
```
```
  fillStyle = "black";
```
```
 
```
```
  function loop() {
```
```
    for (let i = 0; i < 20; i++) {
```
```
      index = -1;
```
```
 
```

      p0.add(polar(0.2, 4).add(polar(-0.4, 2).add(polar(0.05, 1))));

```
      fillRect(p0.x, p0.y, 1, 1);
```
```
 
```
```
      p1.add(
```
```
        polar(0.1, 2).add(
```

          polar(-0.2, 2).add(polar(0.03, 1).add(polar(-0.01, 0.5)))

```
        )
```
```
      );
```
```
      fillRect(p1.x, p1.y, 1, 1);
```
```
 
```

      p2.add(polar(0.08, 3).add(polar(-0.2, -12).add(polar(2, 10))));

```
      fillRect(p2.x, p2.y, 1, 1);
```
```
 
```

      p3.add(polar(0.08, 7).add(polar(-0.2, -12).add(polar(2, 11))));

```
      fillRect(p3.x, p3.y, 1, 1);
```
```
 
```

      p4 = p4.add(polar(0.025, 2).add(polar(-0.05, 1)));

```
      fillRect(p4.x, p4.y, 1, 1);
```
```
    }
```
```
    requestAnimationFrame(loop);
```
```
  }
```
```
 
```
```
  loop();
```
```
}
```

Some polar plots…

December 29, 2021

// canvas // javascript // math // speed-coded // speedcoding

Older Posts

Newer Posts

Speed Coded Space

Speed Coded Cosine Dither

WebGL Hemisphere Lines

Speed Coded Mouse Toy

Polar Plots

Recent

Archive