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

Obfuscated Pre

```
b = document.body
```
```
with(b.style) 
```

  fontFamily = 'monospace', fontSize = '2em',

  transform = 'skew(10deg) translateX(40px)'

```
 
```
```
N = '<br>';
```
```
 
```
```
(f=(_='*')=>(
```

  b.innerHTML+=` <b style='opacity:${Math.random()+.2}'>${_}</b>`,f))('<pre>')

```
  (   )(   )(   )(   )(N)
```
```
   ('(')('0')('_')('_')(N)
```
```
    ('-')(   )(   )('-')(N)
```
```
     ('_')('_')('0')(')')(N)
```
```
      ('-')(   )(   )('-')(N)
```
```
       ('(')('0')('_')('_')(N)
```
```
        ('-')(   )(   )('-')(N)
```
```
         ('_')('_')('0')(')')(N)
```
```
          ('-')(   )(   )('-')(N)
```
```
           ('(')('0')('_')('_')(N)
```
```
            (   )(   )(   )(   )
```

Not really sure what this is… just playing around…

October 23, 2021

// codegolf // javascript // obfuscation // speed-coded // strings

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

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

Older Posts

Newer Posts

Lerp

Obfuscated Pre

With Style

For Golf Down

Flower of Life Canvas

Recent

Archive