Snippet Zone

Gravity Dots 2

```
d = document
```
```
b = d.body
```
```
b.style.margin = 0
```
```
b.style.background = 'black'
```
```
r = (v = 1) => Math.random() * v
```
```
 
```
```
with(
```
```
  b.appendChild(
```
```
    d.createElement`canvas`
```
```
  ).getContext`2d`) {
```
```
 
```
```
  onresize = () => {
```
```
    canvas.width = innerWidth
```
```
    canvas.height = innerHeight
```
```
  }
```
```
  onresize()
```
```
 
```
```
  fillStyle = 'red'
```
```
 
```
```
  dot = (
```
```
    x = r(innerWidth),
```
```
    y = 0,
```
```
    mass = 20, sr = r(2) + 2, 
```
```
    R = sr,
```
```
    dx, dy,
```
```
    col = '#005eb0',
```
```
    dist, vx = .2, vy = 0) => { 
```
```
 
```
```
    return () => { 
```
```
      fillStyle = col
```
```
      R = sr
```
```
      if (r() < .001) {
```
```
        vx = r() * 4 - 2
```
```
        R = sr * 2
```
```
        fillStyle = 'red'
```

        col = `hsl(${r(360)}deg, 50%, 50%)`

```
      }
```
```
 
```
```
      dx = innerWidth / 2 - x
```
```
      dy = innerHeight / 2 - y
```

      dist = Math.sqrt(dx * dx + dy * dy)

```
      dist *= dist
```
```
      vx += dx / dist * mass
```
```
      vy += dy / dist * mass
```
```
 
```
```
      x += vx
```
```
      y += vy
```
```
 
```
```
      beginPath()
```
```
      arc(x, y, R, 0, 6.29)
```
```
      fill()
```
```
    }
```
```
  }
```
```
 
```
```
  const dots = []
```

  for (let i = 0; i < 100; i++) dots.push(dot())

```
  loop = () => {
```
```
    fillStyle = 'rgba(0, 0, 0, 0.05)'
```

    fillRect(0, 0, canvas.width, canvas.height)

```
    dots.map(d => d())
```
```
  }
```
```
  setInterval(loop, 16)
```
```
}
```

A variation on this recent post.

November 18, 2021

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

Gravity Dots

```
d = document
```
```
b = d.body
```
```
b.style.margin = 0
```
```
b.style.background = 'black'
```
```
r = (v = 1) => Math.random() * v
```
```
 
```
```
with(
```
```
  b.appendChild(
```
```
    d.createElement`canvas`
```
```
  ).getContext`2d`) {
```
```
 
```
```
  onresize = () => {
```
```
    canvas.width = innerWidth
```
```
    canvas.height = innerHeight
```
```
  }
```
```
  onresize()
```
```
 
```
```
  fillStyle = 'red'
```
```
 
```
```
  dot = (
```
```
    x = r(innerWidth),
```
```
    y = r(innerHeight),
```
```
    mass = 10, sr = r(8) + 4, 
```
```
    R = sr,
```
```
    dx, dy,
```
```
    dist, vx = .2, vy = 0) => { 
```
```
 
```
```
    return () => { 
```
```
      fillStyle = '#005eb0'
```
```
      R = sr
```
```
      if (r() < .005) {
```
```
        vx = r() * 4 - 2
```
```
        R = sr * 2
```
```
        fillStyle = 'white'
```
```
      }
```
```
 
```
```
      dx = innerWidth / 2 - x
```
```
      dy = innerHeight / 2 - y
```

      dist = Math.sqrt(dx * dx + dy * dy)

```
      dist *= dist
```
```
      vx += dx / dist * mass
```
```
      vy += dy / dist * mass
```
```
 
```
```
      x += vx
```
```
      y += vy
```
```
 
```
```
      beginPath()
```
```
      arc(x, y, R, 0, 6.29)
```
```
      fill()
```
```
    }
```
```
  }
```
```
 
```
```
  const dots = []
```

  for (let i = 0; i < 10; i++) dots.push(dot())

```
  loop = () => {
```
```
    fillStyle = 'rgba(0, 0, 0, 0.2)'
```

    fillRect(0, 0, canvas.width, canvas.height)

```
    dots.map(d => d())
```
```
  }
```
```
  setInterval(loop, 16)
```
```
}
```

Some speed coded dots that gravitate to the center of the screen and occasionally change direction.

November 16, 2021

// animation // canvas // graphics // javascript // math // random // speed-coded

Fermat’s Spiral

const canvas = document.body.appendChild(document.createElement('canvas'));

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

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

```
  c.fillStyle = 'blue';
```
```
 
```
```
  const iter = 300;
```

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

```
  let rad = 0,
```
```
    theta = 0,
```

    scale = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.006,

```
    x,
```
```
    y;
```
```
 
```
```
  c.save();
```
```
  c.translate(halfWidth, halfHeight);
```
```
 
```
```
  for (let i = 0; i < iter; i++) {
```
```
    rad = Math.sqrt(theta) * scale;
```
```
    x = rad * Math.cos(theta);
```
```
    y = rad * Math.sin(theta);
```
```
    c.fillRect(x, y, 2, 2);
```
```
    c.fillRect(-x, -y, 5, 5);
```
```
 
```
```
    theta += 0.05;
```
```
  }
```
```
  c.restore();
```
```
}
```
```
 
```
```
resize();
```

window.addEventListener('resize', resize);

Draw Fermat’s spiral…

November 13, 2021

// canvas // javascript // math

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

Local Mouse Click

```
const RIGHT_BOUND = 200;
```

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

```
 
```
```
Object.assign(measureEl.style, {
```
```
  position: 'absolute',
```
```
  left: 0,
```
```
  top: 0,
```
```
  zIndex: 999
```
```
});
```
```
 
```

function localPosition(e, element, w = 1, h = 1) {

```
 
```
```
  // normalize desktop and mobile
```
```
  const touches = e.touches;
```
```
  let x;
```
```
  let y;
```

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

```
    x = touches[0].clientX;
```
```
    y = touches[0].clientY;
```
```
  } else {
```
```
    x = e.clientX;
```
```
    y = e.clientY;
```
```
  }
```
```
 
```
```
  function location(width) {
```
```
    let left = 0;
```
```
    let right = RIGHT_BOUND;
```
```
    let mid;
```
```
 
```
```
    while (right - left > 0.0001) {
```
```
      mid = (right + left) / 2;
```
```
 
```

      measureEl.style[width ? 'width' : 'height'] = `${mid}%`;

      measureEl.style[width ? 'height' : 'width'] = '100%';

```
      element.appendChild(measureEl);
```

      const el = document.elementFromPoint(x, y);

```
 
```
```
      element.removeChild(measureEl);
```
```
      if (el === measureEl) {
```
```
        right = mid;
```
```
      } else {
```
```
        if (right === RIGHT_BOUND) {
```
```
          return null;
```
```
        }
```
```
        left = mid;
```
```
      }
```
```
    }
```
```
 
```
```
    return mid;
```
```
  }
```
```
 
```
```
  const left = location(1);
```
```
  const top = location(0);
```
```
  return left != null && top != null
```
```
    ? {
```
```
        // percentage values
```
```
        left,
```
```
        top,
```
```
        // pixel values
```
```
        x: left * w * 0.01,
```
```
        y: top * h * 0.01
```
```
      }
```
```
    : null;
```
```
}
```
```
 
```

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

```
div.innerHTML = 'click me';
```
```
Object.assign(div.style, {
```
```
  postition: 'absolute',
```

  transform: 'translate(20px, 20px) rotate(45deg) scale(0.8)',

```
  width: '120px',
```
```
  height: '90px',
```
```
  color: 'white',
```
```
  fontFamily: 'sans-serif',
```
```
  background: 'gray'
```
```
});
```
```
 
```

document.addEventListener('touchstart', onClick);

document.addEventListener('mousedown', onClick);

```
 
```
```
function onClick(e) {
```

  const info = localPosition(e, e.target, 120, 90);

```
  console.log(info);
```
```
}
```

Find the local percentage and pixel values of the mouse/touch location.

I found this one on stackoverflow here by user 4esn0k.

This is an interesting alternative to semi-broken native browser solutions and custom matrix math 😉

November 9, 2021

// css // dom // html // javascript // math

Older Posts

Newer Posts

Gravity Dots 2

Gravity Dots

Fermat’s Spiral

Wobbling Discord Blob

Local Mouse Click

Recent

Archive