Snippet Zone

isPowerOfTwo

```
function isPowerOfTwo(value) {
```

  return (value & (value - 1)) === 0 && value !== 0;

```
}
```
```
 
```
```
for (let i = 0; i < 66; i++) {
```
```
  console.log(i, isPowerOfTwo(i));
```
```
}
```

I’ve had the pleasure of using THREE.js quite a bit over the years. The MathUtils file has some great utility functions. This version of isPowerOfTwo comes straight from there. I may post a few more from there in the future…

October 25, 2021

// javascript // math

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

Older Posts

Newer Posts

isPowerOfTwo

Lerp

Flower of Life Canvas

SVG getScreenCTM

Canvas Particle

Recent

Archive