Snippet Zone

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

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

Older Posts

Newer Posts

Rectangle Intersection

Line to Line Intersection

Random Negative or Positive

Make Math Global

SVG Relative Touch/Mouse Events

Recent

Archive