Snippet Zone

Lerp

const lerp = (a, b, t) => a + (b - a) * t;

```
 
```
```
console.log(lerp(0, 100, 0.5));
```
```
console.log(lerp(0, 100, 0.1));
```
```
 
```
```
console.log(lerp(50, 100, 0.5));
```
```
console.log(lerp(100, 50, 0.5));
```
```
 
```

const c = document.body.appendChild(document.createElement`canvas`)

```
  .getContext`2d`;
```
```
c.canvas.width = c.canvas.height = 100;
```
```
c.fillStyle = 'black';
```
```
c.fillRect(0, 0, 100, 100);
```
```
 
```
```
let time = 0;
```
```
const loop = () => {
```

  c.fillStyle = 'rgba(255, 255, 255, .5)';

```
 
```
```
  time += 0.01;
```
```
 
```
```
  if (time < 1) {
```

    c.fillRect(lerp(10, 55, time), lerp(10, 90, time), 5, 5);

```
  }
```
```
  window.requestAnimationFrame(loop);
```
```
};
```
```
loop();
```

October 24, 2021

// canvas // javascript // math

Flower of Life Canvas

```
((
```
```
  d = document,
```
```
  b = d.body,
```
```
  rad = (innerWidth * 1.9) / 6,
```
```
  theta = 0,
```
```
  thetaSpeed = 0.03,
```
```
  cx = innerWidth / 4,
```
```
  cy = innerHeight / 4,
```
```
  ox = 0,
```
```
  oy = 0,
```
```
  offTheta,
```
```
  x, y, ang, step, blur,
```
```
  _
```
```
) => {
```
```
  Object.assign(b.style, {
```
```
    background: 'black',
```
```
    margin: 0
```
```
  }) 
```
```
 
```

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

```
    width: innerWidth * 2,
```
```
    height: innerHeight * 2
```
```
  }).getContext`2d`
```
```
 
```
```
  with (Math) {
```
```
    with (b.appendChild(
```

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

```
        width: innerWidth * 2,
```
```
        height: innerHeight * 2
```
```
      })
```
```
    ).getContext`2d`) {
```
```
      Object.assign(canvas.style, {
```
```
        width: '100%',
```
```
        height: '100%'
```
```
      })
```
```
 
```
```
      onresize = () => {
```

        blur.canvas.width = canvas.width = innerWidth * 2

        blur.canvas.height = canvas.height = innerHeight * 2

```
        rad = (innerWidth * 2.5) / 6
```
```
        cx = innerWidth
```
```
        cy = innerHeight
```
```
        fillStyle = '#000'
```

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

```
      }
```
```
      onresize()
```
```
 
```
```
      step = (PI * 2) / 6
```
```
 
```
```
      _ = t => {
```
```
        ang = ~~(t / 500) % 7
```
```
 
```
```
        globalAlpha = 0.23
```
```
        fillStyle = '#fff'
```
```
 
```
```
        if (ang > 0) {
```
```
          offTheta = step * ang
```
```
          ox = rad * cos(offTheta)
```
```
          oy = rad * sin(offTheta)
```
```
        } else {
```
```
          ox = 0
```
```
          oy = 0
```
```
        }
```
```
 
```
```
        for (i = 0; i < 20; i++) {
```

          x = ox + cx + rad * cos(theta)

          y = oy + cy + rad * sin(theta)

```
          theta += thetaSpeed
```
```
 
```
```
          fillRect(x, y, 4, 4)
```
```
        }
```
```
 
```
```
        blur.drawImage(canvas, 0, 0)
```
```
 
```
```
        globalAlpha = 0.05
```
```
        drawImage(blur.canvas, 0, 2)
```
```
 
```
```
        requestAnimationFrame(_)
```
```
      }
```
```
      _()
```
```
    }
```
```
  }
```
```
})()
```

Speed coded animated flower of life on canvas

October 20, 2021

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

SVG getScreenCTM

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

<svg width="200" height="200" viewBox="0 0 200 200">

```
  <rect 
```
```
    class="rect"
```

    transform="translate(50, 50) scale(1.2) rotate(25)"

```
    fill="purple"
```

    x="0" y="0" width="50" height="50" />

```
</svg>
```
```
`;
```
```
 
```
```
const box = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```
```
 
```
```
Object.assign(box.style, {
```
```
  position: 'absolute',
```
```
  left: 0, top: 0,
```
```
  width: '50px',
```
```
  height: '50px',
```
```
  transformOrigin: '0 0',
```
```
  outline: '5px solid red'
```
```
});
```
```
 
```

const rect = document.querySelector('.rect');

const {a, b, c, d, e, f} = rect.getScreenCTM()

```
 
```
```
box.style.transform = `
```
```
  matrix(${[a, b, c, d, e, f]})
```
```
`;
```

The transformation matrix of an SVG element can be obtained using getScreenCTM or getCTM. The latter of which will be relative to the SVG coordinate space, vs the coordinate space of the page.

Here we take the matrix data from getScreenCTM and use it on a div to place a border over an SVG rect node. This is great for layering HTML on top of SVG.

October 19, 2021

// dom // javascript // math // matrix // svg // tricks // ui

Canvas Particle

const canvas = document.createElement('canvas'),

```
  c = canvas.getContext('2d');
```
```
 
```
```
canvas.width = 500;
```
```
canvas.height = 500;
```
```
 
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black';
```

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

```
 
```
```
let a = 0.29, b = 0.22;
```
```
 
```
```
function f(x, y) {
```

  if (Math.random() < 0.001) b = Math.random();

  return Math.cos((x + Math.sin(x) * 0.01 + Math.cos(x * a)) * b);

```
}
```
```
 
```
```
let x = 1, y = 0;
```
```
 
```
```
setInterval(() => {
```
```
  if (Math.random() < 0.03) {
```
```
    x = 1;
```
```
    y = 0;
```
```
  }
```

  if (Math.random() < 0.001) a = Math.random();

```
  for (let i = 0; i < 1e3; i++) {
```
```
    x = x + f(y);
```
```
    y = y + f(x);
```
```
    c.save();
```
```
    c.translate(150, 250);
```
```
    c.scale(0.5, 0.5);
```

    c.fillStyle = 'rgba(255, 255, 255, 0.01)';

```
    c.fillRect(x, y, 5, 5);
```
```
    c.restore();
```
```
  }
```
```
}, 20);
```

A single particle moves around and leaves a trail

October 17, 2021

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

Hacky Polish Notation

```
const f = (o, ...a) => eval(a.join(o));
```
```
 
```
```
const polish = eq => eval(
```
```
    eq.replace(/\s+/g, ' ')
```

      .replace(/(\))\s([0-9])/g, '$1,$2')

```
      .replace(/([0-9]+)[^\)]/g, '$1,')
```

      .replace(/\(\s?([\+\-\*\\/])/g, 'f(`$1`,')

```
  );
```
```
 
```
```
console.log(polish('(* 2 2)'));
```

console.log(polish('(* 2 2 (+ 3 2 1))'));

```
console.log(polish('(- 10 3)'));
```

console.log(polish('(/ (+ 10 10 (* 2 2)) 3)'));

Hacky way to parse polish notation. This uses regular expressions to transform polish notation into javascript that can be run with eval. Just a weird/fun idea…

October 14, 2021

// javascript // lisp // math // s-expressions // scheme

Older Posts

Newer Posts

Lerp

Flower of Life Canvas

SVG getScreenCTM

Canvas Particle

Hacky Polish Notation

Recent

Archive