Snippet Zone

Freeth’s Nephroid Animated

```
const FOUR_PI = 4 * Math.PI;
```
```
const { cos, sin } = Math;
```
```
 
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
 
```
```
let inc = 0;
```
```
function draw() {
```

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

```
  c.fillStyle = 'blue';
```
```
 
```

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

```
  let theta = 0,
```

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

```
    x,
```
```
    y;
```
```
 
```
```
  c.save();
```
```
  c.translate(halfWidth, halfHeight)
```
```
 
```
```
  // Freeth's Nephroid
```

  // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/

```
  // r = a(1 + 2sin(θ / 2))
```
```
  let b = 2 * cos(inc);
```
```
  inc += .01;
```
```
 
```

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 2 * sin(theta / 2))

```
    x = rad * cos(theta);
```
```
    y = rad * sin(theta);
```
```
    c.fillRect(x, y, 2, 2);
```
```
    theta += 0.05;
```
```
  }
```
```
  c.restore();
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
resize();
```

window.addEventListener('resize', resize);

```
 
```
```
draw()
```

It’s always fun to play with curves from here Famous Curves Index

January 11, 2022

// animation // canvas // javascript // math

Hermit Crab Curves

// six white geometric figures (outlines) superimposed on a black wall.

```
d = document
```
```
b = d.body
```
```
S = 600
```
```
hs = S / 2
```
```
with(Math) {
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: S, height: S })

```
  ).getContext`2d`) {
```
```
 
```
```
    fillRect(0, 0, S, S)
```
```
    strokeStyle = '#fff'
```
```
 
```

    canvas.style.transformOrigin = '0 0'

    canvas.style.transform = 'scale(.5)'

```
 
```
```
    lineWidth = 8
```
```
 
```
```
    H = (
```
```
      s = S * .5,
```
```
      yp = hs, xp = hs,
```
```
      a = 1.234,
```
```
      d = 0.1678,
```
```
      o = 3.9
```
```
      ) => {
```
```
        beginPath()
```
```
        for (t = 0; t < 6.28; t+=.2) {
```

          r = sqrt(a ** PI % sin(d * (t ** 2 * a) + o)) * s

```
          x = xp + r * sin(t);
```
```
          y = yp + r * cos(t);
```

          t === 0 ? moveTo(x, y) : lineTo(x, y)

```
        }
```
```
        closePath()
```
```
        stroke()
```
```
        fill()
```
```
    }
```
```
 
```
```
    tick = 0
```
```
    loop = _ => {
```
```
      fillStyle = 'rgba(0, 0, 0, 0.5)'
```
```
      fillRect(0, 0, S, S)
```
```
      save()
```
```
      translate(S/2, S/2)
```
```
      scale(.5, .5)
```
```
      rotate(tick * 20)
```
```
      translate(-S/2, -S/2)
```
```
      tick += .0001
```
```
      globalAlpha = .8;
```
```
      H(S, hs, hs, 1 + tick)
```
```
      H(S, hs, hs, 1.1 + tick)
```
```
      H(S, hs, hs, 1.2 + tick)
```
```
      globalAlpha = 1;
```
```
      H(S * .3, hs-S/4, hs, 1, tick)
```

      H(S * .2, hs+S/4, hs, 1.2, tick, 1.8)

      H(S * .2, hs, hs - S/4, cos(tick), -tick, 5)

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

Another thing for #genuary2022… Sol LeWitt Wall Drawing

January 7, 2022

// animation // canvas // graphics // hacks // javascript // math

Dividing Squares

```
d = document
```
```
b = d.body
```
```
S = 300
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: S, height: S })

```
  ).getContext`2d`) {
```
```
 
```
```
  seed = Math.random();
```
```
 
```
```
  rando = () => {
```
```
    seed = seed * 16807 % 0x7fffffff
```
```
    return (seed - 1) / 0x7ffffffe
```
```
  }
```
```
 
```
```
  squares = {}
```
```
  rot = (
```
```
    cx, cy, X, Y, ang,
```
```
    cos = Math.cos(-ang),
```
```
    sin = Math.sin(-ang),
```

    x = cos * (X - cx) + sin * (Y - cy) + cx,

    y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })

```
 
```
```
  inc = 0
```
```
  breaks = 0
```
```
  delay = 0
```
```
  ticks = 0
```
```
 
```
```
  square = (x = S / 2, y = S / 2,
```
```
    size = S * .7,
```
```
    r = 0,
```
```
    rad = .3,
```
```
    hSize = size / 2,
```
```
 
```
```
    t = rando() * 7,
```
```
    vx = rando() * rad * Math.cos(t),
```
```
    vy = rando() * rad * Math.sin(t),
```
```
 
```
```
    vr = rando() * .02 - .01,
```
```
    i, j,
```
```
    o = {
```
```
    id:inc++,
```
```
    sr(R) {
```
```
      r = R
```
```
    },
```
```
 
```
```
    divide(num = 2, cSize = size / num,
```
```
      chSize = cSize / 2,
```
```
      sx = x - hSize + chSize,
```
```
      sy = y - hSize + chSize) {
```
```
 
```
```
      save()
```
```
 
```
```
      translate(-size * .1, -size * .1)
```
```
      scale(1.1, 1.1)
```
```
 
```

      o.render('rgba(255, 255, 255, .7)')

```
      restore()
```
```
 
```
```
      for (i = 0; i < num; i++) {
```
```
        for (j = 0; j < num; j++) {
```

          l = rot(x, y, sx + i * cSize, sy + j * cSize, r)

          square(l.x, l.y, cSize, r, rad + 2)

```
        }
```
```
      }
```
```
    },
```
```
 
```
```
    render(fill = '#000') {
```
```
      save()
```
```
      translate(x, y)
```
```
      rotate(r)
```
```
      fillStyle = fill
```
```
      strokeStyle = '#fff'
```
```
      lineWidth = 2
```

      fillRect(-hSize,-hSize, size, size)

      strokeRect(-hSize,-hSize, size, size)

```
      restore()
```
```
    },
```
```
 
```
```
    draw() {
```
```
      x += vx
```
```
      y += vy
```
```
      r += o.id === 0 ? .01 : vr
```
```
      o.render()
```

      if (rando() < .05 && breaks < 10 &&

```
          delay > 30 && ticks > 200) {
```
```
 
```
```
        o.divide(~~(rando() * 3) + 2)
```
```
        delete squares[o.id]
```
```
        breaks++
```
```
        delay = 0
```
```
      }
```
```
    }
```
```
  }) => (squares[o.id] = o)
```
```
 
```
```
  square()
```
```
 
```
```
  C = Object.assign(
```

    d.createElement`canvas`, { width: S, height: S }

```
  ).getContext`2d`
```
```
 
```
```
  fillStyle = 'rgba(82, 82, 82, 1)'
```
```
  fillRect(0, 0, S, S)
```
```
 
```
```
  loop = _ => {
```
```
    ticks++
```
```
    fillStyle = 'rgba(82, 82, 82, 0.1)'
```
```
    fillRect(0, 0, S, S)
```
```
 
```
```
    globalAlpha = .4
```
```
 
```

    drawImage(C.canvas, -1, 5, S + 1, S + 5)

```
    globalAlpha = 1
```
```
 
```
```
    save()
```
```
    translate(20, 50)
```
```
    scale(.9, .7)
```
```
 
```
```
    for (i in squares) {
```
```
      squares[i].draw()
```
```
    }
```
```
 
```
```
    restore()
```
```
    delay++
```
```
    C.drawImage(canvas, 0, 0)
```
```
    requestAnimationFrame(loop)
```
```
  }
```
```
  loop()
```
```
}
```

Another thing for #genuary2022… destroy a square

January 5, 2022

// animation // canvas // javascript // math // speedcoding

Gumowski / Mira Thing

```
D = document
```
```
B = D.body
```
```
S = 1200
```
```
with(
```
```
  B.appendChild(Object.assign(
```
```
    D.createElement`canvas`, {
```
```
      width: S,
```
```
      height: S
```
```
    })).getContext`2d`) {
```
```
 
```
```
  canvas.style.transformOrigin = '0 0'
```
```
  canvas.style.transform = 'scale(.5)'
```
```
 
```
```
  b = .9998
```
```
  xn1 = 5
```
```
  yn1 = 0
```
```
  xn = yn = 0
```
```
  scale = 20
```
```
  iterations = 1000
```
```
 
```
```
  f = x => {
```
```
    x2 = x * x
```

    return a * x + (2 * (1 - a) * x2) / (1 + x2)

```
  }
```
```
 
```
```
  mouseX = mouseY = 0
```
```
  onpointermove = e => {
```
```
    mouseX = e.clientX
```
```
    mouseY = e.clientY
```
```
  }
```
```
 
```
```
  dwn = 0
```
```
 
```
```
  fillStyle = '#000'
```
```
  fillRect(0, 0, S, S)
```
```
 
```
```
  loop = _ => {
```
```
 
```
```
    a = mouseY / 1000
```
```
    xn1 = mouseX / 30
```
```
    yn1 = 0
```
```
 
```
```
    dwn += 1
```
```
 
```

    for (var i = 0; i < iterations; i++) {

```
      xn = xn1;
```
```
      yn = yn1;
```
```
 
```

      fillStyle = `hsla(${i / 30}, ${dwn / 6}%, 50%, .2)`

```
 
```
```
      xn1 = b * yn + f(xn)
```
```
      yn1 = -xn + f(xn1)
```

      fillRect(S * .5 + xn1 * scale, yn1 * scale / 2 + dwn, 1, 1)

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

Move your around as the Gumowski / Mira shape moves down the screen…

January 4, 2022

// animation // canvas // graphics // math // speedcoding

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

Older Posts

Newer Posts

Freeth’s Nephroid Animated

Hermit Crab Curves

Dividing Squares

Gumowski / Mira Thing

Speed Coded Space

Recent

Archive