Snippet Zone

Concatenative JavaScript

```
const vars = {}
```
```
 
```
```
const as = s => v => vars[s] = v
```
```
 
```
```
const def = s => v => {
```
```
  vars[s] = v
```
```
}
```
```
 
```
```
const set = (last, prop, val) => {
```
```
  last[prop] = val
```
```
}
```
```
 
```
```
const put = (last, prop, val) => {
```
```
  last[prop] = val
```
```
  return last
```
```
}
```
```
 
```
```
const of = k => run.last[k]
```
```
const $ = k => () => vars[k]
```
```
 
```
```
const run = (prog, log) => {
```
```
  run.stack = []
```
```
  let curr
```

  for (let i = 0; i < prog.length; i++) {

```
    let val = prog[i]
```
```
    if (val != null && val === $) { 
```
```
      run.stack.push(val())
```

    } else if (typeof val === 'function') {

```
      let ctx = null
```
```
      if (document.body[val.name]) { 
```
```
        ctx = document.body 
```
```
        val = val.bind(ctx)
```
```
      } else if (document[val.name]) { 
```
```
        ctx = document
```
```
        val = val.bind(ctx)
```
```
      } 
```
```
 
```
```
      if (log) console.log('exec', 
```

        val.name == 'bound ' ? '\u03BB' : val.name, run.stack)

```
 
```
```
      curr = val.apply(ctx, run.stack)
```
```
      if (curr != run.stack) { 
```

        run.stack = curr != null ? [curr] : []

```
        if (typeof curr === 'object') {
```
```
          run.last = curr
```
```
        }
```
```
      }
```
```
    } else {
```

      if (val != null) run.stack.push(val)

```
    }
```
```
  }
```
```
}
```
```
 
```
```
const showStack = () => {
```
```
  console.log('- stack:', run.stack)
```

  console.log('  -> last object', run.last)

```
  return run.stack
```
```
}
```
```
 
```
```
const _ = new Proxy({}, { 
```
```
  get: (o, key) => (() => (...a) => 
```
```
    run.last[key].apply(run.last, a)
```
```
  )()
```
```
})
```
```
 
```
```
// try it out
```
```
 
```
```
run( 
```
```
  [ 'div', 
```
```
    document.createElement, 
```
```
    document.body.appendChild, 
```
```
    as`myDiv`,
```

    'innerHTML', 'mini <b>concatenative</b>', set,

```
    'style', of, 'color', 'green', set,
```
```
 
```

    'just logging the element', $`myDiv`, console.log,

```
 
```
```
    'canvas', document.createElement, 
```
```
    document.body.appendChild, 
```
```
    'width', 500, put,
```
```
    'height', 500, put,
```
```
    def`myCanvas`,
```
```
 
```
```
    '2d',
```
```
    _.getContext,
```
```
    'fillStyle', 'red', set,
```
```
    100, 30, _.translate,
```
```
    0, 0, 10, 100, _.fillRect,
```
```
    20, 0, 10, 100, _.fillRect,
```
```
    .2, _.rotate,
```
```
    -30, 25, 100, 10, _.fillRect,
```
```
    -20, 55, 100, 10, _.fillRect,
```
```
 
```
```
    {}, 
```
```
    'name', 'zevan', put,
```
```
    'age', 82, put,
```
```
    JSON.stringify,
```
```
    as`person`,
```
```
 
```
```
    showStack
```
```
  ]
```
```
)
```
```
console.log(vars);
```

I recently spent some time reading about and playing with the FORTH language. I keep finding myself creating weird vaguely FORTH inspired snippets now… This one processes an array that’s in a concatenative format like this:


[ 'hello world', Date.now(), console.log ]

Arguments are collected on a stack and passed to a function when a function is hit in the array. There are some odd helper functions for setting properties, setting nested properties, running functions with a specific context etc…

Here is GPT4’s mostly correct explanation of what it does

This is a rather unusual piece of JavaScript code that creates a simple “programming language” based on the concept of a stack machine, and runs a “program” in this language. It resembles some sort of DSL (domain-specific language) or script-like construct.

Here are what the main components do:

vars: This is a dictionary that stores variables defined in the program.

as: This is a function that takes a string s and returns a function that takes a value v, storing v in vars under the key s.

def: Similar to as, it defines a variable in vars.

set: This function is used to set the property of an object. It takes the object last, the property name prop, and the value val, and assigns val to the property prop of the object last.

put: Similar to set, it sets the property of an object and returns the updated object.

of: This function gets the property with name k of the last object returned by the program.

$: This function is a getter for variables in vars.

run: This is the main function that runs the program. The program is an array of actions, where an action can be a function, an object with a name of ‘get’ (which pushes the result of calling the function onto the stack), or a value (which is pushed onto the stack).

showStack: This function logs the current state of the stack and the last object returned.

_: This creates a new Proxy object that allows arbitrary methods to be called on the last object returned by the program.

The run function is then called with a list of actions to perform. The actions include creating a div and canvas element, appending them to the body of the document, setting their properties, and drawing on the canvas. It also creates an object with a name and age, converts it to JSON, and stores it in a variable. Finally, it shows the state of the stack and logs all the variables.

July 23, 2023

// arrays // hacks // humor // javascript // meta // obfuscation // oldschool // proxies // speed-coded // speedcoding

Validate Anagram

```
function normalizeString(word) {
```
```
  word = word.toLowerCase()
```

  const result = normalizeString.memo[word]

```
  if (result) return result
```
```
  return normalizeString.memo[word] =
```
```
    [...word.replace(/\s/g, '')]
```
```
      .sort() + ''
```
```
}
```
```
normalizeString.memo = {}
```
```
 
```
```
const checkAnagram = (word, source) =>
```

  normalizeString(word) === normalizeString(source)

```
 
```
```
 
```
```
// try it out 
```
```
 
```
```
const target = 'adorn hair'
```
```
const anagrams = [
```
```
  'hoard rain',
```
```
  'hair radon',
```
```
  'hadron air',
```
```
  'hairdo ran',
```
```
  'radian rho',
```
```
  'au revoir fail'
```
```
];
```
```
 
```
```
anagrams.forEach(anigram => { 
```

  console.log(anigram, '=', checkAnagram(anigram, target))

```
})
```

Check if two strings are anagrams of one another.

July 21, 2023

// javascript // speed-coded // speedcoding // strings // tricks

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

Older Posts

Newer Posts

Concatenative JavaScript

Here is GPT4’s mostly correct explanation of what it does

Validate Anagram

Little Trading Program

Divide Rectangle Into Smaller Rectangles

Random Color Strings

Recent

Archive