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

Random Color Strings

```
R = Math.random
```
```
b = document.body
```

b.style = 'background: black; font-family: sans-serif; text-transform: uppercase; color: white;'

```
 
```
```
setInterval(_ => {
```
```
  if (R()<.9) {
```
```
    s = ''
```

    for(i=0;i<R() * 30 + 4;i++) s+=(~~(R() * 0xff)).toString(36)

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

```
 
```
```
    b.innerHTML += `
```

     <n style="color:hsl(${R()*360}, 30%, 50%)">${s}</n> `+(R()<.1?'<br>':'');

```
  }
```
```
}, 100)
```

Make some random strings and give them a random color… a friend of mine showed a work in progress forked codepen – so I created a golfed version/variation…

March 12, 2022

// codegolf // random // regex // speedcoding // strings

W3Schools Output Tag

```

```
```
<!DOCTYPE html>
```
```
<html>
```
```
<body>
```
```
 
```
```
<h1>The output element</h1>
```
```
 
```

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

```
<input type="range" id="a" value="50">
```

+<input type="number" id="b" value="25">

```
=<output name="x" for="a b"></output>
```
```
</form>
```
```
 
```

<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>

```
 
```
```
</body>
```
```
</html>
```

I like w3Schools.

This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…

March 11, 2022

// hacks // html // humor // speedcoding

Acronym Definition Generator

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
  <head>
```
```
    <meta charset="utf-8" />
```
```
    <title>Acro</title>
```
```
 
```

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

```
    <style>
```
```
 
```
```
      body {
```
```
        font-family: sans-serif;
```
```
        margin: 3em;
```
```
      }
```
```
 
```
```
      button {
```
```
        cursor: pointer;
```
```
        font-size: 1em;
```
```
        padding: .6em;
```
```
        margin-bottom: 2em;
```
```
      }
```
```
 
```
```
      h1 {
```
```
        font-size: 3em;
```
```
        text-decoration: underline;
```
```
      }
```
```
 
```
```
      hr {
```
```
        border: none;
```

        border-bottom: 1px dashed gray;

```
      }
```
```
 
```
```
      i {
```
```
        text-transform: lowercase;
```
```
      }
```
```
 
```
```
      #acro {
```
```
        position: relative;
```
```
        width: 100%;
```
```
        min-width: 350px;
```
```
        max-width: 700px;
```
```
        margin: 0 auto;
```
```
 
```
```
      }
```
```
 
```
```
      input[type=text] {
```
```
        padding: .5em;  
```
```
        margin-right: 1em;
```
```
        text-transform: uppercase;
```
```
      }
```
```
 
```
```
      #go {
```
```
        margin-right: .5em;  
```
```
      }
```
```
 
```
```
      #btn {
```
```
        float: right;  
```
```
      }
```
```
 
```
```
      .row {
```
```
        width: 100%;
```
```
        clear: both;
```
```
      }
```
```
      .uiBreak { display: none; }
```
```
 
```

      @media only screen and (max-width: 600px) {

```
        body {
```
```
          font-size: .8em;
```
```
          margin: 1em;
```
```
        }
```
```
 
```
```
      }
```
```
 
```

      @media only screen and (max-width: 400px) {

```
        .uiBreak { display: block; }
```
```
        #btn {
```
```
          float: left;
```
```
          display: block;
```
```
          clear: both;
```
```
        }
```
```
      }
```
```
 
```
```
    </style>
```
```
  </head>
```
```
  <body>
```
```
    <div id=acro>
```
```
      <h1>Acro</h1>
```
```
      <div>
```

        <input id=input type=text placeholder="enter acronym">

```
        <button id=go>go...</button>
```
```
        <br class=uiBreak>
```

        <button id=btn>generate random...</button>

```
      </div>
```
```
 
```
```
      <div id=acros></div>
```
```
    </div>
```
```
    <script>
```
```
(() => {
```
```
 
```
```
  const min = 3
```
```
  const max = 5
```
```
  const diff = max - min
```
```
 
```
```
  const { random } = Math
```
```
 
```
```
  const wordsByLetter = {}
```

  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split``

```
  let words;
```
```
 
```

  alphabet.forEach(let => wordsByLetter[let] = [])

```
 
```
```
  console.log('loading...')
```
```
 
```
```
  fetch('words.txt')
```
```
    .then(data => data.text())
```
```
    .then(text => {
```
```
      console.log('prepping...')
```
```
 
```
```
      words = text.split(/\s+/m).sort()
```
```
 
```
```
      const chunk = 500
```

      const ticks = ~~(words.length / chunk)

```
 
```
```
      let idx = 0
```
```
      let count = 0
```
```
 
```

      let interval = setInterval(() => {

```
        if (count === ticks) {
```
```
          start()
```
```
          clearInterval(interval)
```
```
          return
```
```
        }
```
```
 
```

        for (let i = 0; i < chunk; i++) {

```
          const word = words[idx]
```
```
          if (word[0]) {
```

            const firstLetter = word[0].toUpperCase()

            wordsByLetter[firstLetter]?.push(word)

```
          }
```
```
          idx++
```
```
        }
```
```
        count++
```
```
      }, 1)
```
```
    })
```
```
 
```
```
  function start() {
```
```
    console.log('starting...')
```
```
 
```
```
    const rando = _ => {
```

      const leng =  ~~(min + diff * random())

```
      let word = ''
```
```
      for (let i = 0; i < leng; i++) {
```

        word += alphabet[~~(random() * alphabet.length)]

```
      }
```
```
      return word
```
```
    }
```
```
 
```
```
    const gen = custom => {
```
```
      if (!custom) return
```
```
      custom = custom.toUpperCase()
```
```
      const leng = custom.length
```
```
      const def = []
```
```
 
```
```
      for (let i = 0; i < leng; i++) {
```

        const sourceWords = wordsByLetter[custom[i]]

        def[i] = sourceWords[~~(random() * sourceWords.length)]

```
      }
```

      const div = document.createElement`div`

```
      div.className = 'row'
```
```
      div.innerHTML = `
```
```
        <h2>${custom}</h2>
```
```
        <i>${def.join` `}</i>
```
```
        <hr>
```
```
      `
```
```
      acros.prepend(div)
```
```
    }
```
```
 
```
```
    btn.onclick = () => {
```
```
      gen(rando())
```
```
    }
```
```
 
```

    go.onclick = () => gen(input.value);

```
    document.onkeydown = e => {
```

      if (e.key === 'Enter') gen(input.value);

```
    }
```
```
 
```
```
  }
```
```
})()
```
```
    </script>
```
```
  </body>
```
```
</html>
```

A friend of mine had this idea the other night so I coded it up…

Update: I forgot to mention, this uses this list of words from google…

February 28, 2022

// humor // javascript // speedcoding // strings

Step Between Two Numbers

const stepBetweenA = (min, max, steps) =>

  Array(steps).fill(0).reduce((prev, curr, i) => {

    prev.push(min + ((max - min) / (steps - 1)) * i)

```
    return prev
```
```
  }, [])
```
```
 
```
```
 
```

const stepBetweenB = (min, max, steps) => {

```
  steps -= 1
```
```
  const diff = (max - min) / steps
```
```
  const result = [min]
```
```
  for (let i = 0; i < steps; i++) {
```
```
    result.push(min += diff)
```
```
  }
```
```
  return result
```
```
}
```
```
 
```

console.log('a', stepBetweenA(10, 110, 4))

console.log('b', stepBetweenB(10, 110, 4))

```
 
```
```
const ITER = 10000
```
```
 
```
```
console.time('a')
```
```
for (let i = 0; i < ITER; i++) {
```
```
  stepBetweenA(10, 110, 4)
```
```
}
```
```
console.timeEnd('a')
```
```
 
```
```
  console.time('b')
```
```
for (let i = 0; i < ITER; i++) {
```
```
  stepBetweenB(10, 110, 4)
```
```
}
```
```
console.timeEnd('b')
```

Two messy implementations for stepping between two numbers… I am not sure it’s possible to make console.time work well with the snippet zone quick editor – so if you want to see the times… open your console.

February 5, 2022

// arrays // javascript // math // speedcoding

Older Posts

Newer Posts

Divide Rectangle Into Smaller Rectangles

Random Color Strings

W3Schools Output Tag

Acronym Definition Generator

Step Between Two Numbers

Recent

Archive