Snippet Zone

For Golf Down

```
for(i=6;i--;)console.log(i)
```

October 21, 2021

// codegolf // javascript

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

Wiggly Line on Canvas 2

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
document.body.style.margin = 0;
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth * 2;
```
```
  canvas.height = innerHeight * 2;
```

  canvas.style.width = innerWidth + 'px';

  canvas.style.height = innerHeight + 'px';

```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const PAD = 50;
```
```
const RAD = 2;
```
```
const SPEED = 200;
```
```
const TWO_PI = Math.PI * 2;
```
```
 
```
```
let mode = 'draw';
```
```
 
```
```
let t = Math.random() * TWO_PI, 
```
```
    x = canvas.width / 2, 
```
```
    y = canvas.height / 2,
```
```
    vx = 0, vy = 0, ta = 0;
```
```
 
```
```
let solid = false;
```
```
let dotMod = 3;
```
```
function loop() {
```

  if (Math.random() < .01) solid = !solid;

  if (Math.random() < .01) dotMod = [2, 3, 6][Math.floor(Math.random() * 3)]

```
 
```
```
  for (var i = 0; i < SPEED; i++) {
```
```
    t = Math.sin(ta) * TWO_PI;
```
```
    vx = RAD * Math.cos(t);
```
```
    vy = RAD * Math.sin(t);
```
```
    ta += Math.random() * 0.1 - 0.05;
```
```
    x += vx;
```
```
    y += vy;
```
```
 
```
```
    if (Math.random() < 0.005) {
```
```
      mode = 'no draw';
```
```
    } else if (Math.random() < 0.005) {
```
```
      mode = 'draw';
```
```
    }
```
```
 
```

    if (mode === 'draw' && (solid || i % dotMod === 0)) {

```
      c.fillStyle = 'black';
```
```
      c.fillRect(x, y, 2, 2);
```
```
    }
```
```
 
```
```
    if (x < -PAD) {
```
```
      x = canvas.width + PAD;
```

    } else if (x > canvas.width + PAD) {

```
      x = -PAD;
```
```
    }
```
```
    if (y < -PAD) {
```
```
      y = canvas.height + PAD;
```

    } else if (y > canvas.height + PAD) {

```
      y = -PAD;
```
```
    }
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

This is a variation on a post from awhile back. I was posting it over on dev.to and realized I wanted it to look a bit different.

October 18, 2021

// animation // canvas // graphics // javascript

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

For Golf Down

Flower of Life Canvas

SVG getScreenCTM

Wiggly Line on Canvas 2

Canvas Particle

Recent

Archive