Snippet Zone

ASCII Circles (Bresenham Fun)

```
// some circles made of text
```
```
 
```
```
const cols = 50;
```
```
const rows = 50;
```
```
const sym = '.';
```
```
const body = document.body;
```
```
 
```
```
Object.assign(body.style, {
```
```
  userSelect: 'none',
```
```
  fontFamily: 'Courier, monospace',
```
```
  position: 'fixed', 
```
```
  width: '100%',
```
```
  height: '100%',
```
```
  margin: 0
```
```
});
```
```
 
```
```
const el = body.appendChild(
```
```
  document.createElement('span')
```
```
);
```
```
el.innerHTML = sym;
```
```
 
```
```
Object.assign(el.style, {
```
```
  position: 'absolute',
```
```
  left: '50%',
```
```
  top: '50%',
```
```
  wordWrap: 'break-word',
```
```
  cursor: 'pointer'
```
```
});
```
```
 
```

const charSize = el.getBoundingClientRect().width;

```
const elWidth = charSize * cols;
```
```
el.style.display = 'block'
```
```
el.style.width = `${elWidth}px`;
```
```
 
```
```
const info = body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
 
```
```
Object.assign(info.style, {
```
```
  background: '#fff',
```
```
  padding: '4px',
```
```
  position: 'absolute'
```
```
})
```

info.innerHTML = 'click/tap and hold for different fx';

```
 
```
```
function resize() {
```
```
  const scl = Math.min(
```
```
    1.23, 
```

    Math.min(innerWidth, innerHeight) / elWidth * .93

```
  );
```

  el.style.transform = `translate(-50%, -50%) scale(${scl}, ${scl * .55})`

```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const size = cols * rows;
```
```
const pix = sym.repeat(size);
```
```
el.innerHTML = pix;
```
```
 
```
```
let cells = pix.split('')
```
```
const blank = cells.concat();
```
```
 
```
```
function setSym(x, y, col) {
```
```
  const idx = x + y * cols;
```
```
  if (cells[idx] != null) {
```
```
    cells[idx] = col;
```
```
  }
```
```
  return setSym
```
```
}
```
```
 
```
```
const grad = '::;|0UU888NN';
```
```
function circ(shooter) {
```

  let x = Math.round(Math.random() * cols);

  let y = Math.round(Math.random() * rows);

```
  const rad = Math.round(
```
```
    shooter ? Math.random() * 2 :
```

      Math.random() * Math.random() * 13 + 1

```
  );
```
```
 
```

  const sym = shooter ? '#' : grad.charAt(rad % grad.length);

```
  let speed = rad / 10 + .1;
```
```
  let dir = Math.random() * 2 - 1;
```
```
  return () => {
```

    drawCircle(x, y, rad, sym, shooter);

```
    y += speed;
```
```
    if (shooter) x += speed * 3 * dir;
```
```
    if (y > rows + 10) y = -14;
```
```
  }
```
```
}
```
```
 
```
```
const circs = [];
```
```
const NUM = 40;
```
```
for (let i = 0; i < NUM; i++) {
```
```
  circs.push(circ(Math.random() > 0.5))
```
```
}
```
```
 
```
```
let down;
```

document.addEventListener('mousedown', () => {

```
  down = true;
```
```
});
```

document.addEventListener('mouseup', () => {

```
  down = false;
```
```
});
```

document.addEventListener('touchstart', () => {

```
  down = true;
```
```
});
```

document.addEventListener('touchend', () => {

```
  down = false;
```
```
});
```
```
 
```
```
let tweak;
```
```
let tweakChoice;
```
```
let tweakChance = 0.4;
```

const clear = () => cells = blank.concat();

```
 
```
```
function draw() {
```
```
  if (!down) {
```
```
    tweak = false;
```
```
    tweakChoice = Math.random();
```
```
    clear();
```
```
  } else {
```
```
    if (tweakChoice < tweakChance) {
```
```
      tweak = true;
```
```
      clear();
```
```
    }
```
```
  }
```
```
 
```
```
  circs.forEach(circ => circ());
```
```
  el.innerHTML = cells.join('');
```
```
}
```
```
 
```

// 60fps is too fast, so use 30ms interval

```
setInterval(draw, 30);
```
```
 
```
```
function hLine(xp, yp, w, col) {
```
```
  for (let i = 0; i < w; i++) {
```
```
    setSym(xp + i, yp, col);
```
```
  }
```
```
  return hLine;
```
```
}
```
```
 
```
```
// bresenham circle
```

function drawCircle(xp, yp, radius, sym = '@', isFilled) {

```
  if (isFilled && tweak) sym = '';
```
```
 
```
```
  xp = parseInt(xp, 10);
```
```
  yp = parseInt(yp, 10);
```
```
  radius = parseInt(radius, 10);
```
```
  let balance = -radius,
```
```
    xoff = 0,
```
```
    yoff = radius;
```
```
 
```
```
  while (xoff <= yoff) {
```
```
    const p0 = xp - xoff;
```
```
    const p1 = xp + xoff;
```
```
 
```
```
    const p2 = yp + yoff;
```
```
    const p3 = yp - yoff;
```
```
    const p4 = yp + xoff;
```
```
    const p5 = xp + yoff;
```
```
    const p6 = xp - yoff;
```
```
    const p7 = yp - xoff;
```
```
 
```
```
    if (isFilled) {
```
```
      const w0 = xoff + xoff;
```
```
      const w1 = yoff + yoff;
```
```
 
```
```
      hLine
```
```
        (p0, yp + yoff, w0, sym)
```
```
        (p0, yp - yoff, w0, sym)
```
```
        (p6, yp + xoff, w1, sym)
```
```
        (p6, yp - xoff, w1, sym);
```
```
 
```
```
    } else {
```
```
      setSym
```
```
        (p1, p2, sym)
```
```
        (p0, p2, sym)
```
```
        (p0, p3, sym)
```
```
        (p1, p3, sym)
```
```
        (p5, p4, sym)
```
```
        (p6, p4, sym)
```
```
        (p6, p7, sym)
```
```
        (p5, p7, sym);
```
```
    }
```
```
 
```

    // never been able to find the original

```
    // source for the below condition 
```

    // more info here: https://actionsnippet.com/?p=492

    if ((balance += xoff++ + xoff) >= 0) {

```
      balance -= --yoff + yoff;
```
```
    }
```
```
  }
```
```
}
```

This is a bit of a longer snippet that uses the Bresenham circle drawing algorithm to draw some circles with text. I recommend looking at it with the fullscreen button.

I like to do this:

```
hLine
```
```
  (p0, yp + yoff, w0, sym)
```
```
  (p0, yp - yoff, w0, sym)
```
```
  (p6, yp + xoff, w1, sym)
```
```
  (p6, yp - xoff, w1, sym);
```

Make a function return itself, so that if you need to call it many times without having to repeat the function name. Because this isn’t a common style it is generally frowned upon, I’m always tempted to use it at work for some reason… maybe next April fools.

September 26, 2021

// animation // arrays // graphics // hacks // humor // javascript // math // random // strings // tricks

30% Chance Math.random()

```
// 30%
```
```
if (Math.random() < .3) {
```
```
  // 30% chance this will run
```
```
  console.log('30%');
```
```
} else {
```
```
  console.log('nope');
```
```
}
```

I do this all the time when creative coding. I usually use a seeded random number generator instead of Math.random. It’s very useful to have something happen X% of the time.

Let’s run this a few times and look at the results. Click/tap try it out.

```
for (let i = 0; i < 111; i++) {
```
```
  if (Math.random() < .3) {
```
```
    console.log('30%');
```
```
  } else {
```
```
    console.log('nope');
```
```
  }
```
```
}
```

Scroll through the results of the console window.

September 25, 2021

// javascript // math // random // tricks

Wiggly Line Canvas

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
document.body.style.margin = 0;
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth;
```
```
  canvas.height = innerHeight;
```
```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const PAD = 50;
```
```
const RAD = 2;
```
```
const SPEED = 20;
```
```
const TWO_PI = Math.PI * 2;
```
```
 
```
```
let mode = 'draw';
```
```
 
```
```
let t = Math.random() * TWO_PI, 
```
```
    x = innerWidth / 2, 
```
```
    y = innerHeight / 2,
```
```
    vx = 0, vy = 0, ta = 0;
```
```
 
```
```
function loop() {
```
```
  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';
```
```
    } else if (Math.random() < 0.005) {
```
```
      mode = 'draw';
```
```
    }
```
```
 
```
```
    if (mode === 'draw') {
```
```
      c.fillStyle = 'red';
```
```
      c.fillRect(x, y, 2, 2);
```
```
    }
```
```
 
```
```
    if (x < -PAD) {
```
```
      x = innerWidth + PAD;
```
```
    } else if (x > innerWidth + PAD) {
```
```
      x = -PAD;
```
```
    }
```
```
    if (y < -PAD) {
```
```
      y = innerHeight + PAD;
```
```
    } else if (y > innerHeight + PAD) {
```
```
      y = -PAD;
```
```
    }
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.

September 19, 2021

// animation // canvas // javascript // math // random // tricks

Creative Coding Auto-Painting

Object.getOwnPropertyNames(Math).map(i => (this[i] = Math[i]))

```
;((
```
```
  width = innerWidth * 2,
```
```
  height = innerHeight * 2,
```
```
  cnv = document.body.appendChild(
```

    Object.assign(document.createElement('canvas'), {

```
      width,
```
```
      height
```
```
    })
```
```
  ),
```
```
  c = cnv.getContext('2d'),
```
```
  r = (n = 1) => Math.random() * n,
```
```
  NUM = 50,
```
```
  f = () => ({
```
```
    ax: r(width),
```
```
    ay: r(height),
```
```
    x: 0,
```
```
    y: 0,
```
```
    T: r(9),
```
```
    R: r(innerWidth * 0.8) + 40,
```
```
    t: r(6),
```
```
    C: round(r(255)),
```
```
    m: r(5) + 1
```
```
  }),
```
```
  cs,
```
```
  sn,
```
```
  dx,
```
```
  dy,
```
```
  ns = [...Array(NUM)].map(f)
```
```
) => {
```
```
  Object.assign(cnv.style, {
```
```
    transformOrigin: '0 0',
```
```
    transform: 'scale(.5)'
```
```
  })
```
```
  Object.assign(document.body.style, {
```
```
    margin: 0,
```
```
    padding: 0
```
```
  })
```
```
 
```
```
  const clear = () => {
```
```
    c.fillStyle = '#666668'
```
```
    c.fillRect(0, 0, width, height)
```
```
    c.globalAlpha = 0.5
```
```
  }
```
```
 
```
```
  onresize = () => {
```
```
    width = cnv.width = innerWidth * 2
```

    height = cnv.height = innerHeight * 2

```
    clear()
```
```
  }
```
```
 
```
```
  clear()
```
```
 
```
```
  setInterval(() => {
```
```
    for (i = 0; i < 30; i++) {
```
```
      ns.map((n, i) => {
```
```
        with (n) {
```
```
          x = ax + R * cos(t)
```

          y = ay + R * sin(t) * pow(sin(t * 0.5), m)

          c.fillStyle = `rgba(${C},${C},${C},.02)`

          ;(cs = cos(T)), (sn = sin(T)), (dx = x - ax), (dy = y - ay)

          c.fillRect(cs * dx - sn * dy + ax, sn * dx + cs * dy + ay, 50, 50)

```
          t += 0.1
```
```
          R -= 0.01
```
```
          if (R < 5) ns[i] = f()
```
```
        }
```
```
      })
```
```
    }
```
```
  }, 16)
```
```
})()
```

Speed coded semi-golfed canvas texture. Best if viewed in fullscreen.

August 27, 2021

// animation // canvas // codegolf // golfed // graphics // javascript // math // matrix // paths // random

Wobbling Ball With Canvas

// same as yesterday but with canvas instead of svg

const canvas = document.createElement('canvas'),

```
      c = canvas.getContext('2d');
```
```
document.body.appendChild(canvas);
```
```
document.body.style.margin = 0;
```
```
 
```
```
let w = window.innerWidth,
```
```
    h = window.innerHeight,
```
```
    x = w / 2,
```
```
    y = h / 2,
```
```
    vx = vy = dx = dy = 0,
```
```
    damp = 0.99, div = 8, ticks = 0, 
```
```
    wobbleChance = 0.03,
```
```
    startTick = 50;
```
```
 
```
```
function loop() {
```
```
 
```
```
  w = window.innerWidth;
```
```
  h = window.innerHeight;
```
```
  radius = w * 0.05;
```
```
  diam = radius * 2;
```
```
  diam2x = diam * 2;
```
```
 
```
```
  if (x > w){
```
```
    vx *= -1;
```
```
    dx *= -1;
```
```
    x = w;
```
```
  } else if (x < 0){
```
```
    vx *= -1;
```
```
    dx *= -1;
```
```
    x = 0;
```
```
  }
```
```
 
```
```
  if (y > h) {
```
```
    vy *= -1;
```
```
    dy *= -1;
```
```
    y = h;
```
```
  } else if (y < 0) {
```
```
    vy *= -1;
```
```
    dy *= -1;
```
```
    y = 0
```
```
  } 
```
```
 
```
```
  if (
```
```
    Math.random() < wobbleChance || 
```
```
    ticks === startTick) {
```
```
      dx += Math.random() * 10 - 5;
```
```
      dy += Math.random() * 10 - 5;
```
```
  }
```
```
 
```
```
  dx *= damp;
```
```
  dy *= damp;
```
```
 
```
```
  vx += (dx - vx) / div;
```
```
  vy += (dy - vy) / div;
```
```
 
```
```
  x += vx;
```
```
  y += vy;
```
```
 
```
```
  // in most cases these days you
```

  // just clear the whole canvas, but for

  // this example we clear a rectangle around

```
  // the circle 
```
```
  c.clearRect(
```
```
    x - diam, 
```
```
    y - diam, 
```
```
    diam2x, 
```
```
    diam2x
```
```
  );
```
```
 
```
```
  // draw the path
```
```
  c.fillStyle = 'red'
```
```
  c.beginPath();
```

  c.arc(x, y, radius, 0, Math.PI * 2, false);

```
  c.fill();
```
```
 
```
```
  ticks++;
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
resize();
```

window.addEventListener('resize', resize);

A wobbling ball with canvas.

August 8, 2021

// animation // canvas // graphics // javascript // random

Older Posts

Newer Posts

ASCII Circles (Bresenham Fun)

30% Chance Math.random()

Wiggly Line Canvas

Creative Coding Auto-Painting

Wobbling Ball With Canvas

Recent

Archive