Snippet Zone

With Style

```
with(document.body.appendChild(
```
```
      document.createElement('div')
```
```
    ).style) 
```
```
      height = '100px', 
```
```
      background = 'red',
```
```
      border = '3px solid blue',
```
```
      transform = 'rotate(10deg)'
```

Was looking through some old code and saw something like this… people don’t like with and it doesn’t work in “strict mode”… I use it here on Snippet Zone for fun speed-coding stuff…

October 22, 2021

// javascript // speed-coded

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

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

Newer Posts

With Style

Flower of Life Canvas

Canvas Particle

Recent

Archive