Snippet Zone

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

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

Make Math Global

Object.getOwnPropertyNames(Math).forEach(i => window[i] = Math[i]);

```
 
```
```
// or with map, just to be shorter
```

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

```
 
```
```
// if this points to window
```

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

```
 
```

// or using the deprecated "with" statement

```
with (Math) {
```
```
  console.log(PI, E, SQRT2, cos(1));
```
```
}
```

While not very useful, I sometimes like to make the entire Math object global on the window – just when speed coding and playing around.

August 15, 2021

// codegolf // javascript // math // tricks

SVG Relative Touch/Mouse Events

```
const hasTouch =
```

  navigator.maxTouchPoints != null && navigator.maxTouchPoints > 0;

```
 
```

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

```
 
```
```
el.innerHTML = `
```

  <svg id="mainSvg" width="100%" height="100%" viewBox="0 0 800 800">

    <g transform="translate(100, 100) scale(0.8, 0.8) rotate(25, 400, 400)">

      <rect x="0" y="0" width="800" height="800" fill="#ccc" stroke="none"/>

      <text x="10" y="30" font-size="30px">click/tap the box</text>

```
    </g>
```
```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      height: 100%;
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
 
```
```
    svg {
```
```
      overflow: hidden;
```
```
    }
```
```
  </style>
```
```
`;
```
```
function createSvg(type) {
```

  return document.createElementNS('http://www.w3.org/2000/svg', type);

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

// mouse or touch location is always relative to the svg

// any css transformations on the svg are only accounted for in

```
// Chrome unfortunately
```
```
function svgTouch(e, svgEl) {
```
```
  const touches = e.touches;
```
```
  let locX, locY;
```

  if (touches != null && touches.length > 0) {

```
    locX = touches[0].clientX;
```
```
    locY = touches[0].clientY;
```
```
  } else {
```
```
    locX = e.clientX;
```
```
    locY = e.clientY;
```
```
  }
```
```
 
```
```
  const pt = svgEl.createSVGPoint();
```
```
  pt.x = locX;
```
```
  pt.y = locY;
```
```
 
```

  const newPnt = pt.matrixTransform(svgEl.getScreenCTM().inverse());

  return { locX: newPnt.x, locY: newPnt.y };

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

document.addEventListener(hasTouch ? 'touchstart' : 'mousedown', e => {

```
  // global id `mainSvg` :P
```

  const { locX, locY } = svgTouch(e, mainSvg);

```
 
```
```
  const circle = createSvg('circle');
```
```
  circle.cx.baseVal.value = locX;
```
```
  circle.cy.baseVal.value = locY;
```
```
  circle.r.baseVal.value = 20;
```
```
  circle.style.fill = 'blue';
```
```
 
```
```
  mainSvg.appendChild(circle);
```
```
});
```

This snippet shows how to get relative mouse/touch coordinates within an SVG element. The main trick here is on line 50… pt.matrixTransform(svgEl.getScreenCTM().inverse()); – we get the inverse transformation matrix of the “mainSvg” node and transform the mouse/touch coordinates by it.

Beware, when this was posted, as noted in the comments – CSS transforms on the SVG element or any of its parents won’t be accounted for in the `getScreenCTM` call in any browsers other than Chrome. There is an open Firefox issue for this I believe…

August 14, 2021

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

Quick Touch Events 2 (easing)

```
// no scrolling on mobile
```

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

```
  passive: false
```
```
});
```
```
 
```
```
const hasTouch =
```

  navigator.maxTouchPoints != null && navigator.maxTouchPoints > 0;

// looking forward to `navigator?.maxTouchPoints > 0`

```
// being better supported
```
```
 
```
```
function touchify(e) {
```
```
  const touch = [];
```
```
  touch.x = touch.y = 0;
```
```
 
```

  if (e.touches != null && e.touches.length > 0) {

```
    touch.x = e.touches[0].clientX;
```
```
    touch.y = e.touches[0].clientY;
```

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

```
      touch[i] = e.touches[i];
```
```
    }
```
```
  } else {
```
```
    touch.x = e.clientX;
```
```
    touch.y = e.clientY;
```

    touch[0] = { clientX: e.clientX, clientY: e.clientY };

```
  }
```
```
  return touch;
```
```
}
```
```
 
```
```
let moveOrTouchMove;
```
```
 
```
```
if (hasTouch) {
```
```
  moveOrTouchMove = 'touchmove';
```
```
} else {
```
```
  moveOrTouchMove = 'mousemove';
```
```
}
```
```
 
```
```
function dot(x, y, radius, color) {
```

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

```
  const size = `${radius * 2}px`;
```
```
  Object.assign(el.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}px`,
```
```
    top: `${y}px`,
```
```
    width: size,
```
```
    height: size,
```

    transform: `translate(${-radius}px, ${-radius}px)`,

```
    borderRadius: '50%',
```
```
    background: color
```
```
  });
```
```
  el.classList.add('dot');
```
```
  document.body.appendChild(el);
```
```
  return el;
```
```
}
```
```
 
```
```
let dotX = 100,
```
```
  dotY = 100,
```
```
  touchX = 200,
```
```
  touchY = 150,
```
```
  damp = 12,
```
```
  dotEl = dot(dotX, dotY, 20, 'red');
```
```
 
```

document.addEventListener(moveOrTouchMove, e => {

```
  const { x, y } = touchify(e);
```
```
  touchX = x;
```
```
  touchY = y;
```
```
});
```
```
 
```
```
function loop() {
```
```
  dotX += (touchX - dotX) / damp;
```
```
  dotY += (touchY - dotY) / damp;
```
```
  Object.assign(dotEl.style, {
```
```
    left: `${dotX}px`,
```
```
    top: `${dotY}px`
```
```
  });
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Move your mouse on desktop or your finger on mobile – watch the red dot follow…

This is a simpler version of some of the things used in yesterdays post – just a quick way to normalize touch events – just one of many ways to do this – for simple stuff this is my goto.

If you want to try it out on its own page – take a look here (specifically good for trying it on mobile).

You’ll probably want a to use a meta tag like this – for the full effect.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

August 13, 2021

// animation // dom // graphics // javascript // math // scrolling // touchEvents // tricks

Older Posts

Newer Posts

Line to Line Intersection

Random Negative or Positive

Make Math Global

SVG Relative Touch/Mouse Events

Quick Touch Events 2 (easing)

Recent

Archive