Snippet Zone

Elasticity With Trails

```
let pointX = pointY = 0;
```
```
 
```
```
document.addEventListener('touchmove', 
```

  e => e.preventDefault(), { passive: false });

```
 
```

document.addEventListener('mousemove', e => {

```
  pointX = e.clientX;
```
```
  pointY = e.clientY;
```
```
});
```
```
 
```

document.addEventListener('touchmove', e => {

```
  pointX = e.touches[0].clientX;
```
```
  pointY = e.touches[0].clientY;
```
```
});
```
```
 
```
```
let el = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```
```
 
```
```
const size = 20;
```
```
const halfSize = size / 2;
```
```
 
```
```
Object.assign(el.style, {
```
```
  position: 'absolute',
```
```
  width: `${size}px`,
```
```
  height: `${size}px`,
```
```
  background: 'red',
```
```
  borderRadius: `${size}px`,
```
```
  left: 0, top: 0
```
```
});
```
```
 
```
```
let x = vx = y = vy = 0;
```
```
const FADE_TIME = 800;
```
```
const plotDot = (x, y) => {
```

  const dot = document.body.appendChild(el.cloneNode());

```
  const time = 
```
```
  dot.style.transform += ' scale(.25)';
```

  dot.style.transition = `opacity ${FADE_TIME}ms ease-out`;

```
  window.requestAnimationFrame(() => {
```
```
    dot.style.opacity = 0;
```

    setTimeout(() => dot.parentNode.removeChild(dot), FADE_TIME);

```
  })
```
```
}
```
```
 
```
```
let ticks = 0;
```
```
const loop = () => { 
```
```
  vx = ((pointX - x) * .08 + vx) * .95;
```
```
  vy = ((pointY - y) * .08 + vy) * .95;
```
```
  x += vx;
```
```
  y += vy;
```
```
 
```
```
  if (ticks++ % 2 === 0 && 
```
```
    Math.abs(pointX - x) > 1 && 
```
```
    Math.abs(pointY - y) > 1) {
```
```
      plotDot();
```
```
    }
```

  el.style.transform = `translate(${x - halfSize}px, ${y - halfSize}px)`;

```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```
```
 
```
```
const info = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```

info.innerHTML = 'move mouse or finger left/right/up/down';

This is a variation on yesterdays post. This has elasticity on both axis and draws a trail of dots…

October 16, 2021

// animation // javascript // tricks // ui

Elasticity

```
let pointX = pointY = 0;
```
```
 
```

document.addEventListener('mousemove', e => {

```
  pointX = e.clientX;
```
```
  pointY = e.clientY;
```
```
});
```
```
 
```

document.addEventListener('touchmove', e => {

```
  pointX = e.touches[0].clientX
```
```
  pointY = e.touches[0].clientY
```
```
});
```
```
 
```
```
let el = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```
```
 
```
```
const size = 20;
```
```
const halfSize = size / 2;
```
```
 
```
```
Object.assign(el.style, {
```
```
  position: 'absolute',
```
```
  width: `${size}px`,
```
```
  height: `${size}px`,
```
```
  background: 'red',
```
```
  left: 0, top: 0
```
```
})
```
```
 
```
```
let x = vx = 0;
```
```
const loop = () => { 
```
```
  vx = ((pointX - x) * .2 + vx) * .79;
```
```
  x += vx;
```

  el.style.transform = `translate(${x - halfSize}px, 50px)`;

```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```
```
 
```
```
let info = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```

info.innerHTML = 'move mouse or finger left/right';

Basic interactive elasticity with mouse or touch

October 15, 2021

// animation // javascript // tricks // ui

Animation Along Path SVG

```
const el = document.body.appendChild(
```
```
  document.createElement('div'));
```
```
 
```
```
el.innerHTML = `
```

  <svg width="100%" height="100%" viewBox="0 0 550 496">

```
    <path 
```

      d="M 20 10 C 100 100 300 00 300 100 200 200 150 300 20 10"

      stroke="black" fill='none' vector-effect="non-scaling-stroke"/>

    <circle cx="20" cy="10" r="6" fill="red" />

```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
  </style>
```
```
 `;
```
```
 
```

const circle = el.querySelector('circle');

```
const path = el.querySelector('path');
```
```
const length = path.getTotalLength();
```
```
let pos = 0;
```
```
 
```
```
function loop() {
```
```
  pos += 3;
```
```
  if (pos > length) {
```
```
    pos = 0;
```
```
  }
```

  const point = path.getPointAtLength(pos);

```
  circle.cx.baseVal.value = point.x;
```
```
  circle.cy.baseVal.value = point.y;
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

SVG has an easy way to animate something along an arbitrary path… getPointAtLength

October 4, 2021

// animation // curves // javascript // svg // tricks

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

Array Based Collision Cells

```
((
```
```
  d = document,
```
```
  b = d.body,
```
```
  canvas = b.appendChild(
```
```
    d.createElement('canvas')
```
```
  ),
```
```
  c = canvas.getContext('2d'),
```
```
  r = _ => Math.random(),
```
```
  map = [
```
```
    [0, 0, 0, 0, 0, 2],
```
```
    [1, 1, 0, 0, 0, 1],
```
```
    [1, 1, 2, 0, 0, 0],
```
```
    [2, 2, 0, 0, 0, 1],
```
```
    [0, 1, 0, 0, 2, 0],
```
```
    [2, 0, 0, 0, 2, 1],
```
```
  ],
```
```
  mapW = map[0].length,
```
```
  mapH = map.length,
```
```
  cols = [, 'red', 'black'],
```
```
  cell = (
```
```
    x, y, idx,
```
```
    col = cols[idx],
```
```
    size = 30,
```
```
    xp = x * size,
```
```
    yp = y * size,
```
```
    dir, 
```
```
    mv = f => {
```
```
      map[y][x] = 0
```
```
      f()
```
```
      map[y][x] = idx
```
```
    }
```
```
  ) => (move) => {
```
```
    if (move) {
```
```
      dir = ~~(r() * 4)
```
```
      if (dir == 0 &&
```
```
        x != 0 &&
```
```
        map[y][x - 1] == 0) {
```
```
        mv(_ => x--)
```
```
      } else if (dir == 1 &&
```
```
        x != mapW - 1 &&
```
```
        map[y][x + 1] == 0) {
```
```
        mv(_ => x++)
```
```
      } else if (dir == 2 &&
```
```
        y != 0 &&
```
```
        map[y - 1][x] == 0) {
```
```
        mv(_ => y--)
```
```
      } else if (dir == 3 &&
```
```
        y != mapH - 1 &&
```
```
        map[y + 1][x] == 0
```
```
      ) {
```
```
        mv(_ => y++)
```
```
      }
```
```
    }
```
```
 
```
```
    xp += (x * size - xp) / 4
```
```
    yp += (y * size - yp) / 4
```
```
    c.fillStyle = col
```
```
    c.fillRect(xp, yp, size, size)
```
```
    c.strokeStyle = 'gray'
```
```
    c.strokeRect(xp, yp, size, size)
```
```
  },
```
```
  cells = [],
```
```
  w, h, idx, val, i, j,
```
```
  draw = () => {
```
```
    c.fillStyle = 'gray'
```
```
    c.fillRect(0, 0, w, h)
```
```
 
```
```
    idx = ~~(r() * mapH * mapW)
```
```
 
```
```
    cells.forEach((cell, i) =>
```
```
      cell(idx == i && r() < .3))
```
```
  }
```
```
) => {
```
```
  b.style.margin = 0
```
```
 
```
```
  onresize = () => {
```
```
    w = canvas.width = innerWidth
```
```
    h = canvas.height = innerHeight
```
```
    draw()
```
```
  }
```
```
  onresize()
```
```
 
```
```
  for (i = 0; i < mapH; i++) {
```
```
    for (j = 0; j < mapW; j++) {
```
```
      val = map[i][j]
```

      if (val != 0) cells.push(cell(j, i, val))

```
    }
```
```
  }
```
```
 
```
```
  setInterval(draw, 16)
```
```
})()
```

Array based avoid. I was about to port an old thing that was similar to this and then thought it would be more fun to speedcode it instead. The result is a slightly golfed version of this old thing.

September 23, 2021

// animation // arrays // canvas // codegolf // graphics // javascript // math

Older Posts

Newer Posts

Elasticity With Trails

Elasticity

Animation Along Path SVG

ASCII Circles (Bresenham Fun)

Array Based Collision Cells

Recent

Archive