Snippet Zone

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

Gumowski / Mira Thing

```
D = document
```
```
B = D.body
```
```
S = 1200
```
```
with(
```
```
  B.appendChild(Object.assign(
```
```
    D.createElement`canvas`, {
```
```
      width: S,
```
```
      height: S
```
```
    })).getContext`2d`) {
```
```
 
```
```
  canvas.style.transformOrigin = '0 0'
```
```
  canvas.style.transform = 'scale(.5)'
```
```
 
```
```
  b = .9998
```
```
  xn1 = 5
```
```
  yn1 = 0
```
```
  xn = yn = 0
```
```
  scale = 20
```
```
  iterations = 1000
```
```
 
```
```
  f = x => {
```
```
    x2 = x * x
```

    return a * x + (2 * (1 - a) * x2) / (1 + x2)

```
  }
```
```
 
```
```
  mouseX = mouseY = 0
```
```
  onpointermove = e => {
```
```
    mouseX = e.clientX
```
```
    mouseY = e.clientY
```
```
  }
```
```
 
```
```
  dwn = 0
```
```
 
```
```
  fillStyle = '#000'
```
```
  fillRect(0, 0, S, S)
```
```
 
```
```
  loop = _ => {
```
```
 
```
```
    a = mouseY / 1000
```
```
    xn1 = mouseX / 30
```
```
    yn1 = 0
```
```
 
```
```
    dwn += 1
```
```
 
```

    for (var i = 0; i < iterations; i++) {

```
      xn = xn1;
```
```
      yn = yn1;
```
```
 
```

      fillStyle = `hsla(${i / 30}, ${dwn / 6}%, 50%, .2)`

```
 
```
```
      xn1 = b * yn + f(xn)
```
```
      yn1 = -xn + f(xn1)
```

      fillRect(S * .5 + xn1 * scale, yn1 * scale / 2 + dwn, 1, 1)

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

Move your around as the Gumowski / Mira shape moves down the screen…

January 4, 2022

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

Speed Coded Cosine Dither

```
d = document
```
```
b = d.body
```
```
wh = 300
```
```
hs = wh / 2
```
```
S = 1.5
```
```
with(
```
```
  b.appendChild(Object.assign(
```
```
    d.createElement`canvas`, {
```
```
      width: wh, height: wh
```
```
    })).getContext`2d`) {
```
```
 
```
```
  canvas.style.transformOrigin = '0 0'
```

  canvas.style.transform = `scale(${S})`

  canvas.style.imageRendering = 'pixelated'

```
 
```
```
  fillStyle = 'gray'
```
```
 
```
```
  fillRect(0, 0, wh, wh)
```
```
  shadowBlur = 80
```
```
  shadowColor = 'black';
```
```
  shadowOffsetY = 20
```
```
  for (let i = 0; i < 70; i++) {
```
```
    save()
```
```
    translate(hs, hs)
```
```
    rotate(i / 33)
```
```
    scale(1 - i / 100, 1)
```
```
    translate(-hs, -hs)
```

    fillStyle = `hsl(${i << 2}, 50%, 50%)`

```
    beginPath()
```
```
    arc(hs, hs, hs * .8, 0, 7)
```
```
    fill()
```
```
    restore()
```
```
    shadowColor = 'transparent'
```
```
    shadowBlur = 0
```
```
  }
```
```
 
```

  C = Object.assign(d.createElement`canvas`, {

```
    width: wh, height: wh
```
```
  }).getContext('2d')
```
```
  C.drawImage(canvas, 0, 0);
```
```
 
```
```
  im = getImageData(0, 0, wh, wh);
```
```
 
```
```
  p = im.data
```
```
  size = wh * wh * 4
```
```
 
```
```
  modd = Math.random() * 5550
```
```
  for (let i = 0; i < size; i += 4) {
```

    if (Math.random() < 0.0001) modd = Math.random() * 5550

```
    M = Math.cos(i % modd) * 255
```
```
    p[i] = M < p[i] ? 255 : 0;
```
```
    p[i + 1] = M < p[i + 1] ? 255 : 0;
```
```
    p[i + 2] = M < p[i + 2] ? 255 : 0;
```
```
  }
```
```
 
```
```
  putImageData(im, 0, 0);
```

  globalCompositeOperation = 'hard-light'

```
  drawImage(C.canvas, 0, 0);
```
```
}
```

Some speed-coded canvas stuff with a dither inspired by #genuary2022

January 2, 2022

// canvas // graphics // javascript // random // speedcoding // tricks

Older Posts

Newer Posts

Polar Forking Tweak

Grads

Hermit Crab Curves

Gumowski / Mira Thing

Speed Coded Cosine Dither

Recent

Archive