Snippet Zone

Range Slider and Progress Bar

```
const NUM = 8;
```
```
const NUM_M_1 = NUM - 1;
```

const ui = document.createElement('div')

```
ui.innerHTML = `
```
```
  <div class="ui">
```
```
    <div class="progress" data-ref>
```

      <div class="progressFill" data-ref></div>

```
    </div>
```
```
    <div class="text" data-ref>
```
```
    0% of 100%
```
```
    </div>
```
```
 
```
```
    <div class="dots" data-ref>
```
```
    ${
```
```
      `<div></div>`.repeat(NUM)
```
```
    }
```
```
    </div>
```
```
 
```
```
    <label>
```
```
      drag the slider...
```

      <input class="slider" type="range" min="0" max="100" step="1" value="0" data-ref/>

```
    </label>
```
```
  </div>
```
```
  <style>
```
```
    body {
```
```
      font-family: sans-serif;
```
```
    }
```
```
    .progress, .dots {
```
```
      position: relative;
```
```
      width: 80%;
```
```
      margin: 0 auto;
```
```
      height: 30px;
```
```
      border: 1px solid black;
```
```
    }
```
```
    .progressFill {
```
```
      height: 100%;
```
```
      width: 0;
```
```
      background: red;
```
```
    }
```
```
    .text {
```
```
      padding: 1em;
```
```
      background: #ccc;
```
```
      margin: .5em;
```
```
      font-weight: bold;
```
```
    }
```
```
    label {
```
```
      display: block;
```
```
      margin: 1em;
```
```
    }
```
```
    .slider {
```
```
      cursor: pointer;
```
```
    }
```
```
    .dots {
```
```
      border: none;
```
```
    }
```
```
    .dots div {
```
```
      height: 100%;
```
```
      width: ${100 / NUM}%;
```
```
      float: left;
```

      transition: background 400ms ease-out;

```
      background: transparent;
```
```
      border-radius: 500px;
```

      box-shadow: inset 0 0px 0 3px blue;

```
    }
```
```
    .dots div:nth-child(1) {
```
```
      background: red;
```
```
    }
```
```
 
```
```
  </style>
```
```
`;
```
```
document.body.appendChild(ui);
```
```
 
```
```
// select everything with a `data-ref`
```
```
const els = {};
```

;[...document.querySelectorAll('[data-ref]')]

```
  .forEach(el => {
```
```
    els[el.classList[0]] = el;
```
```
  });
```
```
 
```
```
function update(e) {
```
```
 
```
```
  // normal prog bar
```
```
  const val = e.target.value;
```

  els.progressFill.style.width = `${val}%`;

```
  els.text.innerHTML = `
```
```
    ${val}% of 100%
```
```
  `;
```
```
 
```
```
  // segmented dot prog bar
```

  const idx = Math.floor(val / (100 / NUM));

```
  if (idx < NUM) { 
```
```
    for (let i = 0; i < NUM; i++) {
```
```
      els.dots.children[i]
```

        .style.background = i <= idx ? 'red' : 'white'

```
    }
```
```
  }
```
```
}
```
```
 
```

els.slider.addEventListener('input', update);

els.slider.addEventListener('change', update);

Drag slider and watch two progress bars and a text readout update. There are some interesting vanilla tricks in this one.

This trick and a variety of variations on it is pretty powerful:

```
const els = {};
```

[...document.querySelectorAll('[data-ref]')].forEach(el => {

```
  els[el.classList[0]] = el;
```
```
});
```

August 26, 2021

// css // dom // graphics // javascript // math // strings // tricks // ui

Rectangle Intersection

function testRectIntersection(divA, divB) {

  const rectA = divA.getBoundingClientRect();

  const rectB = divB.getBoundingClientRect();

```
 
```
```
  return (
```
```
    rectA.left < rectB.right &&
```
```
    rectA.right > rectB.left &&
```
```
    rectA.top < rectB.bottom &&
```
```
    rectA.bottom > rectB.top
```
```
  );
```
```
}
```
```
 
```

function rect(color, x, y, width = 100, height = 100) {

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

```
  Object.assign(el.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}px`,
```
```
    top: `${y}px`,
```
```
    width: `${width}px`,
```
```
    height: `${height}px`,
```
```
    background: color
```
```
  });
```
```
 
```
```
  return el;
```
```
}
```
```
 
```

const redBox = rect('red', 20, 20, 100, 100);

const mover = rect('green', 130, 20, 100, 100);

// with a `mousemove` only this won't be _great_ on mobile

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

```
  Object.assign(mover.style, {
```

    left: `${e.clientX - parseFloat(mover.style.width) / 2}px`,

    top: `${e.clientY - parseFloat(mover.style.height) / 2}px`

```
  });
```
```
 
```

  if (testRectIntersection(mover, redBox)) {

```
    redBox.style.background = 'blue';
```
```
  } else {
```
```
    redBox.style.background = 'red';
```
```
  }
```
```
});
```

Move your mouse so that the green rectangle touches the red.

This snippet shows how to test the if two non-rotated rectangles are intersecting. The only real part of the code that does this is:

```
rectA.left < rectB.right &&
```
```
rectA.right > rectB.left &&
```
```
rectA.top < rectB.bottom &&
```
```
rectA.bottom > rectB.top
```

With an understanding of how x/y coordinates work on the web, it can be fun to draw this out and figure out why it works on your own.

I’ve used getBoundingClientRect to obtain the rectangles of two divs here. In the rare case where you need to calculate many many intersections frequently, getBoundingClientRect should be avoided if possible as it can get slow for a variety of reasons. The alternative to getBoundingClientRect is to keep track of all the rectangle coordinate and size information yourself.

August 23, 2021

// css // dom // graphics // javascript // math // tricks

Line to Line Intersection

// line to line intersection https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection

function lineIntersection(p1, p2, p3, p4) {

```
  let ip = { x: 0, y: 0 };
```

  // rare case where I use `_` in a non-constant variable name

  // to make this easy to read to with the wikipedia info

```
  const x4_x3 = p4.x - p3.x;
```
```
  const y4_y3 = p4.y - p3.y;
```
```
  const x2_x1 = p2.x - p1.x;
```
```
  const y2_y1 = p2.y - p1.y;
```
```
  const x1_x3 = p1.x - p3.x;
```
```
  const y1_y3 = p1.y - p3.y;
```
```
  let nx, ny, dn;
```
```
 
```
```
  nx = x4_x3 * y1_y3 - y4_y3 * x1_x3;
```
```
  ny = x2_x1 * y1_y3 - y2_y1 * x1_x3;
```
```
  dn = y4_y3 * x2_x1 - x4_x3 * y2_y1;
```
```
 
```
```
  nx /= dn;
```
```
  ny /= dn;
```
```
 
```
```
  // has intersection
```

  if (nx >= 0 && nx <= 1 && ny >= 0 && ny <= 1) {

```
    ny = p1.y + nx * y2_y1;
```
```
    nx = p1.x + nx * x2_x1;
```
```
    ip.x = nx;
```
```
    ip.y = ny;
```
```
  } else {
```
```
    // no intersection
```
```
    ip = null;
```
```
  }
```
```
  return ip;
```
```
}
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div'));
```
```
 
```

// hard coding line values for simplicity and ease of understanding

```
el.innerHTML = `
```

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

    <path id='path' d="M 10 10 L 300 300 M 100 10 L 160 320" stroke="black" fill='none' vector-effect="non-scaling-stroke"/>

    <rect id="intersecton" x="0" y="0" width="10" height="10" fill="red" />

```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
  </style>
```
```
`;
```
```
 
```
```
const loc = lineIntersection(
```
```
  {x: 10, y: 10}, {x: 300, y:300},
```
```
  {x: 100, y: 10}, {x: 160, y:320}
```
```
);
```
```
 
```

// subtract half the size of the rect from both axis to center it

intersecton.x.baseVal.value = loc.x - 5;

```
 
```

// @NOTE: using the `id` global `window.intersection`

// is just good for demos - little risky for real stuff

// since it lends itself to easy collision

window.intersecton.y.baseVal.value = loc.y - 5;

Line to line intersection rendered with SVG.

August 20, 2021

// graphics // javascript // math // matrix // svg // tricks

Mini Markdown Parser

```
function mark(str) {
```
```
  const lines = str.split`\n`;
```
```
  let wasLi;
```
```
 
```

  for (let i = 0; i < lines.length; i++) {

```
    const curr = lines[i];
```
```
    const line = curr.trim();
```

    const hdr = line.split`#`.length - 1;

```
 
```
```
    if (line === '') { 
```
```
      lines[i] = '<br>';
```
```
    } else if (hdr > 0) {
```

      lines[i] = `<h${hdr} style="margin-bottom:0">

        ${curr.replace(/#/g, '')}</h${hdr}>`;

```
    } else if (line === '***') {
```
```
      lines[i] = '<hr>';
```
```
    } else if (line.startsWith('- ')) {
```

      lines[i] = `${!wasLi ? '<ul>' : ''}

        <li>${curr.replace(/-\s+/, '')}</li>`;

```
      wasLi = true;
```
```
    } else if (wasLi) {
```
```
      lines[i - 1] += '</ul>\n';
```
```
      wasLi = false;
```
```
    }
```
```
  }
```
```
 
```
```
  return lines.join`\n`
```

    .replace(/\*\*(.+)\*\*/gm, '<b>$1</b>')

```
    .replace(/_(.+)_/gm, '<i>$1</i>')
```

    .replace(/~~(.+)~~/gm, '<strike>$1</strike>')

    .replace(/`(.+)`/gm, '<code>$1</code>');

```
}
```
```
 
```
```
// try it out
```
```
 
```

const md = document.body.appendChild(document.createElement('div'));

```
md.style.fontFamily = 'sans-serif';
```
```
md.innerHTML = `# Mini Markdown Subset
```
```
 
```
```
This is a subset of markdown stuff
```
```
 
```
```
## It includes
```
```
 
```
```
- headers
```
```
- **bold styles**
```

- _italic styles, <br> multiline fine..._

```
- \`code style\`
```
```
 
```

Other than ~~strikethrough~~ that is pretty much it... oh and **hr** tags

```
***
```
```
***
```

_here is some italic text with some bold text **nested** <br>within it etc..._

```
`;
```
```
md.innerHTML = mark(md.innerHTML);
```

This code takes a string and formats a few parts of it with markdown syntax. This only handles a small subset of actual markdown.

I was thinking about markdown in code comments last night as I was working on a forthcoming snippet.zone github repo. Anyway, I decided to speed-code the main things I find myself using in markdown so that maybe I can do markdown formatted comments at some point…

August 19, 2021

// javascript // regex // strings // tricks

Random Negative or Positive

```
Math.round(Math.random()) * 2 - 1;
```

Randomly generate either -1 or 1. There are many ways to do this.

August 18, 2021

// javascript // math // tricks

Older Posts

Newer Posts

Range Slider and Progress Bar

Rectangle Intersection

Line to Line Intersection

Mini Markdown Parser

Random Negative or Positive

Recent

Archive