Snippet Zone

Average Some Curves

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
  draw();
```
```
}
```
```
 
```
```
function draw() {
```

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

```
 
```

  Math.min(window.innerWidth, window.innerHeight) * 0.0015;

```
  const iter = 100,
```

        halfWidth = window.innerWidth / 2,

        halfHeight = window.innerHeight / 2;

  let rad = 50, rad2 = 50, theta = 0, x, y;

```
  let x2, y2;
```
```
  for (let i = 0; i < iter; i++) {
```
```
    c.fillStyle = 'blue';
```

    x = halfWidth + rad * Math.cos(theta);

    y = halfHeight + rad * Math.sin(theta);

```
    c.fillRect(x, y, 5, 5);
```
```
 
```
```
    c.fillStyle = 'red';
```
```
 
```

    rad2 = 80 + rad * Math.cos(theta * 3);

    x2 = halfWidth + rad2 * Math.cos(theta);

    y2 = halfHeight + rad2 * Math.sin(theta);

```
    c.fillRect(x2, y2, 5, 5);
```
```
 
```
```
    c.fillStyle = 'green';
```

    c.fillRect((x2 + x) / 2, (y2 + y) / 2, 5, 5);

```
 
```
```
    theta += .1;
```
```
  }
```
```
}
```
```
 
```
```
resize();
```

window.addEventListener('resize', resize);

January 22, 2022

// canvas // graphics // math // speedcoding

1×1 Transparent Image DataUri Gif

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Have used this one in the past – super useful – guessing I got it from here but not totally sure…

If I ever get around to making the updated version of QuickShader available – it’s used in there…

EDIT:

```
// ¯\_(:P)_/¯
```

Object.assign(document.createElement`canvas`,{width:1,height:1}).toDataURL()

```
 
```
```
//// ... 
```

document.body.innerHTML=`<canvas id=x>`;x.width=x.height=1;x.toDataURL()

January 19, 2022

// graphics // humor // tricks

Polar Forking Tweak

```
const FOUR_PI = 6 * Math.PI;
```
```
const { cos, sin } = Math;
```
```
 
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
 
```
```
let inc = 0;
```
```
function draw() { 
```
```
  c.fillStyle = 'rgba(0, 0, 0, .3)'
```

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

```
  c.fillStyle = 'white';
```
```
 
```

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

```
  let theta = 0,
```

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

```
    x,
```
```
    y;
```
```
 
```
```
  c.save();
```
```
  c.translate(halfWidth, halfHeight)
```
```
 
```
```
  let b = 5 * cos(inc);
```
```
  inc += .02;
```
```
 
```

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 10 * sin(theta / 3));

    // randomly speed-coded and tweaked... leaving as is :D

    x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);

    y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);

```
    c.fillRect(x,y, 2, 2);
```
```
    theta += 0.04;
```
```
  }
```
```
  c.restore();
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
resize();
```
```
addEventListener('resize', resize);
```
```
 
```
```
draw();
```

Just randomly futzing with sin/cos…

January 12, 2022

// animation // canvas // curves // graphics // hacks // humor // math

Grads

```
const grad = {
```
```
  gen(c) {
```
```
    const canvas = c.canvas;
```

    const t = Math.random() * 2 * Math.PI;

```
    const cx = canvas.width / 2;
```
```
    const cy = canvas.height / 2;
```
```
    const r = Math.max(cx, cy);
```
```
    const x1 = cx * Math.cos(t);
```
```
    const y1 = cy * Math.sin(t);
```

    const x2 = cx * Math.cos(t + Math.PI);

    const y2 = cy * Math.sin(t + Math.PI);

```
 
```
```
    const drawFn = c => {
```

      const g = c.createLinearGradient(x1, y1, x2, y2);

```
      g.addColorStop(0, 'white');
```
```
      g.addColorStop(1, 'black');
```
```
 
```
```
      c.fillStyle = g;
```

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

```
    };
```
```
 
```
```
    drawFn(c);
```
```
  }
```
```
};
```
```
 
```
```
Object.assign(document.body.style, { 
```
```
    margin: 0,
```
```
    display: 'grid',
```

    'grid-template-columns': '1fr 1fr 1fr',

```
  });
```

const modes = 'screen,overlay,darken,lighten,color-dodge,color-burn,hard-light, soft-light,difference,exclusion,hue,saturation,color,luminosity,multiply'.split(',');

```
 
```
```
for (let j = 0; j < 21; j++) { 
```
```
  const SIZE = 200;
```
```
  const c = document.body.appendChild(
```
```
    document.createElement('canvas')
```
```
  ).getContext('2d');
```
```
 
```

  c.canvas.width = c.canvas.height = SIZE;

```
  Object.assign(c.canvas.style, {
```
```
    position: 'relative', 
```
```
    width: '100%'
```
```
  })
```
```
 
```
```
 
```

  c.fillStyle = `hsl(${Math.random() * 20 + 190}deg, 50%, 50%)`

```
  c.fillRect(0, 0, SIZE, SIZE)
```
```
 
```
```
  for (let i = 0; i < 5; i++) { 
```
```
    c.globalAlpha = .5;
```

    c.globalCompositeOperation = modes[~~(Math.random() * modes.length)]

```
    grad.gen(c)
```
```
  }
```
```
}
```

Not sure what this is… used the random gradient code and variations on it a few times….

January 8, 2022

// gradients // graphics

Hermit Crab Curves

// six white geometric figures (outlines) superimposed on a black wall.

```
d = document
```
```
b = d.body
```
```
S = 600
```
```
hs = S / 2
```
```
with(Math) {
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: S, height: S })

```
  ).getContext`2d`) {
```
```
 
```
```
    fillRect(0, 0, S, S)
```
```
    strokeStyle = '#fff'
```
```
 
```

    canvas.style.transformOrigin = '0 0'

    canvas.style.transform = 'scale(.5)'

```
 
```
```
    lineWidth = 8
```
```
 
```
```
    H = (
```
```
      s = S * .5,
```
```
      yp = hs, xp = hs,
```
```
      a = 1.234,
```
```
      d = 0.1678,
```
```
      o = 3.9
```
```
      ) => {
```
```
        beginPath()
```
```
        for (t = 0; t < 6.28; t+=.2) {
```

          r = sqrt(a ** PI % sin(d * (t ** 2 * a) + o)) * s

```
          x = xp + r * sin(t);
```
```
          y = yp + r * cos(t);
```

          t === 0 ? moveTo(x, y) : lineTo(x, y)

```
        }
```
```
        closePath()
```
```
        stroke()
```
```
        fill()
```
```
    }
```
```
 
```
```
    tick = 0
```
```
    loop = _ => {
```
```
      fillStyle = 'rgba(0, 0, 0, 0.5)'
```
```
      fillRect(0, 0, S, S)
```
```
      save()
```
```
      translate(S/2, S/2)
```
```
      scale(.5, .5)
```
```
      rotate(tick * 20)
```
```
      translate(-S/2, -S/2)
```
```
      tick += .0001
```
```
      globalAlpha = .8;
```
```
      H(S, hs, hs, 1 + tick)
```
```
      H(S, hs, hs, 1.1 + tick)
```
```
      H(S, hs, hs, 1.2 + tick)
```
```
      globalAlpha = 1;
```
```
      H(S * .3, hs-S/4, hs, 1, tick)
```

      H(S * .2, hs+S/4, hs, 1.2, tick, 1.8)

      H(S * .2, hs, hs - S/4, cos(tick), -tick, 5)

```
      restore()
```
```
      requestAnimationFrame(loop)
```
```
    }
```
```
    loop()
```
```
  }
```
```
}
```

Another thing for #genuary2022… Sol LeWitt Wall Drawing

January 7, 2022

// animation // canvas // graphics // hacks // javascript // math

Older Posts

Newer Posts

Average Some Curves

1×1 Transparent Image DataUri Gif

Polar Forking Tweak

Grads

Hermit Crab Curves

Recent

Archive