Snippet Zone

Wobbling Discord Blob

```
const SCALE = 0.25;
```
```
const TWO_PI = Math.PI * 2;
```
```
const HALF_PI = Math.PI / 2;
```

const canvas = document.createElement("canvas");

```
const c = canvas.getContext("2d");
```
```
 
```
```
canvas.width = window.innerWidth;
```
```
canvas.height = window.innerHeight;
```
```
document.body.appendChild(canvas);
```
```
 
```
```
class Blob {
```
```
  constructor() {
```
```
    this.wobbleIncrement = 0;
```

    // use this to change the size of the blob

    // use this to change the size of the blob

```
    this.radius = 1100;
```
```
    // think of this as detail level
```

    // number of conections in the `bezierSkin`

```
    this.segments = 14;
```

    this.step = HALF_PI / this.segments;

```
    this.anchors = [];
```
```
    this.radii = [];
```
```
    this.thetaOff = [];
```
```
 
```
```
    const bumpRadius = 200;
```

    const halfBumpRadius = bumpRadius / 2;

```
 
```

    for (let i = 0; i < this.segments + 2; i++) {

```
      this.anchors.push(0, 0);
```

      this.radii.push(Math.random() * bumpRadius - halfBumpRadius);

      this.thetaOff.push(Math.random() * TWO_PI);

```
    }
```
```
 
```
```
    this.theta = 0;
```
```
    this.thetaRamp = 0;
```
```
    this.thetaRampDest = 12;
```
```
    this.rampDamp = 25;
```
```
  }
```
```
  update() {
```

    this.thetaRamp += (this.thetaRampDest - this.thetaRamp) / this.rampDamp;

```
    this.theta += 0.03;
```
```
 
```
```
    this.anchors = [0, this.radius];
```

    for (let i = 0; i <= this.segments + 2; i++) {

      const sine = Math.sin(this.thetaOff[i] + this.theta + this.thetaRamp);

      const rad = this.radius + this.radii[i] * sine;

```
      const theta = this.step * i;
```
```
      const x = rad * Math.sin(theta);
```
```
      const y = rad * Math.cos(theta);
```
```
      this.anchors.push(x, y);
```
```
    }
```
```
 
```
```
    c.save();
```
```
    c.translate(-10, -10);
```
```
    c.scale(SCALE, SCALE);
```
```
    c.fillStyle = "blue";
```
```
    c.beginPath();
```
```
    c.moveTo(0, 0);
```
```
    bezierSkin(this.anchors, false);
```
```
    c.lineTo(0, 0);
```
```
    c.fill();
```
```
    c.restore();
```
```
  }
```
```
}
```
```
 
```
```
const blob = new Blob();
```
```
 
```
```
function loop() {
```

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

```
  blob.update();
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```
```
 
```
```
// array of xy coords, closed boolean
```

function bezierSkin(bez, closed = true) {

```
  const avg = calcAvgs(bez);
```
```
  const leng = bez.length;
```
```
 
```
```
  if (closed) {
```
```
    c.moveTo(avg[0], avg[1]);
```
```
    for (let i = 2; i < leng; i += 2) {
```
```
      let n = i + 1;
```

      c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);

```
    }
```

    c.quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);

```
  } else {
```
```
    c.moveTo(bez[0], bez[1]);
```
```
    c.lineTo(avg[0], avg[1]);
```

    for (let i = 2; i < leng - 2; i += 2) {

```
      let n = i + 1;
```

      c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);

```
    }
```

    c.lineTo(bez[leng - 2], bez[leng - 1]);

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

// create anchor points by averaging the control points

```
function calcAvgs(p) {
```
```
  const avg = [];
```
```
  const leng = p.length;
```
```
  let prev;
```
```
 
```
```
  for (let i = 2; i < leng; i++) {
```
```
    prev = i - 2;
```
```
    avg.push((p[prev] + p[i]) / 2);
```
```
  }
```
```
  // close
```

  avg.push((p[0] + p[leng - 2]) / 2, (p[1] + p[leng - 1]) / 2);

```
  return avg;
```
```
}
```

This is a stackoverflow answer of mine. The question was asking how to create a wobbling blob like the one in the background of the discord login page. Take a look at the answer here.

User AmooHesam wrapped it up in a github repo here.

November 10, 2021

// animation // canvas // javascript // math // paths // ui

Creative Coding Auto-Painting

Object.getOwnPropertyNames(Math).map(i => (this[i] = Math[i]))

```
;((
```
```
  width = innerWidth * 2,
```
```
  height = innerHeight * 2,
```
```
  cnv = document.body.appendChild(
```

    Object.assign(document.createElement('canvas'), {

```
      width,
```
```
      height
```
```
    })
```
```
  ),
```
```
  c = cnv.getContext('2d'),
```
```
  r = (n = 1) => Math.random() * n,
```
```
  NUM = 50,
```
```
  f = () => ({
```
```
    ax: r(width),
```
```
    ay: r(height),
```
```
    x: 0,
```
```
    y: 0,
```
```
    T: r(9),
```
```
    R: r(innerWidth * 0.8) + 40,
```
```
    t: r(6),
```
```
    C: round(r(255)),
```
```
    m: r(5) + 1
```
```
  }),
```
```
  cs,
```
```
  sn,
```
```
  dx,
```
```
  dy,
```
```
  ns = [...Array(NUM)].map(f)
```
```
) => {
```
```
  Object.assign(cnv.style, {
```
```
    transformOrigin: '0 0',
```
```
    transform: 'scale(.5)'
```
```
  })
```
```
  Object.assign(document.body.style, {
```
```
    margin: 0,
```
```
    padding: 0
```
```
  })
```
```
 
```
```
  const clear = () => {
```
```
    c.fillStyle = '#666668'
```
```
    c.fillRect(0, 0, width, height)
```
```
    c.globalAlpha = 0.5
```
```
  }
```
```
 
```
```
  onresize = () => {
```
```
    width = cnv.width = innerWidth * 2
```

    height = cnv.height = innerHeight * 2

```
    clear()
```
```
  }
```
```
 
```
```
  clear()
```
```
 
```
```
  setInterval(() => {
```
```
    for (i = 0; i < 30; i++) {
```
```
      ns.map((n, i) => {
```
```
        with (n) {
```
```
          x = ax + R * cos(t)
```

          y = ay + R * sin(t) * pow(sin(t * 0.5), m)

          c.fillStyle = `rgba(${C},${C},${C},.02)`

          ;(cs = cos(T)), (sn = sin(T)), (dx = x - ax), (dy = y - ay)

          c.fillRect(cs * dx - sn * dy + ax, sn * dx + cs * dy + ay, 50, 50)

```
          t += 0.1
```
```
          R -= 0.01
```
```
          if (R < 5) ns[i] = f()
```
```
        }
```
```
      })
```
```
    }
```
```
  }, 16)
```
```
})()
```

Speed coded semi-golfed canvas texture. Best if viewed in fullscreen.

August 27, 2021

// animation // canvas // codegolf // golfed // graphics // javascript // math // matrix // paths // random

Rectangle Path with SVG

```
const rectPath = rect =>
```
```
  `M ${rect.left} ${rect.top}
```
```
  L ${rect.right} ${rect.top}
```
```
    ${rect.right} ${rect.bottom}
```
```
    ${rect.left} ${rect.bottom}
```
```
    ${rect.left} ${rect.top} `;
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div'));
```
```
 
```
```
el.innerHTML = `
```

  <svg width="100%" height="100%" viewBox="0 0 550 496">

```
    <path d="
```

    ${rectPath({left: 20, top: 10, right: 100, bottom: 100})}

    ${rectPath({left: 50, top: 50, right: 200, bottom: 200})}

    ${rectPath({left: 150, top: 20, right: 250, bottom: 100})}

    ${rectPath({left: 150, top: 120, right: 250, bottom: 230})}

    " stroke="black" fill="red" fill-rule="evenodd" vector-effect="non-scaling-stroke"/>

```
 
```
```
    <path d="
```

    ${rectPath({left: 10, top: 220, right: 100, bottom: 300})}

    ${rectPath({left: 20, top: 250, right: 150, bottom: 350})}

    " stroke="white" fill="#64a7ff" fill-rule="nonzero" vector-effect="non-scaling-stroke"/>

```
 
```
```
    <path d="
```

    ${rectPath({left: 350, top: 10, right: 450, bottom: 150})}

```
    " fill="#2e9997" />
```
```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
  </style>
```
```
`;
```

In this snippet rectPath creates a rectangle with “move to” and “line to” commands to be used in conjunction with SVG paths.

August 9, 2021

// javascript // paths // svg

Quick SVG

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

el.innerHTML = `<svg style='overlow:visible'>

  <circle cx="100" cy="20" r="20" fill="red" />

  <rect x="100" y="60" width="20" height="20" fill="blue" />

```
</svg>`;
```

Defining SVG like this in a template string is a fast and powerful way to start doing SVG that is controlled or generated by JavaScript. Here is another example:

const scribble = document.body.appendChild(

```
    document.createElement('div'));
```
```
const d = (iter = 30) => {
```
```
  // make sure the iter is odd
```
```
  if (iter % 2 == 0) iter += 1;
```
```
  // random cubic beziér
```
```
  let path = 'M ';
```
```
  for (let i = 0; i < iter; i++) {
```
```
    const cmd = i == 1 ? 'C ' : ' '
```

    path += cmd + Math.random() * 200 + ' ' + Math.random() * 200;

```
  }
```
```
  return path + 'z';
```
```
}
```

scribble.innerHTML = `<svg style='overlow:visible' viewBox="0 0 200 200">

```
  <path d="${d()}" 
```
```
    stroke="#295896" 
```
```
    stroke-width="3"
```
```
    fill="#ccc" 
```
```
    fill-rule="even-odd"
```

    vector-effect="non-scaling-stroke" />

```
</svg>
```
```
<style>
```
```
  svg, div, body, html {
```
```
    overflow: visible; 
```
```
    height: 100%; 
```
```
    width: 100%;
```
```
    margin: 0; padding: 0;
```
```
  }
```
```
</style>
```
```
`;
```

You’ll notice a somewhat hacky style tag as well… this is used to quickly fill the page with the SVG.

August 5, 2021

// graphics // javascript // paths // random // svg // tricks

Wobbling Discord Blob

Creative Coding Auto-Painting

Rectangle Path with SVG

Quick SVG

Recent

Archive