function isColor(col) {

  const cache = isColor[col]

  if (cache != null) {

    console.log('- reading cache')

    return cache

  }

  isColor.el.style = ''

  isColor.el.style.color = col

  return isColor[col] = !!isColor.el.style.color

}

isColor.el = document.createElement('div')

console.log('is "red" a color?', isColor('red'))

console.log('from the cache: ', isColor('red'))

console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))

console.log('is "#0f0" a color?', isColor('#0f0'))

console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))

console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))

console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',

  isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))

console.log('is "snippetZone" ?', isColor('snippetZone'))

// from http://math.stackexchange.com/questions/69099/equation-of-a-rectangle

const rect = (px, py, rx, ry, t) => ({

  x: px + rx + rx * (Math.abs(Math.cos(t)) * Math.cos(t) + Math.abs(Math.sin(t)) * Math.sin(t)),

  y: py + ry + ry * (Math.abs(Math.cos(t)) * Math.cos(t) - Math.abs(Math.sin(t)) * Math.sin(t))

})

const SIZE = 200

const c = document.body.appendChild(

  Object.assign(document.createElement`canvas`,

    { width: SIZE, height: SIZE }

  )).getContext`2d`

c.fillStyle = 'black'

c.fillRect(0, 0, SIZE, SIZE)

let t = 0

setInterval(() => {

  const { x, y } = rect(20, 20, 60, 70, t)

  c.fillStyle = 'rgba(255, 0, 0, .1)'

  c.fillRect(x, y, 10, 10)

  t += .05

}, 16)

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!')

    }

  })

}

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();

	}

}

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)

}

// 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();