Snippet Zone

Little Trading Program

```
let id = 0;
```
```
function person(startValue = 100) {
```
```
  const props = {
```
```
    id: id++, 
```
```
    el: document.body.appendChild(
```
```
      Object.assign(
```
```
        document.createElement`b`, { 
```
```
          innerText: startValue,
```
```
          style: 'padding: 1em'
```
```
      })
```
```
    ),
```
```
    value: startValue,
```
```
    trade(other) {
```
```
      if (props.value <= 0) return;
```
```
      other.value += 1;
```
```
      props.value -= 1;
```
```
      other.el.innerText = other.value
```
```
      props.el.innerText = props.value
```
```
    }
```
```
  }
```
```
  return props
```
```
}
```
```
 
```
```
 
```
```
const NUM = 4
```

const people = Array.from({ length: NUM }, person)

```
 
```
```
setInterval(() => {
```

  const a = people[~~(Math.random() * people.length)]

  const b = people[~~(Math.random() * people.length)]

```
 
```
```
  if (a.id != b.id) a.trade(b)
```
```
}, 1)
```

4 “people” randomly trade…

I asked Chat GPT to describe this… funny response…

The trading program you provided is essentially an example of a random walk or “drunkard’s walk” problem. In such problems, each individual (in this case, the ‘people’) make random moves (in this case, trades), and we observe the resulting dynamics of the system as a whole. In this particular case, each trade involves one individual giving one unit of value to another individual. Since each trade is random, there’s a possibility that over time, all the value might get concentrated in one individual. This isn’t guaranteed, but given enough time, it’s likely. You could compare it to the idea that given enough time, a group of monkeys randomly typing on a keyboard would eventually type out the complete works of Shakespeare. It’s also worth noting that this concentration of value becomes more likely because the individuals with no value left cannot trade anymore, so they are essentially removed from the trading pool. This progressively reduces the number of individuals that can gain value and increases the probability of the remaining individuals gaining more value. This is a simple model of economic transactions and it illustrates how wealth can concentrate over time even if all the transactions are fair and random. Of course, it’s a very simplified model, and real-world economics are much more complex.

July 18, 2023

// arrays // humor // javascript // math // speed-coded // speedcoding

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

Older Posts

Newer Posts

Little Trading Program

Divide Rectangle Into Smaller Rectangles

Random Color Strings

W3Schools Output Tag

Acronym Definition Generator

Recent

Archive