Snippet Zone

Em3w parensordot

```
const vals = {
```
```
  E: 0, M: 90, '3': 180, W: 270
```
```
}
```
```
 
```
```
// const byDeg = {
```

//   0: 'E', 90: 'M', 180: '3', 270: 'W'

```
// }
```

const byDeg = Object.keys(vals).reduce((acc, key) => {

```
  acc[vals[key]] = key;
```
```
  return acc;
```
```
}, {});
```
```
 
```
```
 
```
```
const ops = {
```
```
  ')': 90, '(' : -90, '|': 180
```
```
}
```
```
 
```
```
function rotToSym(v) {
```
```
  if (v < 0) v += 360;
```
```
  const deg = Math.abs(v % 360);
```
```
  return byDeg[deg]
```
```
}
```
```
 
```
```
function op(char, op) {
```

  if (char === 'M' && op === '|') return 'M'

  if (char === 'W' && op === '|') return 'W'

```
  let v = vals[char]
```
```
  v += ops[op]
```
```
  return rotToSym(v)
```
```
}
```
```
 
```
```
 
```
```
function emw(prog) {
```
```
  prog = [...prog]
```
```
 
```
```
  let chars = []
```
```
  let res = []
```

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

```
    let char = prog[i]
```
```
    if (vals[char] != null) {
```
```
      chars.push(char)
```
```
    } else if (ops[char]) {
```

      chars = chars.map(v => op(v, char))

    } else if (char === '.' && chars.length > 0) {

      const num = chars.map(v => vals[v])

```
        .reduce((a, b) => a + b, 0);
```
```
      chars = [rotToSym(num)]
```
```
    }
```
```
  }
```
```
  return chars.join``
```
```
}
```
```
 
```
```
function expr(prog) {
```
```
  const orig = prog;
```
```
  prog = prog.split(/\s/)
```

  return orig + ' = ' + prog.map(emw).join` `

```
}
```
```
 
```
```
document.body.appendChild(
```
```
  Object.assign(
```
```
    document.createElement`pre`, {
```
```
      innerHTML: 
```
```
`
```
```
Em3w parensordot 
```
```
 
```
```
// rotate 90 clockwise
```
```
${expr('EEE)')}
```
```
 
```
```
// rotate -90 clockwise
```
```
${expr('W(')}
```
```
${expr('W((')}
```
```
 
```
```
// mirror
```
```
${expr('E|')}
```
```
 
```
```
// mirror
```
```
${expr('EM|')}
```
```
 
```
```
${expr('WW3) MM) EEEM).')}
```
```
 
```
```
// sum rotations
```
```
${expr('MMM.')}
```
```
 
```
```
${expr(
```
```
`E) E( E)) EEE))) E)))) MM33).`)}
```
```
`}
```
```
  )
```
```
)
```

Fun thing I wanted to make for awhile… definitely going to do some doodles of this in my sketchbook…

Code description from GPT4 because I’m too lazy to write one…

This code is implementing a form of symbolic computation using a transformational language. This language has four primary symbols: “E”, “M”, “3”, and “W”. Each of these symbols is associated with a specific angle: 0, 90, 180, and 270 degrees, respectively.

There are also special symbols, which act as operators that perform certain transformations on the primary symbols:

“)”: Represents a rotation 90 degrees clockwise.

“(“: Represents a rotation 90 degrees counter-clockwise.

“|”: Represents a mirror operation, which reverses the direction. However, “M” and “W” are unaffected by this operation.

“.”: This operator sums up all previous primary symbols (by their respective degree values), resulting in a new symbol. The degree value of the new symbol is the sum of the previous degrees modulo 360.

The function emw(prog) interprets a string prog as a sequence of symbols and operations. It reads each character in the string and based on whether it’s a primary symbol, operator, or a “.”, it either adds the symbol to an array or performs an operation on the existing symbols in the array.

The expr(prog) function splits the input string prog into space-separated substrings. It interprets each substring as a sequence in the transformational language, using the emw function. It then joins the results together with a space and prepends the original input and an equals sign to give a string representation of the transformations.

The final section of the code generates a series of examples of expressions in this language, evaluates them using the expr function, and adds the results to the HTML body of a webpage in a formatted manner. This gives the user a way to see the transformations in action.

July 24, 2023

// humor // javascript // obfuscation // speed-coded // speedcoding // strings

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

Obfuscated Pseudo-typed Globals

```
number:age = 33;
```
```
number:height = 6;
```
```
string:name = 'joe';
```
```
object:person = { name, age, height };
```
```
console.log(person);
```

WARNING: do not use this

This one is bad enough that I feel the need to put a warning. This is some weird obfuscation… I’ve put labels before global variable definitions so they look like type declarations.

It’s funny, monaco says lots of stuff about this one if you hit the Try it out… button you can see…

November 26, 2021

// humor // javascript // obfuscation

Obfuscated Pre

```
b = document.body
```
```
with(b.style) 
```

  fontFamily = 'monospace', fontSize = '2em',

  transform = 'skew(10deg) translateX(40px)'

```
 
```
```
N = '<br>';
```
```
 
```
```
(f=(_='*')=>(
```

  b.innerHTML+=` <b style='opacity:${Math.random()+.2}'>${_}</b>`,f))('<pre>')

```
  (   )(   )(   )(   )(N)
```
```
   ('(')('0')('_')('_')(N)
```
```
    ('-')(   )(   )('-')(N)
```
```
     ('_')('_')('0')(')')(N)
```
```
      ('-')(   )(   )('-')(N)
```
```
       ('(')('0')('_')('_')(N)
```
```
        ('-')(   )(   )('-')(N)
```
```
         ('_')('_')('0')(')')(N)
```
```
          ('-')(   )(   )('-')(N)
```
```
           ('(')('0')('_')('_')(N)
```
```
            (   )(   )(   )(   )
```

Not really sure what this is… just playing around…

October 23, 2021

// codegolf // javascript // obfuscation // speed-coded // strings

Flower of Life Canvas

```
((
```
```
  d = document,
```
```
  b = d.body,
```
```
  rad = (innerWidth * 1.9) / 6,
```
```
  theta = 0,
```
```
  thetaSpeed = 0.03,
```
```
  cx = innerWidth / 4,
```
```
  cy = innerHeight / 4,
```
```
  ox = 0,
```
```
  oy = 0,
```
```
  offTheta,
```
```
  x, y, ang, step, blur,
```
```
  _
```
```
) => {
```
```
  Object.assign(b.style, {
```
```
    background: 'black',
```
```
    margin: 0
```
```
  }) 
```
```
 
```

  blur = Object.assign(d.createElement`canvas`, {

```
    width: innerWidth * 2,
```
```
    height: innerHeight * 2
```
```
  }).getContext`2d`
```
```
 
```
```
  with (Math) {
```
```
    with (b.appendChild(
```

      Object.assign(d.createElement`canvas`, {

```
        width: innerWidth * 2,
```
```
        height: innerHeight * 2
```
```
      })
```
```
    ).getContext`2d`) {
```
```
      Object.assign(canvas.style, {
```
```
        width: '100%',
```
```
        height: '100%'
```
```
      })
```
```
 
```
```
      onresize = () => {
```

        blur.canvas.width = canvas.width = innerWidth * 2

        blur.canvas.height = canvas.height = innerHeight * 2

```
        rad = (innerWidth * 2.5) / 6
```
```
        cx = innerWidth
```
```
        cy = innerHeight
```
```
        fillStyle = '#000'
```

        fillRect(0, 0, canvas.width, canvas.height)

```
      }
```
```
      onresize()
```
```
 
```
```
      step = (PI * 2) / 6
```
```
 
```
```
      _ = t => {
```
```
        ang = ~~(t / 500) % 7
```
```
 
```
```
        globalAlpha = 0.23
```
```
        fillStyle = '#fff'
```
```
 
```
```
        if (ang > 0) {
```
```
          offTheta = step * ang
```
```
          ox = rad * cos(offTheta)
```
```
          oy = rad * sin(offTheta)
```
```
        } else {
```
```
          ox = 0
```
```
          oy = 0
```
```
        }
```
```
 
```
```
        for (i = 0; i < 20; i++) {
```

          x = ox + cx + rad * cos(theta)

          y = oy + cy + rad * sin(theta)

```
          theta += thetaSpeed
```
```
 
```
```
          fillRect(x, y, 4, 4)
```
```
        }
```
```
 
```
```
        blur.drawImage(canvas, 0, 0)
```
```
 
```
```
        globalAlpha = 0.05
```
```
        drawImage(blur.canvas, 0, 2)
```
```
 
```
```
        requestAnimationFrame(_)
```
```
      }
```
```
      _()
```
```
    }
```
```
  }
```
```
})()
```

Speed coded animated flower of life on canvas

October 20, 2021

// animation // canvas // javascript // math // obfuscation // speed-coded

Older Posts

Em3w parensordot

Code description from GPT4 because I’m too lazy to write one…

Concatenative JavaScript

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

Obfuscated Pseudo-typed Globals

Obfuscated Pre

Flower of Life Canvas

Recent

Archive