Snippet Zone

)

}

}

)

(

}

{

)

)

(

)

(

(

{

}

)

(

)

}

)

)

{

(

(

)

)

}

)

(

}

About All Posts Warning Random

squigs

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 = 40;
```
```
const TWO_PI = Math.PI * 2;
```
```
 
```
```
let mode = "draw";
```
```
 
```
```
let t = Math.random() * TWO_PI,
```
```
  x = innerWidth,
```
```
  y = innerHeight,
```
```
  vx = 0,
```
```
  vy = 0,
```
```
  ta = 0,
```
```
  w = 10,
```
```
  h = 1,
```
```
  hue = 20;
```
```
 
```
```
function loop() {
```
```
  c.globalAlpha = 1;
```
```
  if (Math.random() < 0.12) {
```
```
    let alpha = 0.02;
```

    if (Math.random() < 0.1) alpha = 0.1;

    c.fillStyle = `rgba(255, 255, 255, ${alpha})`;

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

```
  }
```
```
  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";
```

      hue = [200, 20, 10, 40][~~(Math.random() * 4)];

```
      if (Math.random() < 0.5) {
```
```
        w = Math.random() * 200;
```

        h = Math.random() * Math.random() * 10;

```
      } else {
```
```
        w = Math.random() * 20;
```

        h = Math.random() * Math.random() * 200;

```
      }
```
```
    } else if (Math.random() < 0.005) {
```
```
      mode = "draw";
```
```
    }
```
```
 
```
```
    if (mode === "draw") {
```

      c.shadowColor = "rgba(0, 205, 205, 0.2)";

```
      c.shadowBlur = 5;
```

      c.fillStyle = `hsl(${hue}, 100%, 50%)`;

```
      c.fillRect(x, y, w, h);
```
```
 
```
```
      c.shadowColor = null;
```
```
      c.shadowBlur = 0;
```
```
    }
```
```
 
```
```
    if (x < -PAD) {
```
```
      x = innerWidth + PAD;
```

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

```
      x = -PAD;
```
```
    }
```
```
    if (y < -PAD) {
```
```
      y = innerHeight + PAD;
```

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

```
      y = -PAD;
```
```
    }
```
```
  }
```
```
  c.globalAlpha = 0.9;
```

  c.drawImage(canvas, -2, -1, canvas.width + 3, canvas.height + 4);

```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

More fun speed coding for some recent youtube shorts…

July 27, 2024

0

// canvas // curves // filters // hacks // hex // javascript // math // random // speedcoding // tricks

Canvas Blur Repeatedly

```
document.body.style.margin = 0
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
function clear() {
```
```
  c.fillStyle = 'rgb(95 182 209)'
```

  c.fillRect(0, 0, innerWidth, innerHeight)

```
}
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth
```
```
  canvas.height = innerHeight
```
```
  clear()
```
```
}
```
```
resize()
```
```
 
```
```
addEventListener('resize', resize)
```
```
 
```
```
function loop() {
```

  const size = Math.min(innerWidth / 2,

```
  innerHeight / 2)
```
```
  const halfSize = size / 2
```
```
 
```
```
  c.filter = 'blur(50px)'
```
```
  c.fillStyle = 'rgba(0, 0, 0, 0.02)'
```
```
  c.fillRect(
```
```
    innerWidth / 2 - halfSize, 
```
```
    innerHeight / 2 - halfSize,
```
```
    size, size)
```
```
 
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Apply a blur filter to a rectangle over and over again…

Browser support at the time of the post is still lacking – and there are some interesting rendering differences between Chrome and Firefox:

Firefox on left and Chrome on right…

As nice as it would be to be able to use these I don’t recommend it yet. Using a GLSL shader is the way to go for now…

December 31, 2021

0

// canvas // filters // javascript

snippet.zone ~ 2021-24 /// {s/z}