Snippet Zone

Divide Rectangle Into Smaller Rectangles

const rand = num => ~~(Math.random() * num)

```
 
```
```
let rectNum = 2 + rand(10)
```
```
let rectCount = 0
```
```
 
```

document.body.appendChild(document.createElement('div')).innerText =

```
  'click anywhere to regenerate'
```
```
 
```
```
function reset() {
```

  ;[...document.querySelectorAll('.rect')].forEach(rect => rect.remove())

```
  rectNum = 2 + rand(10)
```
```
  rectCount = 0
```
```
  newRect(300, 300, 50, 50)
```
```
}
```
```
reset()
```
```
onpointerup = reset
```
```
 
```
```
function newRect(w, h, xp, yp) {
```

  const rect = document.body.appendChild(document.createElement('div'))

```
 
```
```
  rect.classList.add('rect')
```
```
  rectCount++
```
```
 
```
```
  Object.assign(rect.style, {
```
```
    position: 'absolute',
```
```
    left: `${xp}px`,
```
```
    top: `${yp}px`,
```
```
    width: `${w}px`,
```
```
    height: `${h}px`,
```
```
    outline: `1px solid black`,
```
```
  })
```
```
 
```
```
  const props = {
```
```
    x: xp,
```
```
    y: yp,
```
```
    height: h,
```
```
    width: w,
```
```
    seed: rand(3),
```
```
    divide() {
```

      const div = 2 + rand(5 * Math.random() * Math.random())

```
      if (rand(2) == rand(2)) {
```

        const newHeight = this.height / div

```
 
```

        newRect(this.width, this.height - newHeight, this.x, this.y)

        newRect(this.width, newHeight, this.x, this.y + this.height - newHeight)

```
      } else {
```
```
        const newWidth = w / div
```

        newRect(this.width - newWidth, this.height, this.x, this.y)

        newRect(newWidth, this.height, this.x + this.width - newWidth, this.y)

```
      }
```
```
      rect.remove()
```
```
    },
```
```
  }
```
```
  window.requestAnimationFrame(() => {
```
```
    if (rectCount < rectNum) {
```
```
      props.divide()
```
```
    } else {
```
```
      console.log('DONE!')
```
```
    }
```
```
  })
```
```
}
```

This snippet comes to mind from time to time – one easy way to divide a rectangle into smaller rectangles- I actually went back and looked it up as it was an answer to a student question from 2006. The original one was written in ActionScript 2. Have a look:

```
var wormNum:Number = 123;
```
```
var wormCount:Number = 0;
```
```
newWorm(400, 400, 0, 0);
```
```
this.onEnterFrame = function() {
```
```
	if (wormCount < wormNum) {
```
```
		for (var props:String in this) {
```
```
			if (this[props]._x != undefined) {
```
```
				this[props].divide();
```
```
			}
```
```
		}
```
```
	}
```
```
};
```
```
function newWorm(w, h, xp, yp) {
```

	var currWorm:MovieClip = this.createEmptyMovieClip("box"+wormCount, this.getNextHighestDepth());

```
	wormCount++;
```
```
	box(w, h, currWorm, random(0xFFFFFF));
```
```
	currWorm._x = xp;
```
```
	currWorm._y = yp;
```
```
	currWorm.seed = random(3);
```
```
	currWorm.divide = function() {
```

		var div = random(4)+(1+Math.random()*1);

```
		if (random(2) == random(2)) {
```
```
			// divide vertically
```
```
			var nh:Number = this._height/div;
```

			newWorm(this._width, this._height-nh, this._x, this._y);

			newWorm(this._width, nh, this._x, this._y+this._height-nh);

```
		} else {
```
```
			// divide horizonatlly
```
```
			var nw:Number = this._width/div;
```

			newWorm(this._width-nw, this._height, this._x, this._y);

			newWorm(nw, this._height, this._x+this._width-nw, this._y);

```
		}
```
```
		this.removeMovieClip();
```
```
	};
```
```
}
```

function box(w:Number, h:Number, mc:MovieClip, col:Number):Void {

```
	with (mc) {
```
```
		lineStyle(0, 0, 20);
```
```
		beginFill(col, 10);
```
```
		moveTo(0, 0);
```
```
		lineTo(w, 0);
```
```
		lineTo(w, h);
```
```
		lineTo(0, h);
```
```
		endFill();
```
```
	}
```
```
}
```

Don’t remember why I called them worms instead of rectangles, some AS2 types floating around…

December 28, 2022

// graphics // humor // javascript // math // oldschool // random // speedcoding

Little Grid

```
const NUM = 9
```
```
const col = 3
```
```
const size = 30
```
```
const pad = 10
```
```
const box = (x, y) => Object.assign(
```
```
  document.body.appendChild(
```
```
    document.createElement('div')
```
```
  ).style, {
```
```
    position: 'absolute',
```
```
    width: size + 'px', 
```
```
    height: size + 'px',
```
```
    top: y + 'px', 
```
```
    left: x + 'px',
```
```
    background: 'red'
```
```
})
```
```
 
```
```
const off = (size + pad)
```
```
for (let i = 0; i < NUM; i++) {
```
```
  const x = (i % col) * off
```
```
  const y = parseInt(i / col, 10) * off
```
```
  box(x, y)
```
```
}
```

June 12, 2022

// graphics // javascript // ui

Mutation Observer

// Select the node that will be observed for mutations

const targetNode = document.getElementById('some-id');

```
 
```

// Options for the observer (which mutations to observe)

const config = { attributes: true, childList: true, subtree: true };

```
 
```

// Callback function to execute when mutations are observed

const callback = function(mutationsList, observer) {

    // Use traditional 'for loops' for IE 11 (goodbye IE11!!!!)

    for(const mutation of mutationsList) {

        if (mutation.type === 'childList') {

            console.log('A child node has been added or removed.');

```
        }
```

        else if (mutation.type === 'attributes') {

            console.log('The ' + mutation.attributeName + ' attribute was modified.');

```
        }
```
```
    }
```
```
};
```
```
 
```

// Create an observer instance linked to the callback function

const observer = new MutationObserver(callback);

```
 
```

// Start observing the target node for configured mutations

```
observer.observe(targetNode, config);
```
```
 
```
```
// Later, you can stop observing
```
```
observer.disconnect();
```

This is pure gold if you haven’t used it… (from MDN)

April 24, 2022

// dom // events // graphics // html // javascript // ui

Decompose Matrix

const deltaTransformPoint = (matrix, point) => {

```
  return {
```

    x: point.x * matrix.a + point.y * matrix.c,

    y: point.x * matrix.b + point.y * matrix.d

```
  }
```
```
}
```
```
 
```
```
const decomposeMatrix = matrix => {
```

  let px = deltaTransformPoint(matrix, { x: 0, y: 1 })

  let py = deltaTransformPoint(matrix, { x: 1, y: 0 })

  let skewX = FROM_RADS * Math.atan2(px.y, px.x) - 90

  let skewY = FROM_RADS * Math.atan2(py.y, py.x)

```
 
```
```
  return {
```
```
    tx: matrix.e,
```
```
    ty: matrix.f,
```

    scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),

    scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),

```
    skewX: skewX,
```
```
    skewY: skewY,
```
```
    rotation: skewX
```
```
  }
```
```
}
```

Get the scale, translation, rotationa and skew values from a matrix.

Great stackoverflow answer from user dave

March 28, 2022

// graphics // math // matrix

Random Color Strings Not-Golfed

```
const { random, round } = Math
```
```
 
```
```
const TICK = 100
```
```
const CHUNKS_PER_TICK = 4
```
```
const minChunk = 3
```
```
const maxChunk = 10
```
```
const diffChunk = maxChunk - minChunk
```
```
 
```

const generateChance = .9 // 90% change of string generation

const spaceChance = .8 // 80% chance of space

const breakChance = .1 // 10% chance of line break

```
const numbersChance = .9
```
```
 
```

const randomChunk = () => round(random() * 0xff).toString(36)

  .replace(random() < numbersChance ? /[0-9]/g : '', '')

```
 
```
```
setInterval(() => {
```
```
 
```
```
  if (random() < generateChance) {
```
```
 
```

    Array(CHUNKS_PER_TICK).fill(0).forEach(() => {

```
 
```

      const stringLeng = round(minChunk + random() * diffChunk)

```
      let chunk = ''
```
```
 
```
```
      Array(stringLeng).fill(0)
```

        .forEach(() => chunk += randomChunk())

```
 
```

      const span = document.createElement('span')

```
      const hue = round(random() * 360)
```
```
 
```

      span.style.color = `hsl(${hue}, 30%, 50%)`

```
      document.body.appendChild(span)
```
```
      span.innerText = chunk
```
```
 
```
```
      if (random() < spaceChance) { 
```

        document.body.appendChild(document.createTextNode(' '))

```
      }
```
```
 
```
```
      if (random() < breakChance) {
```

        const br = document.createElement('br')

```
        document.body.appendChild(br)
```
```
      }
```
```
 
```
```
    })
```
```
  }
```
```
 
```

  scrollTo(0, document.body.scrollHeight)

```
}, TICK)
```
```
 
```
```
 
```

// just a lazy hack since snippet zone quick editor only supports js...

// normally this goes in a separate file... :D

```
document.body.innerHTML += `
```
```
<style>
```
```
body, html {
```
```
  background: black;
```
```
  font-family: Oswald, sans-serif;
```
```
  overflow-wrap: break-word;
```
```
  text-transform: uppercase;
```
```
  letter-spacing: 1;
```
```
}
```
```
 
```
```
br {
```
```
  height: 1em;
```
```
  display: block;
```
```
}
```
```
</style>
```
```
`
```

An expansion on a snippet from a few days ago inspired by a friends codepen fork…

March 14, 2022

// graphics // humor // javascript // strings

Older Posts

Newer Posts

Divide Rectangle Into Smaller Rectangles

Little Grid

Mutation Observer

Decompose Matrix

Random Color Strings Not-Golfed

Recent

Archive