)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Remove from String

  1. x='hello'
  2. x.replace(/h/g,'') // 17 bytes
  3. x.split`h`.join`` // 16 bytes
  4. x.replaceAll('h','') // 19 bytes

Another fun one from the great javascript golfing tips stackexchange thread.

This one comes from user emanresu-a and this answer.

Slider Range Input Wave

  1. N = 8 // try changing this
  2. b = document.body
  3.  
  4. b.innerHTML += 'Drag any slider<br>'
  5. for (i = N; i--;) 
  6.   b.innerHTML += `<input id=${i} value=0 type=range style=width:200px;display:block>`
  7.  
  8. onchange = oninput = e => {
  9.   t = e.target
  10.   for (i = N; i--;) 
  11.     t.id != i && (
  12.       self[i].value = 100 * Math.sin(t.value / 60 * i))
  13. }

Sine wave with range sliders…

John Wallis Pi (Wallis Product)

  1. /*
  2. It was always my affectation even from a child, in all pieces
  3. of Learning or Knowledge, not merely to learn by rote, which 
  4. is soon forgotten, but to know the grounds or reasons of what 
  5. I learn; to inform my Judgement, as well as furnish my Memory; 
  6. and thereby, make a better Impression on both.
  7.  
  8. - John Wallis
  9.  
  10. */
  11.  
  12. i = c = 1
  13. setInterval(_ => {
  14.   for (j = 0; j < 1000; j++, i += .5)
  15.     c *= (~~i * 2) / (~~(i - .5) * 2 + 1)
  16.  
  17.   console.log(c * 2 + '\n' + 3.141592653589793)
  18. }, 16);
π = 2
2 / 1
·
2 / 3
·
4 / 3
·
4 / 5
·
6 / 5
·
6 / 7
·
8 / 7
·
8 / 9
·   · · ·

I was at an old book store a few days ago and randomly picked up History of Mathematics Vol. I by David Eugene Smith 1923 for $7.50. After enjoying flipping around and reading different parts, I pulled up Wikipedia to read more about the author… From there I found some interesting quotes from talking about John Wallis – when I saw the Wallis Product I was inspired to write a quick snippet.

// golfed // javascript // math // pi

toString Hack Obfuscated

  1. x=''+self 
  2. j=''
  3. 'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'
  4. .split``
  5. .map(_=>j+=`x[0x${_}]+`)
  6. console.log(eval(j+'""'))

Yesterday’s snippet saying something else…

It’s simpler than it looks:

  1. x=''+self 
  2. // becomes "[object Window]"
  3.  
  4. j='' 
  5. // initialize `j` which will be javascript to pass to `eval`
  6.  
  7. 'd1d7a17123456...' 
  8. // this is a list of index values to 
  9. // look up in `x` in hexidecimal so that each 
  10. // index is a single character
  11.  
  12. .split``
  13. // split the index values into an array `[0xe, 0x2 ...`
  14.  
  15. .map(_=>j+=`x[0x${_}]+`)
  16. // map over the index values and write a string like
  17. // this `x[0xe]+x[0x2]+...` into `j`
  18.  
  19. console.log(eval(j+'""'))
  20. // evaluate `j` with an empty string at the end
  21. // `x[0xe]+x[0x2]+""` and log it out
`

Obfuscated Canvas Commands

  1. const oCan = (
  2.   d = document,
  3.   b = d.body,
  4.   canvas = b.appendChild(document.createElement('canvas')),
  5.   c = canvas.getContext('2d'),
  6.   props = [],
  7.   o = {},
  8.   docs = {},
  9.   cmds = [],
  10.   L,
  11.   k,
  12.   du,
  13.   j,
  14.   draw,
  15.   id
  16. ) => {
  17.   ;(onresize = () => {
  18.     canvas.width = innerWidth
  19.     canvas.height = innerHeight
  20.     if (draw) {
  21.       clearTimeout(id)
  22.       id = setTimeout(() => cmds.forEach(v => draw(v)), 500)
  23.     }
  24.   })()
  25.  
  26.   Object.assign(b.style, { margin: 0, height: '100%' })
  27.  
  28.   // longer way: console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(c)));
  29.   for (let i in c) props.push(i)
  30.  
  31.   // make alphabetical since object keys have
  32.   // no order
  33.   props.sort().map(i => {
  34.     L = i.match(/[A-Z]/)
  35.     k = i[0]
  36.     if (L) k += L[0]
  37.     du = 0
  38.     if (o[k]) {
  39.       j = 0
  40.       while (o[k]) k += i[++j]
  41.     }
  42.  
  43.     o[k] =
  44.       (typeof c[i])[0] == 'f'
  45.         ? (...args) => c[i].apply(c, args)
  46.         : v => (c[i] = v)
  47.     docs[i] = k
  48.   })
  49.  
  50.   console.log('docs:', JSON.stringify(docs, null, 2))
  51.  
  52.   return (draw = (s, cmd, currFn, args = [], part, fn, num) => {
  53.     cmd = s.split(/\s+/)
  54.     cmds.push(s)
  55.     c.save()
  56.     for (let i = 0; i < cmd.length; i++) {
  57.       part = cmd[i]
  58.       fn = o[part]
  59.       if (fn && currFn != fn) {
  60.         currFn && currFn.apply(c, args)
  61.         currFn = fn
  62.         args = []
  63.       } else {
  64.         num = parseFloat(part)
  65.         args.push(!isNaN(num) ? num : part)
  66.       }
  67.     }
  68.     currFn && currFn.apply(c, args)
  69.     c.restore()
  70.   })
  71. }
  72.  
  73. const c = oCan()
  74. // `font` & text not suppoted
  75. // make str a function so resize works?
  76. c(`
  77.   fS #ccc
  78.   fR 0 0 400 ${innerHeight}
  79.   fS blue
  80.   fR 40 0 20 20
  81.   gCl difference
  82.   ro .25
  83.   fR 50 0 30 30
  84.   gCl source-over
  85.   fS rgba(200,100,9)
  86.   fR 100 100 40 40
  87.   `)

I’ve had this idea for a long time, never bothered doing it until now. I wrote it in a semi-golfed style for no reason… Anyway, this lets you write canvas code in a strange obfuscated syntax that looks like this:

  1. c(`
  2.   fS #ccc
  3.   fR 0 0 400 ${innerHeight}
  4.   fS blue
  5.   fR 40 0 20 20
  6.   gCl difference
  7.   ro .25
  8.   fR 50 0 30 30
  9.   gCl source-over
  10.   fS rgba(200,100,9)
  11.   fR 100 100 40 40
  12.   `)

This snippet logs out some JSON that shows all the method aliases for the canvas context.

snippet.zone ~ 2021-23 /// {s/z}