Snippet Zone

Mini Markdown with Lists

  const isLi = val => val.match(/(^\s+)?- /)

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

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

```
    let 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 (isLi(curr)) {
```

      depth = curr.split('-')[0].length + 1;

```
 
```
```
      lines[i] = '';
```
```
      if (depth < lastDepth) {
```

        const diff = (lastDepth - depth) / 2

```
 
```

        lines[i] += '</ul>'.repeat(diff);

```
        lastDepth = depth 
```
```
      }
```
```
 
```

      lines[i] += `${depth > lastDepth ? '<ul>' : ''}

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

```
 
```
```
      lastDepth = depth;
```
```
 
```
```
      wasLi = true;
```
```
    } else if (wasLi) {
```

      lines[i - 1] = '</ul>\n'.repeat(lastDepth)

```
      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 = `
```
```
#Snippet Zone
```
```
 
```

This snippet renders a subset of markdown.

```
 
```
```
- **bold** and _italic text_
```
```
- lists 
```
```
  - this particulate
```
```
    - snippet can render 
```
```
    - nested
```
```
  - lists
```
```
 
```
```
- _**~~strikethrough text~~**_
```
```
 
```

In a real project you will probably want to use

something more complete like the great <a href="https://github.com/markedjs/marked" target="blank" rel="noopener">marked.js</a> library.

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

This snippet renders a small subset of markdown. This is the same as a post from the other day with the addition of support for nested lists.

August 21, 2021

// javascript // regex // strings

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

Save Large Canvas

// https://stackoverflow.com/questions/38781968/problems-downloading-big-filemax-15-mb-on-google-chrome

```
function dataUriToBlob(dataURI) {
```

  const binStr = atob(dataURI.split(',')[1]);

```
  const len = binStr.length;
```
```
  const arr = new Uint8Array(len);
```

  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

```
  for (let i = 0; i < len; i++) {
```
```
    arr[i] = binStr.charCodeAt(i);
```
```
  }
```
```
 
```
```
  const blob = new Blob([arr], {
```
```
    type: mimeString
```
```
  });
```
```
 
```
```
  return URL.createObjectURL(blob);
```
```
}
```
```
 
```

const save = document.createElement('a');

```
save.innerText = 'save this big image';
```
```
document.body.appendChild(save);
```
```
 
```

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

```
const c = canvas.getContext('2d');
```
```
 
```
```
canvas.width = window.innerWidth * 4;
```
```
canvas.height = window.innerHeight * 4;
```
```
canvas.style.transformOrigin = '0 0';
```
```
canvas.style.transform = `scale(0.14)`;
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black';
```

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

```
 
```

const size = Math.max(window.innerWidth, window.innerHeight);

```
 
```
```
// draw some rectangles
```

c.globalCompositeOperation = 'difference'

```
for (let i = 0; i < 100; i++) {
```

  const angle = Math.random() * 180 + 180;

  const color = `hsl(${angle}deg, 50%, 50%)`;

```
  c.fillStyle = color;
```

  const width = Math.random() * size + 100;

  const height = Math.random() * size + 100;

  const x = Math.random() * canvas.width - width / 2;

  const y = Math.random() * canvas.height - height / 2;

```
  c.fillRect(
```
```
    x, 
```
```
    y, 
```
```
    width, 
```
```
    height);
```
```
}
```
```
 
```
```
save.download = 'big-image';
```

save.href = dataUriToBlob(canvas.toDataURL());

Weirdly if you try to save a massive data URI to a file (> 15mb) it will just fail. In order to do this properly, you need to convert to a blob first and then save. I encountered this at some point and learned of the solution from user doppelgreener over at stack overflow. Take a look at the post here.

August 17, 2021

// blob // canvas // graphics // javascript // stackoverflow // tricks

Older Posts

Newer Posts

Mini Markdown with Lists

Line to Line Intersection

Mini Markdown Parser

Random Negative or Positive

Save Large Canvas

Recent

Archive