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

Replace with “O”

```
const txt = document.body.appendChild(
```
```
  document.createElement('textarea')
```
```
);
```
```
 
```
```
document.body.style.margin = 0;
```
```
Object.assign(txt.style, {
```
```
  position: 'relative',
```
```
  width: '90%',
```
```
  fontSize: '1.5em',
```
```
  borderRadius: 0,
```
```
  padding: '1em',
```
```
  outline: 'none'
```
```
});
```

txt.setAttribute('placeholder', 'enter some text');

```
 
```

const result = document.body.appendChild(

```
  document.createElement('div')
```
```
);
```
```
 
```
```
Object.assign(result.style, {
```
```
  padding: '1em', 
```
```
  fontSize: '2em'
```
```
});
```
```
 
```
```
txt.addEventListener('input', () => { 
```

  result.innerHTML = txt.value.replace(/[aeiou]/gi, 'o');

```
});
```

This snippet takes input into a textfield and replaces all vowels with the letter “o”. I saw a meme that did something like this with musical instruments piano = poono, guitar = gootor etc..

August 22, 2021

// css // dom // regex // strings

Make a Debugging Dot

```
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;
```
```
}
```
```
 
```
```
dot(100, 100, 10, 'red');
```
```
dot(200, 100, 5, 'blue');
```
```
 
```
```
for (let i = 0; i < 20; i++) {
```

  dot(20 + i * 12, 200, 5, `hsl(${i * 10}deg, 60%, 50%)`)

```
}
```

Draw a dot – good for visualizing things when doing animation and positioning logic.

August 1, 2021

// css // graphics // javascript // tricks

createElement and Object.assign

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

```
Object.assign(el.style, {
```
```
  position: 'absolute',
```
```
  left: '100px',
```
```
  top: '100px',
```
```
  width: '30px',
```
```
  height: '30px',
```

  background: 'linear-gradient(black, red)',

```
  transform: 'rotate(15deg)'
```
```
});
```
```
document.body.appendChild(el);
```

Fast and easy way to set many styles on a DOM node. Click/tap the “Try it out” button to play around with the code.

July 25, 2021

// css // dom // tricks

Newer Posts

Rectangle Intersection

Replace with “O”

Make a Debugging Dot

createElement and Object.assign

Recent

Archive